AFFINGER6のブロックエディタ(Gutenberg)にはボックスの表現が３種類用意されています！
今回はその３つのボックス表現の使い方について紹介します。
AFFINGER6(アフィンガー６)で使えるボックス系のブロック３種類の紹介
まずは３つのボックスがどんなものか簡単に紹介します。
右のアイコンが特徴！「メモ」ブロック
左側にアイコン。右側に内容を表示するタイプのボックスです。
うちのサイトでは「行き方」を説明するときに使っています。
段落(p)との違い
一部の段落(p)のスタイルに同じようなデザインがありますが違うのは次のポイントです。
- アイコンの下に小さい文字を入れることができる(段落はアイコンのみ)
- 改行ができる(段落は改行できない)
- コードが長め(段落の方がコードが短い)
使い分けのポイントは、短い文章には段落(p)を、複数行に渡るときはメモブロックを使うといいです。
枠線が特徴！「マイボックス」ブロック
上にタイトルがあって枠線で内容を囲むタイプのボックスです。
うちのサイトでは「まとめ」をするときに使っています。
目立つタイトル！「見出し付きフリーボックス」ブロック
掲示板のようなボックスです。タイトル部分が目立ちます。
うちのサイトでは用語解説をするときに使っています。
ボックス系ブロック３種類の使い方手順
使い方を紹介します。３種類とも使い方は同じなのでまとめて紹介しますね。
この機能を使うにはAFFINGER専用のグーテンベルグプラグイン「Gutenbergプラグイン２」が必要です。まだ導入していない人はダウンロード手順、インストール手順を参考にしてプラグインを有効化してください。
ブロックを挿入
まずは使いたいボックスを選んで編集画面に挿入します。
左上のブロックを追加ボタンを押してください。するとブロックの一覧が出てきます。その中から使いたいボックスを選択します。
ボックス系のブロックはSTINGERという箇所の一番上に並んでいます(STINGER:メモ、STINGER:マイボックス、STINGER:見出し付きフリーボックス)
ブロックを編集
ボックスブロックの内容を編集します。
アイコンを設定する(共通)
アイコンの設定は３つ共通なのでここで紹介します。
ボックスのフチを押してボックス全体を選択状態にしてください。ボックスが編集できるようになります。右のパネルを開きます(歯車ボタン→ブロック)
設定画面のプルダウンからアイコンを選ぶことができます(標準装備のアイコンは41種類)。アイコンが不必要の場合は(未設定)にしてください。
FontAwesomeなど標準装備以外のアイコンを表示したい場合はアイコンクラスに該当するアイコンのクラス名を入力します。
文章などの内容を入れる
タイトルを入力、または/でブロックを選択を押して文章や画像などの内容を入力してください。
各ボックス固有の設定
それぞれのボックスの固有の設定を行ってください。
ここからは個別の使い方に触れていきます。
メモブロック
アイコンの下に文字を入れる
テキスト部分に文字を入れるとアイコンの下に文字が反映されます。短めのテキストにしてください(公式によると４文字以内がいいそうです)。そうしないと改行されてちょっと不恰好になります。
アイコンの色や大きさを設定(お好みで)
アイコンの色でアイコンの色を、アイコンサイズ(%)でアイコンの大きさを設定できます。
マイボックスブロック
見出しの設定
見出し部分に文字を入れます。注意見出しはなるべく短くしてください(デフォルトの文字サイズで16文字以内？)。そうしないとスマホでレイアウトが崩れます。
また次の項目はお好みで設定してください。
- 見出しサイズ（%）：見出しの大きさが変わります
- 内側に入れる：見出しが枠の内側に移動します
- 太字：オフにすると見出しが細くなります
枠線の設定
ボーダー設定で周りの枠線の太さと丸みを調節できます。それぞれ太さ(px)と丸み(px)で変更してください。
太く丸くするとかわいい感じ、細く角張らせればかっこいい感じになります。
見出し付きフリーボックスブロック
見出しの設定
見出し部分に文字を入れます。注意見出しは全角15文字以内に収めてください。そうしないとスマホでレイアウトが崩れます。
また次の項目はお好みで設定してください。
- 見出し幅 100%で見出しの幅がいっぱいに広がります。
- 太字をオフにすると見出しが細くなります。
- ボーダー設定では見出し部分のボーダーの太さや角の丸みを調節できます。それぞれ太さ(px)と丸み(px)で変更してください。
ボックスブロックの色を変更
最後に色を整えます。
ボックスの端を押してボックス全体を選択状態にしてください。ボックスが編集できるようになります。
設定画面(＞ブロック)の下に色設定の項目があるのでここで色を調節してください。
以上、AFFINGERのブロックエディタで使えるボックスの表現３種類の紹介でした。
公式マニュアルはコチラ