今回は、ブロックエディタでマイボックスを使いこなす方法（初級編）として解説していきます。
マイボックスとは、AFFINGER6の専用ブロックのひとつです。
AFFINGER6で使えるボックスの中でも「マイボックス」は使い勝手がいいのでよく使います。
ここでは、AFFINGERの使い方にまだなれていない方でもわかるように、写真とアニメーションを使ってわかりやすく解説していきます。
使用するのは「ブロックエディタ」です。「クラシックエディタ」は使用しません。
AFFINGER6専用「Gutebergプラグイン2」を必ず有効化してください。
マイボックスの装飾例
まずはじめに、マイボックスでどんなボックスが作れるのかをご紹介します。
見出し、ボーダー、背景、テキスト、タイトルの下線、それぞれ色の変更ができますが、ここではどんな形にできるかだけを解説していきます。
見出しありパターン
デフォルト
デフォルトのマイボックスはこんな感じで、良くも悪くも普通です。
パターン1
しゃきっとさせたい場合は、丸みを無くしてボーダーを細くするといいです。
- 太さ（px）：1
- 丸み（px）：0
※僕はこのパターンをよく使います。
パターン2
見出しを中に入れることもできます。
パターン3
見出しを内側に入れて下線を追加することもできます。
パターン4
ボーダーを0pxにすることで、背景色のみのボックスも作れます。
見出しなしパターン
見出しがないパターンでは、ただボーダーで囲っただけのボックスが作れます。
ボーダーの太さは、0～100px まで変更可能。
※ちなみにこのボックスのボーダーは10pxです。
見出しにアイコンだけ表示することも可能です。
※見出しサイズは200％です。
背景色のみのボックスも簡単にできます。
赤ボックス
グレーボックス
黄色ボックス
その他
黒板風ボックス
- 黒板にまとめを書く
- 学生時代を思い出す
大事なところは 赤で表示すれば 記憶に残りやすい
注意
見出し、ボーダー、背景色を変更することで、簡単に目立つボックスが作れます。
パーツを組み合わせれば、ブログカード風内部リンクとしても使えるぞ！
あわせて読みたい！
-
-
AFFINGER6「ブログカード風」内部リンクの作り方【装飾し放題！】
今回ご紹介する方法は、 デフォルトのブログカードではもの足りない…… もっと内部リンクを目立たせたい！ という方におすすめの方法です。 ブログカード風内部リンクを使えば、 ボーダーの「色」や「太さ」の ...
マイボックス設定の使い方
ここでは、マイボックスの設定について詳しく解説していきます。
解説する順番
- マイボックスを挿入する
- 見出しを編集する
- 上下左右のマージンを設定する
- ボーダー（枠線）の設定
マイボックスを挿入する
まずは、新しい段落に「/マイボックス」と入力し、「STINGER：マイボックス」を挿入します。
もしくは、すでに挿入している段落の下にある①「＋」を押してブロック追加 → ②「すべて表示」をクリック → ブロックメニューより ③「STINGER：マイボックス」を選択で挿入できます。
見出しを編集する
次に「タイトル設定」で見出しの編集を行います。
見出しは、ここの部分です。
ここで編集できるのは、
- 見出し
- 文言
- サイズ
- 太字または標準
- アイコンの種類
- 見出しを内側に入れるかどうか
この3つです。
見出しの設定
１．見出しの文言を変更します。
マイブロックを選択した状態で、タイトル設定の見出しの欄に文言を入力します。
デフォルトでは「ポイント」と入力されています。
「太字」をオフにすると通常のテキストになります。
２．アイコンの種類を変更します。
デフォルトのアイコン（約40個）から選ぶ。
もしくは、アイコンのクラス名を入力し、デフォルトにないWEBアイコンを使うこともできます。
その他のWEBアイコンは、AFFINGER公式マニュアルにある「オリジナルアイコンリスト」で確認してください。（約100個あります）
３．見出しをボックスの内側に入れたい場合は、「内側に入れる」をONにします。
４．見出しサイズを変更したい場合は、見出しサイズをパーセンテージで調節します。
90～120％ の間が使いやすいサイズだと思います。
上下左右のマージンを設定する
マージン設定を変更することで、マイボックスの上と下との段落の間の空白を調整と、左右の空白の調整が可能です。
デフォルトのマージン設定は、
- 上：25 px
- 右：0 px
- 下：25 px
- 左：0 px
ここから、～ 100 pxまでマージンを調整できます。
マージン設定のつまみをクリックした状態で、左右に動かせば数値を変更できます。
ボーダー（枠線）の設定
ボーダー（枠線）の太さと角の丸みを調整することができます。
デフォルトは、
- 太さ：2 px
- 丸み：5 px
調整幅は「0～100px 」
「太さ」調整イメージ
太さが10pxを超えると、見出しとボーダーにズレが生じます。
「丸み」調整イメージ
丸みの限界は50pxです。50～100pxは、丸みに変化がなくなります。
色の設定
マイボックスの各パーツの色を変更できます。
設定項目
- タイトル
- 背景色
- ボーダー色
- タイトル下線色
各パーツの色を変更する方法は2つ。
あらかじめ用意されている色を使うか、カラーパレットで好きな色を選択するかです。
色の変更イメージ①
色の変更イメージ②
見出し無しのボックスを作る方法
見出し無しのボックス（枠線のみのボックス）の作り方を解説します。
イメージとしては、こんな感じのボックスです。
青とか、、、
グレーとか、、、
黄色とか、、、
どんな色でも作れます！
作り方は簡単です。
１．マイボックスを挿入する。
新しい段落に「/マイボックス」と入力してブロックを呼び出すか、ブロック追加の「＋」からマイボックスを追加してください。
２．ブロック設定の「見出し」に入力されている「ポイント」というテキストを削除する。
これだけで、見出しのないただのボックスになります。
設定イメージ
あとは、ボーダー設定で太さと丸みを調節し、色設定で背景色とボーダー色を変更し、好みのボックスを作ってください。
まとめ
今回は、マイボックスの基本的な使い方について解説しました。
他の装飾との組み合わせしだいで、マイボックスのデザインは無限に広がります。
応用編では、さらに便利に使える技や、デザインの追求も紹介したいと思います。
マイボックスの応用編を見る
