今回は、AFFINGER6専用ブロック「タイトル付きフリーボックス」を使いこなす方法 を解説します。
「タイトル付きフリーボックス」は、旧名称「見出し付きフリーボックス」と呼ばれていた機能です。
記事の中で強調したい部分を、見やすく・わかりやすく装飾できる便利なブロックです。
初心者の方でも理解できるよう、順を追って丁寧に説明していきます。
この機能を使うには、以下の条件が必要です。
- 使用エディタ： ブロックエディタ（Gutenberg）
※「クラシックエディタ」では使えません。 - AFFINGER6専用「Gutenbergプラグイン2」 を必ず有効化しておきましょう。
タイトル付きフリーボックスとは？
タイトル付きフリーボックス（旧：見出し付きフリーボックス） は、WordPressテーマ AFFINGER6 に標準搭載されている「記事を装飾するためのブロック」です。
文章の中で「ここは特に読者に伝えたい！」という部分を、枠で囲んで分かりやすく強調できます。
特徴とメリット
- 大事な情報を目立たせられる
まとめ・注意点・アドバイスなどを枠で囲むことで、読み飛ばされにくくなります。 - タイトル付きで直感的に理解できる
枠の上にタイトルを付けられるので、「ポイント」「注意」「補足」など、内容が一目で伝わります。 - デザインを自由にカスタマイズ
枠の色・デザイン・アニメーションを選べるので、自分のブログの雰囲気に合わせた表現が可能です。
使いどころの例
- 記事のまとめポイントを整理するとき
- 注意点や補足を分かりやすく伝えたいとき
- 読者に強く印象づけたい一文を入れるとき
見出し付きフリーボックスの装飾例
まずはじめに、見出し付きフリーボックスでどんな装飾ができるのかをご紹介します。
見出しテキスト
デフォルトはこの形になります。
- 太さ：2
- 丸み：5
※ダッシュボードメニューの「外観」→「カスタマイズ」→「オプション（その他）」→「見出し付きフリーボックス」←ここでデフォルトの色を変更できます。
見出しテキスト
見出しを100％にすると、こんな感じになります。
- 太さ：2
- 丸み：5
色の変更
見出し・背景・ボーダーの色を自由に変更できます。
- 太さ：0
- 丸み：0
今回のまとめ
- 記事の最後に
- 今回のまとめとして
- 箇条書きでまとめる
そんな使い方もあり！
- 太さ：1
- 丸み：0
※アニメーションを追加する方法は以下の記事を参考にしてください。
見出し付きフリーボックスの設定と使い方
「見出し付きフリーボックス」を使うと、記事の中で大事な部分を枠で囲んで、ぐっと目立たせることができます。
ここでは、実際にどんなデザインや装飾ができるのかを例と一緒にご紹介します。
見出し付きフリーボックスを挿入する
新しい段落に「/フリー」と入力すると、「STINGER：見出し付きフリーボックス」が候補として表示されるので、それを選択。
すると見出し付きフリーボックスのブロックが挿入されます。
挿入イメージ
もしくは、ブロック追加の「＋」をクリックし、ブロックメニューの中から「STINGER：見出し付きフリーボックス」を選択する。
タイトルを設定する
タイトル設定で変更できるのは、
- 見出しに表示する文字
- アイコンの種類
- 見出しの幅（左寄せ or 100％）
- 太字 or 細字
この4つです。
見出しに表示する文字
「見出し（全角15文字）」の欄に、見出しに表示させたいテキストを入力します。
見出しに表示できるの全15文字
↑ 見出しには15文字文字までしか表示できません。
現在表示しているのが15文字の限界です。
※これは見出しを100％にしても同じです。
アイコンの種類を選択
約40個あるアイコン一覧から選択、もしくはアイコンクラスを入力することで、任意のアイコンを見出しに挿入できます。
見出しの幅を変更
見出しの幅はデフォルトでは左側のみで、100％にするとボックスの横幅いっぱいに広がります。
イメージ
太字 or 細字
見出しの文字の太さを変更できます。
イメージ
ボーダー設定
ボーダー設定で変更できるのは、
- ボーダーの太さ
- ボーダーの丸み
この2つです。
「太さ」変更イメージ
ボーダーの太さは、0 ～ 5 までがベスト。太くてもせいぜい20ぐらいまでがなんとか使えるかなといった感じです。
「丸み」変更イメージ
丸みは 0 ～100 まで変更できますが、これはお好みでどうぞ。
色の設定
色の設定で変更できるのは、
- タイトル色
- 背景色
- ボーダー色
この3つです。
「タイトル色」変更イメージ
「背景」変更イメージ
イメージ
これで一通りの設定を解説しました。
まとめ
今回は、見出し付きフリーボックスの基本的な使い方 を解説しました。
操作自体はとてもシンプルなので、初心者の方でもすぐに活用できます。
ポイントは、
- どんな場面で使うのか（まとめ、注意点、補足 など）
- どんなデザインにするのか（色・枠・タイトル）
この2つを決めておくことです。
よく使うパターンは 「パターン登録」 しておけば、次からはワンクリックで呼び出せるようになります。
記事作成の時短にもつながるので、ぜひ利用してみてください。
ちなみに、アイコンにアニメーションを追加する方法 については、以下の記事で詳しく解説しています。
「アイコンを動かしてもっと目立たせたい！」というときに役立つので、ぜひ参考にしてみてください。
