本記事では、AFFINGER5でボックスを使用する方法・ボックス見本一覧を紹介します。
ボックスとは、以下のようなものです。
ポイント
マイボックス見本(枠なし)

ブロックエディタ(Gutenberg)での使用方法を解説しますね♪
目次
AFFINGER5 ボックスの使い方と見本
AFFINGER5でボックスを使用する方法は2つあります。
- ブロックエディタを利用する方法
- クラシック版の段落を利用する方法
それぞれ詳しく解説します!
ボックスの使い方(STINGER)
まず、AFFINGER5購入時についてきた「Gutenberg用プラグイン」をインストールする必要があります。
具体的なインストール方法は「 リンク」にありますので参考にしてください。
ブロックエディタを追加し、ボックスと検索してください。

3種類のボックスが使用できます。以下、使用例。
マイボックス
ポイント
バナー風ボックス
見出しテキスト
見出し付きフリーボックス
見出しテキスト
見出し、マーク、色などの細かな設定は右側の歯車マークから行うことができます。

以上がブロックエディタでの使い方です。
しかし、枠のみでボックスを作りたい場合はこの方法ではできません。
クラシック版のエディタを使いましょう!
「ブロックエディタしか使ってない」って方でも、簡単にできるので大丈夫です!
ボックスの使い方(TinyMCE クラシック版の段落)
まず、有名なプラグイン「TinyMCE Advanced」をインストールして有効化しましょう。

ブロックエディタを追加し、「クラシック版の段落」を選択します。
「タグ」->「ボックスデザイン」へ進むと、様々な種類のボックスが利用できます。

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

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

後はそれぞれ、実際に値を変更して確認してみてください!
マイボックス使用例一覧

バナー風ボックス
基本
タイトル
背景ナシ
タイトル
左寄せ
タイトル
マイボックス
基本
ポイント
しかく(枠のみ)
まるみ
参考
参考
メモ
メモ
ポイント
ポイント
注意ポイント
注意ポイント
はてな
はてな
ミニふきだし
ふきだしテキスト
マイボックス(+CSSクラス)
メモ
メモ
メモ(下線のみ)
メモ
メモ(枠のみ)
メモ
メモ(枠・下線あり)
メモ
注意(下線のみ)
ここに注意
必要なモノ
必要なモノ
- ダミーテキスト
- ダミーテキスト
- ダミーテキスト
必要なモノ(ドット下線)
必要なモノ
- ダミーテキスト
- ダミーテキスト
- ダミーテキスト
チェックリスト
チェックリスト
- ダミーテキスト
- ダミーテキスト
- ダミーテキスト
チェックリスト(ドット下線)
チェックリスト
- ダミーテキスト
- ダミーテキスト
- ダミーテキスト
簡単な流れ
簡単な流れ
- ダミーテキスト
- ダミーテキスト
- ダミーテキスト
簡単な流れ(ドット下線)
簡単な流れ
- ダミーテキスト
- ダミーテキスト
- ダミーテキスト
見出し付きフリーボックス
基本
ポイント
注意
注意
はてな
はてな
ポイント
ポイント
メモ
メモ
基本(タイトル幅100%)
見出し(全角15文字)
注意(タイトル幅100%)
はてな(タイトル幅100%)
ポイント(タイトル幅100%)
メモ(タイトル幅100%)
メモボックス
メモ
スライドボックス
チェックボックス
こんな方におすすめ(v)
こんな方におすすめ
- これはダミーのテキストです
- これはダミーのテキストです
こんな方におすすめ[v]
こんな方におすすめ
- これはダミーのテキストです
- これはダミーのテキストです
ガイドマップメニュー
こんな方におすすめ
- これはダミーのテキストです
- これはダミーのテキストです
以上が使えるボックス一覧です。
ご自身の好みに合わせて使ってみてください!