AFFINGER専用ブロック

ボックス系ブロック3種類(メモ、マイボックス、見出し付きフリーボックス)の使い方:AFFINGER6(アフィンガー6)

2022年2月8日

AFFINGER6のブロックエディタ(Gutenberg)にはボックスの表現が3種類用意されています!

今回はその3つのボックス表現の使い方について紹介します。

AFFINGER6(アフィンガー6)で使えるボックス系のブロック3種類の紹介

まずは3つのボックスがどんなものか簡単に紹介します。

右のアイコンが特徴!「メモ」ブロック

メモブロックの見本:AFFINGER6(アフィンガー6)のブロックエディタ(Gutenberg)

左側にアイコン。右側に内容を表示するタイプのボックスです。

うちのサイトでは「行き方」を説明するときに使っています。

段落(p)との違い

「段落(p)の一部のスタイル」と「メモブロック」の違い

一部の段落(p)のスタイルに同じようなデザインがありますが違うのは次のポイントです。

  • アイコンの下に小さい文字を入れることができる(段落はアイコンのみ)
  • 改行ができる(段落は改行できない)
  • コードが長め(段落の方がコードが短い)

使い分けのポイントは、短い文章には段落(p)を、複数行に渡るときはメモブロックを使うといいです。

枠線が特徴!「マイボックス」ブロック

マイボックスブロックの見本:AFFINGER6(アフィンガー6)のブロックエディタ(Gutenberg)

上にタイトルがあって枠線で内容を囲むタイプのボックスです。

うちのサイトでは「まとめ」をするときに使っています。

目立つタイトル!「見出し付きフリーボックス」ブロック

見出し付きフリーボックスブロックの見本:AFFINGER6(アフィンガー6)のブロックエディタ(Gutenberg)

掲示板のようなボックスです。タイトル部分が目立ちます。

うちのサイトでは用語解説をするときに使っています。

ボックス系ブロック3種類の使い方手順

使い方を紹介します。3種類とも使い方は同じなのでまとめて紹介しますね。

このブロックを使うにはAFFINGER専用のプラグイン"Gutenbergプラグイン2"を事前にインストール、有効化している必要があります。まだの人はダウンロード手順インストール手順を参考にしてプラグインを有効化してください。

ブロックを挿入

まずは使いたいボックスを選んで編集画面に挿入します。

ボックス系ブロックの使い方1:ブロックを挿入する。AFFINGER6(アフィンガー6)

左上のブロックを追加ボタンを押してください。するとブロックの一覧が出てきます。その中から使いたいボックスを選択します。

ボックス系のブロックはSTINGERという箇所の一番上に並んでいます(STINGER:メモSTINGER:マイボックスSTINGER:見出し付きフリーボックス)

ブロックを編集

ボックスブロックの内容を編集します。

アイコンを設定する(共通)

ボックス系ブロックの使い方2:ブロックを編集する(アイコン設定)。AFFINGER6(アフィンガー6)

アイコンの設定は3つ共通なのでここで紹介します。

ボックスのフチを押してボックス全体を選択状態にしてください。ボックスが編集できるようになります。右のパネルを開きます(歯車ボタン→ブロック)

設定画面のプルダウンからアイコンを選ぶことができます(標準装備のアイコンは41種類)。アイコンが不必要の場合は(未設定)にしてください。

FontAwesomeなど標準装備以外のアイコンを表示したい場合はアイコンクラスに該当するアイコンのクラス名を入力します。

文章などの内容を入れる

ボックス系ブロックの使い方2:ブロックを編集する(文章を入れる)。AFFINGER6(アフィンガー6)

タイトルを入力、または/でブロックを選択を押して文章や画像などの内容を入力してください。

各ボックス固有の設定

それぞれのボックスの固有の設定を行ってください。

ここからは個別の使い方に触れていきます。

メモブロック

アイコンの下に文字を入れる

メモブロックを編集する(アイコンの下に文字を入れる)。AFFINGER6(アフィンガー6)

テキスト部分に文字を入れるとアイコンの下に文字が反映されます。短めのテキストにしてください(公式によると4文字以内がいいそうです)。そうしないと改行されてちょっと不恰好になります。

アイコンの色や大きさを設定(お好みで)

メモブロックを編集する(アイコンの色やサイズを変える)。AFFINGER6(アフィンガー6)

アイコンの色でアイコンのを、アイコンサイズ(%)でアイコンの大きさを設定できます。

マイボックスブロック

見出しの設定

マイボックスブロックを編集する(見出しを入れる)。AFFINGER6(アフィンガー6)

見出し部分に文字を入れます。注意見出しはなるべく短くしてください(デフォルトの文字サイズで16文字以内?)。そうしないとスマホでレイアウトが崩れます。

マイボックスブロックを編集する(見出しのデザインをお好みで変更する)。AFFINGER6(アフィンガー6)

また次の項目はお好みで設定してください。

  • 見出しサイズ(%):見出しの大きさが変わります
  • 内側に入れる:見出しが枠の内側に移動します
  • 太字:オフにすると見出しが細くなります

枠線の設定

マイボックスブロックを編集する(枠線の設定をする)。AFFINGER6(アフィンガー6)

ボーダー設定で周りの枠線の太さ丸みを調節できます。それぞれ太さ(px)丸み(px)で変更してください。

太く丸くするとかわいい感じ、細く角張らせればかっこいい感じになります。

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

見出しの設定

見出し付きフリーボックスブロックを編集する(見出しを入れる)。AFFINGER6(アフィンガー6)

見出し部分に文字を入れます。注意見出しは全角15文字以内に収めてください。そうしないとスマホでレイアウトが崩れます。

見出し付きフリーボックスブロックを編集する(見出しの設定)。AFFINGER6(アフィンガー6)

また次の項目はお好みで設定してください。

  • 見出し幅 100%で見出しの幅がいっぱいに広がります。
  • 太字をオフにすると見出しが細くなります。
  • ボーダー設定では見出し部分のボーダーの太さや角の丸みを調節できます。それぞれ太さ(px)丸み(px)で変更してください。

ボックスブロックの色を変更

最後に色を整えます。

ボックスの端を押してボックス全体を選択状態にしてください。ボックスが編集できるようになります。

設定画面(>ブロック)の下に色設定の項目があるのでここで色を調節してください。

ボックス系ブロックの使い方3:ブロックの色を変更する。AFFINGER6(アフィンガー6)

以上、AFFINGERのブロックエディタで使えるボックスの表現3種類の紹介でした。

公式マニュアルはコチラ

-AFFINGER専用ブロック