使い方 専用パーツ

AFFINGER6の「マイボックス」を使いこなそう(基本編)

今回は、ブロックエディタでマイボックスを使いこなす方法(初級編)として解説していきます。

マイボックスとは、AFFINGER6の専用ブロックのひとつです。

AFFINGER6で使えるボックスの中でも「マイボックス」は使い勝手がいいのでよく使います。

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

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

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

マイボックスの装飾例

まずはじめに、マイボックスでどんなボックスが作れるのかをご紹介します。

見出し、ボーダー、背景、テキスト、タイトルの下線、それぞれ色の変更ができますが、ここではどんな形にできるかだけを解説していきます。

見出しありパターン

デフォルト

デフォルトのマイボックスはこんな感じで、良くも悪くも普通です。

パターン1

しゃきっとさせたい場合は、丸みを無くしてボーダーを細くするといいです。

  • 太さ(px):1
  • 丸み(px):0

※僕はこのパターンをよく使います。

パターン2

見出しを中に入れることもできます。

パターン3

見出しを内側に入れて下線を追加することもできます。

パターン4

ボーダーを0pxにすることで、背景色のみのボックスも作れます。

見出しなしパターン

見出しがないパターンでは、ただボーダーで囲っただけのボックスが作れます。

ボーダーの太さは、0~100px まで変更可能。

※ちなみにこのボックスのボーダーは10pxです。

見出しにアイコンだけ表示することも可能です。

※見出しサイズは200%です。

背景色のみのボックスも簡単にできます。

赤ボックス

グレーボックス

黄色ボックス

その他

黒板風ボックス

  • 黒板にまとめを書く
  • 学生時代を思い出す

大事なところは 赤で表示すれば 記憶に残りやすい

注意

見出し、ボーダー、背景色を変更することで、簡単に目立つボックスが作れます。

パーツを組み合わせれば、ブログカード風内部リンクとしても使えるぞ!

こんな感じで!

あわせて読みたい!

AFFINGER6「ブログカード風」内部リンクの作り方【装飾し放題!】

今回ご紹介する方法は、 デフォルトのブログカードではもの足りない…… もっと内部リンクを目立たせたい! という方におすすめの方法です。 ブログカード風内部リンクを使えば、 ボーダーの「色」や「太さ」を ...

マイボックス設定の使い方

ここでは、マイボックスの設定について詳しく解説していきます。

解説する順番

  • マイボックスを挿入する
  • 見出しを編集する
  • 上下左右のマージンを設定する
  • ボーダー(枠線)の設定

マイボックスを挿入する

まずは、新しい段落に「/マイボックス」と入力し、「STINGER:マイボックス」を挿入します。

もしくは、すでに挿入している段落の下にある①「+」を押してブロック追加 → ②「すべて表示」をクリック → ブロックメニューより ③「STINGER:マイボックス」を選択で挿入できます。

見出しを編集する

次に「タイトル設定」で見出しの編集を行います。

見出しは、ここの部分です。

ここで編集できるのは、

  1. 見出し
    • 文言
    • サイズ
    • 太字または標準
  2. アイコンの種類
  3. 見出しを内側に入れるかどうか

この3つです。

見出しの設定

1.見出しの文言を変更します。

マイブロックを選択した状態で、タイトル設定の見出しの欄に文言を入力します。

デフォルトでは「ポイント」と入力されています。

「太字」をオフにすると通常のテキストになります。

2.アイコンの種類を変更します。

デフォルトのアイコン(約40個)から選ぶ。

もしくは、アイコンのクラス名を入力し、デフォルトにないWEBアイコンを使うこともできます。

その他のWEBアイコンは、AFFINGER公式マニュアルにある「オリジナルアイコンリスト」で確認してください。(約100個あります)

3.見出しをボックスの内側に入れたい場合は、「内側に入れる」をONにします。

4.見出しサイズを変更したい場合は、見出しサイズをパーセンテージで調節します。

90~120% の間が使いやすいサイズだと思います。

上下左右のマージンを設定する

マージン設定を変更することで、マイボックスの上と下との段落の間の空白を調整と、左右の空白の調整が可能です。

デフォルトのマージン設定は、

  • 上:25 px
  • 右:0 px
  • 下:25 px
  • 左:0 px

ここから、~ 100 pxまでマージンを調整できます。

マージン設定のつまみをクリックした状態で、左右に動かせば数値を変更できます。

上下のマージン変更例

左右のマージン変更例

ボーダー(枠線)の設定

ボーダー(枠線)の太さと角の丸みを調整することができます。

デフォルトは、

  • 太さ:2 px
  • 丸み:5 px

調整幅は「0~100px 」

「太さ」調整イメージ

太さが10pxを超えると、見出しとボーダーにズレが生じます。

「丸み」調整イメージ

丸みの限界は50pxです。50~100pxは、丸みに変化がなくなります。

色の設定

マイボックスの各パーツの色を変更できます。

設定項目

  • タイトル
  • 背景色
  • ボーダー色
  • タイトル下線色

各パーツの色を変更する方法は2つ。

あらかじめ用意されている色を使うか、カラーパレットで好きな色を選択するかです。

色の変更イメージ①

色の変更イメージ②

見出し無しのボックスを作る方法

見出し無しのボックス(枠線のみのボックス)の作り方を解説します。

イメージとしては、こんな感じのボックスです。

青とか、、、

グレーとか、、、

黄色とか、、、

どんな色でも作れます!

作り方は簡単です。

1.マイボックスを挿入する。

新しい段落に「/マイボックス」と入力してブロックを呼び出すか、ブロック追加の「+」からマイボックスを追加してください。

2.ブロック設定の「見出し」に入力されている「ポイント」というテキストを削除する。

これだけで、見出しのないただのボックスになります。

設定イメージ

あとは、ボーダー設定で太さと丸みを調節し、色設定で背景色とボーダー色を変更し、好みのボックスを作ってください。

まとめ

今回は、マイボックスの基本的な使い方について解説しました。

他の装飾との組み合わせしだいで、マイボックスのデザインは無限に広がります。

応用編では、さらに便利に使える技や、デザインの追求も紹介したいと思います。

マイボックスの応用編を見る

-使い方, 専用パーツ
-