【AFFINGER5】ボックスの使い方とボックス一覧（ブロックエディタ対応）

本記事では、AFFINGER5でボックスを使用する方法・ボックス見本一覧を紹介します。

ボックスとは、以下のようなものです。

AFFINGER5　ボックスの使い方と見本

AFFINGER5でボックスを使用する方法は2つあります。

• ブロックエディタを利用する方法
• クラシック版の段落を利用する方法

それぞれ詳しく解説します！

ボックスの使い方（STINGER）

まず、AFFINGER5購入時についてきた「Gutenberg用プラグイン」をインストールする必要があります。

具体的なインストール方法は「 リンク」にありますので参考にしてください。

ブロックエディタを追加し、ボックスと検索してください。

3種類のボックスが使用できます。以下、使用例。

マイボックス

バナー風ボックス

見出し付きフリーボックス

見出し、マーク、色などの細かな設定は右側の歯車マークから行うことができます。

以上がブロックエディタでの使い方です。

しかし、枠のみでボックスを作りたい場合はこの方法ではできません。

クラシック版のエディタを使いましょう！

「ブロックエディタしか使ってない」って方でも、簡単にできるので大丈夫です！

ボックスの使い方（TinyMCE クラシック版の段落）

まず、有名なプラグイン「TinyMCE Advanced」をインストールして有効化しましょう。

ブロックエディタを追加し、「クラシック版の段落」を選択します。

「タグ」－＞「ボックスデザイン」へ進むと、様々な種類のボックスが利用できます。

一例として、「マイボックス」の「基本」を選択します。

すると、下記のようなコードが出てきます。それぞれの役割は、赤色で記入してあります。

後はそれぞれ、実際に値を変更して確認してみてください！

マイボックス使用例一覧

バナー風ボックス

基本

背景ナシ

左寄せ

マイボックス

基本

しかく（枠のみ）

まるみ

参考

メモ

ポイント

注意ポイント

はてな

ミニふきだし

マイボックス（+CSSクラス）

メモ

メモ（下線のみ）

メモ（枠のみ）

メモ（枠・下線あり）

注意（下線のみ）

必要なモノ

必要なモノ（ドット下線）

チェックリスト

チェックリスト（ドット下線）

簡単な流れ

簡単な流れ（ドット下線）

見出し付きフリーボックス

基本

注意

はてな

ポイント

メモ

基本（タイトル幅100%）

注意（タイトル幅100%）

はてな（タイトル幅100%）

ポイント（タイトル幅100%）

メモ（タイトル幅100%）

メモボックス

 

スライドボックス

チェックボックス

こんな方におすすめ（v）

こんな方におすすめ[v]

ガイドマップメニュー

以上が使えるボックス一覧です。

ご自身の好みに合わせて使ってみてください！