AFFINGER6「マイボックス」の作り方＆カスタマイズ設定方法。作例付き【ワードプレスブログ「完全初心者」ガイド／第７章／No.11】

専業ブロガー５年目のあずきです🐥

当ブログでも愛用中の人気WordPressテーマ「ACTION AFFINGER6」における…

について、「作例付き」でブログ初心者さん向けに１から解説していきます

まずACTION AFFINGER6における「マイボックス」というのは、実際の画面上で見ると…

↑ こういったものになります

この「マイボックス」というボックスデザインは…

だけでなく…

という ”二段構え” の仕様になっています

AFFINGER6で使える色んなボックスデザインのなかでも、「最強に活躍するボックス」の１つだと思うよ！

カスタマイズした「マイボックス」の例 ↓

そんなACTION AFFINGER6における「マイボックス」について、３つのステップで丁寧に解説していきます

ということで、さっそく見ていこー！

AFFINGER6「マイボックス」の作り方＆カスタマイズ設定方法。作例付き【ワードプレスブログ「完全初心者」ガイド／第７章／No.11】

ステップ１：ACTION AFFINGER6「マイボックス」の作り方

WordPress管理画面から「投稿」もしくは「固定ページ」の編集画面を開いたら、まずは「マイボックス」を挿入したい箇所に…

↑ カーソル（ | ）を設置した状態で、画面上部の「タグ」をクリックします

編集エディタは、「テキスト」じゃなく「ビジュアル」のままでOK！

「タグ」を開いたら、そのなかから…

↑　ボックスデザイン　＞　マイボックス　の順に開きましょう

すると、そのなかに…

↑ あらかじめ用意されているマイボックスの「テンプレート」が一覧表示されるので、このなかから任意のマイボックスを選択します

ここでは例として、「ポイント」っていうテンプレートを選んでみるよ！

任意のマイボックスを選択すると…

↑ 専用の「ショートコード」が本文欄に貼り付けられるので、このなかに…

↑ 任意のテキストを入力すればOKです

このショートコードは、「上下」で１組だよ！（そのなかにテキストを入れる形！）

プレビュー画面で確認してみると…

↑ このようなマイボックスができました

ちなみに上記の例では「ポイント」というテンプレートを選びましたが、ほかにも例えば「注意ポイント」というテンプレートを選択してみると…

↑ このようなマイボックスが作成されます

ということで！

ここまではマイボックスの【テンプレートをそのまま使用する手順】になりますが、このボックスデザインの「最大の長所」はなんといっても…

という点なんですね

次の【ステップ２】で、具体的なカスタマイズ方法を見ていくよ！

ステップ２：ACTION AFFINGER6「マイボックス」のカスタマイズ方法

まずは【ステップ１】でご紹介した…

という基本手順で…

を１つ（どれでもOK！）選んだら、貼り付けられたショートコード（上下１組）のうち…

↑ こちらの「上」側にあたるコードを、任意の内容にカスタマイズしていきます（編集エディタは、引き続き「ビジュアル」のままで大丈夫です）

左から順に見ていくよ！

title=""

まず、ショートコードの一番先頭に表示されている…

ですが、こちらでボックス左上に表示される「タイトル名」を指定することができます

具体的には、　title="●●●●●"　の　●●●●●　にあたる部分に、任意のワードを手入力で打ち込むだけ（例　title="ここがポイント！"　）

タイトルがいらない場合は「空欄」にしておけばOK！

webicon=""

つづいて…

ですが、こちらはタイトル名の左側に表示される「アイコン」を指定することができます

具体的には、画面上部の　タグ　＞　ショートコード補助　を開いたなかにある…

というところを開くと、「Webアイコン」のバリエーションが一覧表示されるので、そのなかから任意のWebアイコンを選択しましょう（例：電球）

使用したいWebアイコンを選択すると…

が本文欄に貼り付けられるので、このコードを　webicon="●●●●●"　の　●●●●●　にあたる部分へ貼り付ければOKです（例　webicon="st-svg-lightbulb-o"　）

アイコンをつけたくない場合は、同じく「空欄」にしておけばOKだよ！

color=""

お次は…

ですが、こちらで「タイトル名」と「アイコン」の色を指定することができます

具体的には…

という形で、任意の「カラーコード」を入力します（例　color="#523634"　）

タイトルとアイコンを入れてない場合、この項目は空欄のままでOK！

このカラーコードについては、　タグ　＞　ショートコード補助　を開いたなかから…

というタブを開くと、「主要な色」のバリエーションが一覧表示されているので、そのなかから任意の色をまず選択しましょう

選択すると、その色のカラーコード（例：#523634）が本文欄に貼り付けられるので、このコードを　color="#●●●●●●"　の　#●●●●●●　にあたる部分に貼り付けるだけ

カラーコードは、先頭に必ず　#　が入るよ！

ちなみに！

「もっと色んなカラーを使いたい！」という場合は、「WEB色見本 原色大辞典」様を始めとした各種「色見本サイト」でカラーコードを確認できます

ということで、そのほかのカスタマイズ項目については下記の通りです🐣

bordercolor=""

ボックスの「枠線色」を、カラーコードで指定できます（例　bordercolor="#523634"　）

やり方は、　color=""　と同じ！

bgcolor=""

ボックスの「網掛け（背景）色」を、カラーコードで指定することができます（例　bgcolor="#fffde8"　）

これも、　color=""　とやり方は同じだよ！

borderwidth=""

ボックスの「枠線の太さ」を、「px」というサイズ単位で指定することができます（例　borderwidth="2"　）

「1」刻みで指定できて、数字が大きいほど「太く」なる形！

borderradius=""

ボックスの「四隅の丸み」を、数字で指定できます（例　borderradius="5"　）

同じく「1」刻みで指定できて、数字が大きいほど「丸く」なる形！

titleweight=""

タイトル名の「フォントの太さ」を、　空欄（通常）　もしくは　bold（太字）　で指定できます（例　titleweight="bold"　）

太字にしたい場合だけ、　bold　と入力すればOK！

fontsize=""

タイトル名の「フォントサイズ」を、「%」の比率で指定することができます（例　fontsize="95"　）

これも「1」刻みで指定できるよ！

myclass=""

こちらは基本的に、デフォルトの　st-mybox-class　のままでOKです

margin=""

ボックスの外側に作られる「上下左右の余白」を指定できます

具体的には…

という「時計回り」の順番で、４方向それぞれの余白サイズを「px」というサイズ単位で入力すればOKです（数値は「1」刻みで指定できます）

例えば！

とした場合、ボックスの外側に　上：25px　右：0　下：25px　左：0　という余白がそれぞれ作られます（0の場合、「px」という単位は入力不要です）

４つの数字の間には「半角スペース」が入るので注意しよう！

ステップ３：ACTION AFFINGER6「マイボックス」のカスタマイズ例

ボックスのカスタマイズって、経験上「よく使う組み合わせ」は自然と決まってくるため…

といった形にしておくと、記事作成の効率がぐんと上がります

自分はいつもExcelから貼り付けてるよ！

ということで！

ここまでご紹介した「ショートコード」のカスタマイズ項目をふまえて、サンプルを２つほど作ってみました🐣

カスタマイズ例１ ↓

カスタマイズ例２ ↓

上記２パターンのカスタマイズ例を見てもわかる通り、マイボックス内に入れるテキスト（例　このマイボックスはサンプルです。　）については…

といった「各種アレンジ」も、通常のテキストと同様に行うことができます🐥

あずきのワードプレスブログ「完全初心者」ガイド