ブログの記事で，ボックスやリストなどの装飾をうまく使うことで，記事が整って見やすくなります。
アフィンガー5では，記事編集ページで「マイボックス」という機能を使うと，色々なパターンのボックスを簡単に設置することが出来ます。
今回は，アフィンガー5でマイボックスの使い方とカスタマイズの方法を解説していきます。
この記事はこんな方におすすめ
- AFFINGER5でマイボックスの使い方とカスタマイズの方法が知りたい
- 分かりやすくて見やすい記事を書きたい
参考
当ブログでも使用しているテーマ「WING（AFFINGER5）」は，SEOに強く収益が発生しやすいと評価されていて，稼ぐことに特化した人気のあるWordPress有料テーマです。
WING（AFFINGER5）の導入とインストールの方法については，
WING（AFFINGER5）【メリットとデメリットは？】購入とインストールの手順
で紹介していますので，参考にしてください。
-
-
WING（AFFINGER5）【メリットとデメリットは？】購入とインストールの手順
続きを見る
それでは解説していきます。
目次
マイボックスを使う手順
マイボックスは，投稿記事の編集画面で行います。
エディターの編集画面で，テキストを入力して選択します。(ここでは，「ここにテキストが入ります。」と入力しています。)
- タグ
- ボックスデザイン
- マイボックス
- ここからマイボックスのパターンを選択
上の画像のようなコードが表示されます。
プレビューで確認すると，下の画像のようなボックスになっています。
マイボックスのパターン
マイボックスのパターンは次のようになります。
- 基本
- しかく (枠のみ)
- まるみ
- 参考
- 関連
- メモ
- ポイント
- 注意ポイント
- はてな
- + ミニふきだし
基本
マイボックスの「基本」を選択すると下の画像のようになります。
しかく (枠のみ)
マイボックスの「しかく (枠のみ)」を選択すると下の画像のようになります。
まるみ
マイボックスの「まるみ」を選択すると下の画像のようになります。
参考
マイボックスの「参考」を選択すると下の画像のようになります。
関連
マイボックスの「関連」を選択すると下の画像のようになります。
メモ
マイボックスの「メモ」を選択すると下の画像のようになります。
ポイント
マイボックスの「ポイント」を選択すると下の画像のようになります。
注意ポイント
マイボックスの「注意ポイント」を選択すると下の画像のようになります。
はてな
マイボックスの「はてな」を選択すると下の画像のようになります。
+ ミニふきだし
マイボックスの「+ ミニふきだし」を選択すると下の画像のようになります。
マイボックスのカスタマイズ
マイボックスを選択すると下の画像ようにコードが表示されますので，そのコードを編集してカスタマイズができます。
ここでカスタマイズできる項目は次のようになります。
| title-"" | 見出し |
| fontawesome="" | アイコン |
| color="" | 見出しの色 |
| bordercolor="" | 枠線の色 |
| bgcolor="" | 背景色 |
| borderwidth="" | 枠線の太さ |
| borderradius="" | 枠線の丸み |
| titleweight="" | 見出しの太さ(アイコンによっては変更できない) |
| fontsize="" | 見出しの大きさ |
| margin="" | 余白(上下左右) |
ここでは，マイボックスの「基本」のカスタマイズを例に，解説していきます。
見出しの変更
見出しの変更ができます。
title=""の中にテキストを入力すると，そのテキストが見出しになります。
ここでは，「注目」と入力しています。
変更後のイメージは，下の画像のようになります。
アイコンの変更
アイコンの変更ができます。
Font Awesomeのアイコンが使用できます。
fontawesome=""の中にクリックした状態で，
- タグ
- ショートコード補助
- Webアイコン
- 任意のアイコンをクリック(ここでは，「ハート」)
変更後のイメージは，下の画像のようになります。
または，Font Awesomeのアイコンのページから気に入ったアイコンを使うことができます。
ここでは例として，「ハンバーガーメニュー」のアイコン「fa-bars」を使っています。
変更後のイメージは，下の画像のようになります。
見出しの色の変更
見出しの色の変更ができます。
color=""の中に，任意のカラーコードを入力します。
color=""の中をクリックした状態で，
- タグ
- ショートコード補助
- HTMLカラーコード
- 任意の色をクリック(ここでは青)
変更後のイメージは，下の画像のようになります。
枠の色の変更
枠(ボーダー)の色の変更ができます。
bordercolor=""の中に，任意のカラーコードを入力します。
HTMLカラーコードで選択するか，自分で指定することができます。
ここでは，「#000083」にしています。
変更後のイメージは，下の画像のようになります。
背景色の変更
背景色の変更ができます。
bgcolor=""の中に，こちらも同じようにカラーコードを指定します。
ここでは，「#ffeb01」にしています。
変更後のイメージは，下の画像のようになります。
枠の太さの変更
枠(ボーダー)の太さの変更ができます。
borderwidth=""の中の数字が大きいほど太くなります。
ここでは，「5」にしています。
変更後のイメージは，下の画像のようになります。
枠の丸みの変更
枠(ボーダー)の丸みの変更ができます。
boredrradius=""の中の数字が大きいほど丸みが増します。
ここでは，「15」にしています。
変更後のイメージは，下の画像のようになります。
文字のサイズの変更
文字のサイズの変更ができます。
fontsize=""の中の数字が大きいほど，サイズが大きくなります。
ここでは，「150」にしています。
変更後のイメージは，下の画像のようになります。
余白の変更
余白(マージン)の変更ができます。
margin=""の中に，任意の単位を入力します。
ここでは，「50px(上下左右50px)」にしています。
変更後のイメージは，下の画像のようになります。
まとめ
以上，「アフィンガー5でマイボックスの使い方・カスタマイズ方法」でした。
それではまた！
