今回は、ブロックエディタでAFFINGER専用メモボックス(メモブロック)を使いこなす方法(基本編)として解説していきます。
メモボックスは2種類に分かれます。
- 段落スタイルのメモボックス
- AFFINGER専用ブロックのメモボックス
ここでは、AFFINGER専用ブロックのメモボックスの使い方について、詳しく解説していきます。
段落スタイルのメモボックスの使い方については、以下の記事に詳しく書いているので、2種類を使い分けたい方はぜひチェックしてください。
(段落スタイルのメモボックスの使い方の記事は、只今準備中です。)
使用するのは「ブロックエディタ」です。「クラシックエディタ」は使用しません。
メモボックス装飾例
まずはじめに、メモボックス(メモブロック)とはどんなボックスなのかイメージを紹介します。
デフォルト
メモブロックの設定と使い方
ここでは、メモブロックの挿入 ~ 各設定までの手順を詳しく解説していきます。
設定項目
- アイコン設定
- アイコン色
- アイコンクラス
- アイコンサイズ
- 色設定
- 文字色
- 背景色
- ボーダー色
メモブロックを挿入する
新しい段落に「/メモ」と入力し、「STINGER:メモ」を選択。
するとメモブロックが挿入されます。
もしくは、ブロック追加の「+」をクリックし、ブロックメニューの中から「STINGER:メモ」を選択する。
アイコンを設定する
アイコン設定で変更できるのは、
- アイコンの色の設定
- アイコンの種類
- アイコンのサイズ
この3つです。
アイコンの色を設定する
アイコン色としてあらかじめ用意されている色を選択、またはカラーパレットから好きな色を選べます。
設定イメージ
アイコンの種類を選択する
デフォルトのアイコン(約40個)から選ぶ。
もしくは、アイコンのクラス名を入力し、デフォルトにないWEBアイコンを使うこともできます。
その他のWEBアイコンは、AFFINGER公式マニュアルにある「オリジナルアイコンリスト」で確認してください。(約100個あります)
アイコンのサイズを変更する
アイコンのサイズを、100~パーセンテージで変更できます。
実用的なのは、~200% まで。 それ以上になると、アイコンとテキストのバランスが悪いです。
※ちなみにこのメモボックスのアイコンは200%にしています。
色の設定をする
色の設定で変更できるのは、
- 文字の色
- 背景の色
- ボーダーの色
この3つです。
「文字色」変更イメージ
「背景色」設定イメージ
「ボーダー色」設定イメージ
まとめ
今回は、AFFINGER専用ブロックである「メモボックス(メモブロック)」の基本的な使い方について解説しました。
基本的な設定は非常に簡単です。
あとは、「どんな場面にどんな装飾を施したメモボックスを使うのか」これが決まれば、パターンとして登録してすぐに呼び出せるようにしておきましょう。
(「パターン」の登録~使い方については、只今準備中です。)
ちなみに、アイコンにアニメーションを追加する方法については、以下の記事に詳しく書いていますので、参考にしてください。