使い方 専用パーツ

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

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

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

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

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

AFFINGER6専用「Gutebergプラグイン2」を必ず有効化してください。

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

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

見出しテキスト

デフォルトはこの形になります。

  • 太さ:2
  • 丸み:5

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

見出しテキスト

見出しを100%にすると、こんな感じになります。

  • 太さ:2
  • 丸み:5

色の変更

見出し・背景・ボーダーの色を自由に変更できます。

  • 太さ:0
  • 丸み:0

今回のまとめ

  • 記事の最後に
  • 今回のまとめとして
  • 箇条書きでまとめる

そんな使い方もあり!

  • 太さ:1
  • 丸み:0

注意

アニメーションを追加することで、アイコンを点滅させることもできます。

  • 太さ:3
  • 丸み:0

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

あわせて読みたい

AFFINGER6でボックスの「アイコン」を動かす方法

「ボックスのアイコンを動かせたら目立つのにな~」 「どうしても読者に気づかせたい場所がある!」 という場合、AFFINGER6なら簡単にできます。 「追加CSSクラス」アニメーションコードを追加するだ ...

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

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

設定項目

  • タイトル設定
    • 見出し(全角15文字)
    • アイコンの選択
    • アイコンクラス
    • 見出し幅 100%
    • 太字
  • ボーダー設定
    • 太さ
    • 丸み
  • 色設定
    • タイトル色
    • 背景色
    • ボーダー色

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

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

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

挿入イメージ

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

タイトルを設定する

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

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

この4つです。

見出しに表示する文字

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

見出しに表示できるの全15文字

↑ 見出しには15文字文字までしか表示できません。

現在表示しているのが15文字の限界です。

※これは見出しを100%にしても同じです。

アイコンの種類を選択

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

見出しの幅を変更

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

イメージ

太字 or 細字

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

イメージ

ボーダー設定

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

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

この2つです。

「太さ」変更イメージ

ボーダーの太さを変更

ボーダーの太さは、0 ~ 5 までがベスト。太くてもせいぜい20ぐらいまでがなんとか使えるかなといった感じです。

「丸み」変更イメージ

丸みは 0 ~100 まで変更できますが、これはお好みでどうぞ。

色の設定

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

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

この3つです。

「タイトル色」変更イメージ

「背景」変更イメージ

イメージ

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

まとめ

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

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

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

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

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

参考記事

AFFINGER6でボックスの「アイコン」を動かす方法

「ボックスのアイコンを動かせたら目立つのにな~」 「どうしても読者に気づかせたい場所がある!」 という場合、AFFINGER6なら簡単にできます。 「追加CSSクラス」アニメーションコードを追加するだ ...

-使い方, 専用パーツ
-