AFFINGER6「見出し付きフリーボックス」の作り方＆カスタマイズ設定方法。作例付き【ワードプレスブログ完全初心者ガイド】

専業ブロガー７年目のあかね猫です

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

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

まず、ACTION AFFINGER6における「見出し付きフリーボックス」というのは…

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

この「見出し付きフリーボックス」は…

だけでなく、もう１つの代表的なボックスデザインである「マイボックス」と同様に…

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

「マイボックス」と並んで、AFFINGER6のボックスデザインのなかで「最も重宝するボックス」の１つだと思うよ！

カスタマイズした「見出し付きフリーボックス」の例 ↓

「マイボックス」との組み合わせ例 ↓

そんな「見出し付きフリーボックス」について、３つのステップで丁寧に解説していきます

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

AFFINGER6「見出し付きフリーボックス」の作り方＆カスタマイズ設定方法。作例付き【ワードプレスブログ完全初心者ガイド】

ステップ１：ACTION AFFINGER6「見出し付きフリーボックス」の作り方

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

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

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

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

↑　ボックスデザイン　＞　見出し付きフリーボックス　の順に開きましょう

すると、そのなかに…

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

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

任意の見出し付きフリーボックスを選択すると…

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

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

このショートコードは、「上下」で１組だよ！

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

↑ このような見出し付きフリーボックスができました

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

↑ このような見出し付きフリーボックスが作られます

そしてもう１点、上記の手順でテンプレートを選ぶ際に…

↑ こちらの　（タイトル幅100％）　と表示されている種類のなかから選択してみると…

↑ このように、【タイトル幅が両端まで広がったタイプ】の見出し付きフリーボックスが作成できます

タイトルっていうのは、上の画像例だと「はてな」って書かれてる場所のこと！

ということで！

ここまでは見出し付きフリーボックスの【テンプレートをそのまま使用する手順】をご紹介しましたが、このボックスデザインの「最大の長所」はなんといっても…

という点なんですね🐥

次のステップ２で、具体的なやり方を見ていこう！

ステップ２：ACTION AFFINGER6「見出し付きフリーボックス」のカスタマイズ方法

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

という基本手順で…

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

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

左から順に見ていくよ！

title=""

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

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

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

webicon=""

つづいて…

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

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

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

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

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

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

bordercolor=""

お次は…

ですが、こちらでボックスの「枠線色」を指定することができます

具体的には…

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

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

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

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

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

ちなみに！

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

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

color=""

ボックスの「タイトル名」と「アイコン」の色を、カラーコードで指定できます（例　color="#523634"　）

やり方は　bordercolor=""　と同じ！

bgcolor=""

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

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

borderwidth=""

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

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

borderradius=""

ボックスの「四隅」のうち…

の「丸み」を、数字で指定できます（例　borderradius="5"　）

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

ちなみに「左上」の丸みは、「直角」で固定です

titleweight=""

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

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

myclass=""

こちらは基本的に、デフォルトの空欄のままでOKです

ステップ３：ACTION AFFINGER6「見出し付きフリーボックス」のカスタマイズ例

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

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

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

ということで！

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

カスタマイズ例１ ↓

カスタマイズ例２ ↓

ちなみに！

ちょっとした応用技として、今回の「見出し付きフリーボックス」のなかに…

↑ このように「マイボックス」用のショートコードを含めることで…

↑ このような「複合型」のボックスを作ることもできます🐥