AFFINGER6の「見出し付きフリーボックス」を使いこなそう（基本編）

今回は、ブロックエディタで「見出し付きフリーボックスを使いこなす方法（初級編）」として解説していきます。

見出し付きフリーボックスとは、AFFINGER6の専用ブロックのひとつです。

ここでは、初心者の方でもわかるように、写真とアニメーションを使ってわかりやすく解説していきます。

使用するのは「ブロックエディタ」です。「クラシックエディタ」は使用しません。

見出し付きフリーボックスの装飾例

まずはじめに、見出し付きフリーボックスでどんな装飾ができるのかをご紹介します。

※ダッシュボードメニューの「外観」→「カスタマイズ」→「オプション（その他）」→「見出し付きフリーボックス」←ここでデフォルトの色を変更できます。

※アニメーションを追加する方法は以下の記事を参考にしてください。

見出し付きフリーボックスの設定と使い方

ここでは、見出し付きフリーボックスの挿入 ～ 各設定までの手順を詳しく解説していきます。

見出し付きフリーボックスを挿入する

新しい段落に「/フリー」と入力すると、「STINGER：見出し付きフリーボックス」が候補として表示されるので、それを選択。

すると見出し付きフリーボックスのブロックが挿入されます。

もしくは、ブロック追加の「＋」をクリックし、ブロックメニューの中から「STINGER：見出し付きフリーボックス」を選択する。

タイトルを設定する

タイトル設定で変更できるのは、

1. 見出しに表示する文字
2. アイコンの種類
3. 見出しの幅（左寄せ or 100％）
4. 太字 or 細字

この4つです。

見出しに表示する文字

「見出し（全角15文字）」の欄に、見出しに表示させたいテキストを入力します。

アイコンの種類を選択

約40個あるアイコン一覧から選択、もしくはアイコンクラスを入力することで、任意のアイコンを見出しに挿入できます。

見出しの幅を変更

見出しの幅はデフォルトでは左側のみで、100％にするとボックスの横幅いっぱいに広がります。

太字 or 細字

見出しの文字の太さを変更できます。

ボーダー設定

ボーダー設定で変更できるのは、

1. ボーダーの太さ
2. ボーダーの丸み

この2つです。

色の設定

色の設定で変更できるのは、

1. タイトル色
2. 背景色
3. ボーダー色

この3つです。

これで一通りの設定を解説しました。

まとめ

今回は、見出し付きフリーボックスの基本的な使い方について解説しました。

基本的な設定は非常に簡単です。

あとは、「どんな場面にどんな装飾を施した見出し付きフリーボックスを使うのか」これが決まれば、パターンとして登録してすぐに呼び出せるようにしておきましょう。

（「パターン」の登録～使い方については、只今準備中です。）

ちなみに、アイコンにアニメーションを追加する方法については、以下の記事に詳しく書いていますので、参考にしてください。