あずきです🐥
当ブログでも愛用中の人気WordPressテーマ「ACTION AFFINGER6」における…
「マイボックス」の作り方とカスタマイズ方法・カスタマイズ例
について、ブログ初心者さん向けに１からわかりやすく解説していきます
まずACTION AFFINGER6における「マイボックス」というのは、実際の画面上で見ると…
↑ こういったものになります
この「マイボックス」というボックスデザインは…
- クリック１つで呼び出し可能な「テンプレート」が、【基本・関連・ポイント・注意ポイント】など、実用的なデザインパターンで多数用意されている！
だけでなく…
- それらのテンプレートをもとに、【タイトル・アイコン・背景・枠線】の色やデザインなど、ボックス１つ１つ自由に「カスタマイズ」できる！
という ”二段構え” の仕様になっています
カスタマイズした「マイボックス」の例 ↓
そんなACTION AFFINGER6における「マイボックス」について、３つのステップで丁寧に解説していきます
- 「マイボックス」の作り方
- 「マイボックス」のカスタマイズ方法
- 「マイボックス」のカスタマイズ例
さっそく見ていきましょー🐥
2020年1月から毎日コツコツ作ってきたワードプレス初心者ガイド、
・役に立ちました！
・わかりやすかったです！みたいな大変ありがたいお言葉を頂けるケースが最近増えてきたので、改めて載せておきますhttps://t.co/QJohn2MGlF
— あずき@ブロガー (@azuki_rinrin) July 13, 2020
AFFINGER6「マイボックス」の作り方とカスタマイズ方法・カスタマイズ例を初心者向けに解説【ACTION／WordPressブログ】
補足
ご紹介する内容は、いずれも「クラシックエディタ」の前提となります。「グーテンベルグ」をお使いの方はご了承ください
「そもそもクラシックエディタとグーテンベルグってなに…？」という場合はこちらをどうぞ ↓（重要です）
-
【2021年】WordPressのクラシックエディタとグーテンベルグとは？プラグイン「Classic Editor」の導入方法まで1から解説
続きを見る
ステップ１：ACTION AFFINGER6「マイボックス」の作り方
WordPress管理画面から「投稿」もしくは「固定ページ」の編集画面を開いたら、まずは「マイボックス」を挿入したい箇所に…
↑ カーソル（ | ）を設置した状態で、画面上部の「タグ」をクリックします
関連
「ビジュアルとテキストってなに…？」という場合は、こちらをどうぞ ↓
-
【2021年】WordPress「ビジュアル・テキスト」エディタの違いとは？使い分けの実践的なポイントを初心者向けに解説【クラシックエディタの記事作り】
続きを見る
「タグ」を開いたら、そのなかから…
↑ ボックスデザイン ＞ マイボックス の順に開きましょう
すると、そのなかに…
↑ あらかじめ用意されているマイボックスの「テンプレート」が一覧表示されるので、このなかから任意のマイボックスを選択します
任意のマイボックスを選択すると…
↑ 専用の「ショートコード」が本文欄に貼り付けられるので、このなかに…
↑ 任意のテキストを入力すればOKです
プレビュー画面で確認してみると…
↑ このようなマイボックスができました
ちなみに上記の例では「ポイント」というテンプレートを選びましたが、ほかにも例えば「注意ポイント」というテンプレートを選択してみると…
↑ このようなマイボックスが作成されます
ということで！
ここまではマイボックスの【テンプレートをそのまま使用する手順】になりますが、このボックスデザインの「最大の長所」はなんといっても…
- 【タイトル・アイコン・背景・枠線】の色やデザインなど、ボックス１つ１つ自由に「カスタマイズ」できる！
という点なんですね
ステップ２：ACTION AFFINGER6「マイボックス」のカスタマイズ方法
まずは【ステップ１】でご紹介した…
タグ ＞ ボックスデザイン ＞ マイボックス
という基本手順で…
マイボックスのテンプレート
を１つ（どれでもOK！）選んだら、貼り付けられたショートコード（上下１組）のうち…
↑ こちらの「上」側にあたるコードを、任意の内容にカスタマイズしていきます（編集エディタは、引き続き「ビジュアル」のままで大丈夫です）
title=""
まず、ショートコードの１番先頭に表示されている…
title=""
ですが、こちらでボックス左上に表示される「タイトル名」を指定することができます
具体的には、 title="●●●●●" の ●●●●● にあたる部分に、任意のワードを手入力で打ち込むだけ（例 title="ここがポイント！" ）
webicon=""
つづいて…
webicon=""
ですが、こちらはタイトル名の左側に表示される「アイコン」を指定することができます
具体的には、画面上部の タグ ＞ ショートコード補助 を開いたなかにある…
Webアイコン（クラス）
というところを開くと、「Webアイコン」のバリエーションが一覧表示されるので、そのなかから任意のWebアイコンを選択しましょう（例：電球）
使用したいWebアイコンを選択すると…
そのアイコン専用のコード（例 st-svg-lightbulb-o ）
が本文欄に貼り付けられるので、このコードを webicon="●●●●●" の ●●●●● にあたる部分へ貼り付ければOKです（例 webicon="st-svg-lightbulb-o" ）
color=""
お次は…
color=""
ですが、こちらで「タイトル名」と「アイコン」の色を指定することができます
具体的には…
# ＋ ●●●●●●
という形で、任意の「カラーコード」を入力します（例 color="#523634" ）
このカラーコードについては、 タグ ＞ ショートコード補助 を開いたなかから…
HTMLカラーコード
というタブを開くと、「主要な色」のバリエーションが一覧表示されているので、そのなかから任意の色をまず選択しましょう
選択すると、その色のカラーコード（例：#523634）が本文欄に貼り付けられるので、このコードを color="#●●●●●●" の #●●●●●● にあたる部分に貼り付けるだけ
ちなみに！
「もっと色んなカラーを使いたい！」という場合は、「WEB色見本 原色大辞典」様を始めとした各種「色見本サイト」でカラーコードを確認できます
ということで、そのほかのカスタマイズ項目については下記の通りです🐣
bordercolor=""
bordercolor=""
ボックスの「枠線色」を、カラーコードで指定できます（例 bordercolor="#523634" ）
bgcolor=""
bgcolor=""
ボックスの「網掛け（背景）色」を、カラーコードで指定することができます（例 bgcolor="#fffde8" ）
borderwidth=""
borderwidth=""
ボックスの「枠線の太さ」を、「px」というサイズ単位で指定することができます（例 borderwidth="2" ）
borderradius=""
borderradius=""
ボックスの「四隅の丸み」を、数字で指定できます（例 borderradius="5" ）
titleweight=""
titleweight=""
タイトル名の「フォントの太さ」を、 空欄（通常） もしくは bold（太字） で指定できます（例 titleweight="bold" ）
fontsize=""
fontsize=""
タイトル名の「フォントサイズ」を、「%」の比率で指定することができます（例 fontsize="95" ）
myclass=""
myclass="st-mybox-class"
こちらは基本的に、デフォルトの st-mybox-class のままでOKです
margin=""
margin=""
ボックスの外側に作られる「上下左右の余白」を指定できます
具体的には…
上 右 下 左
という「時計回り」の順番で、４方向それぞれの余白サイズを「px」というサイズ単位で入力すればOKです（数値は「1」刻みで指定できます）
例えば！
margin="25px 0 25px 0"
とした場合、ボックスの外側に 上：25px 右：0 下：25px 左：0 という余白がそれぞれ作られます（0の場合、「px」という単位は入力不要です）
ステップ３：ACTION AFFINGER6「マイボックス」のカスタマイズ例
ボックスのカスタマイズって、経験上「よく使う組み合わせ」は自然と決まってくるため…
- カスタマイズ済みのショートコードは、Excelなどに丸々貼り付けておく！
- 実際にマイボックスを使うときには、Excelからコピペで貼り付けるだけ！
といった形にしておくと、記事作成の効率がぐんと上がります
ということで！
ここまでご紹介した「ショートコード」のカスタマイズ項目をふまえて、サンプルを２つほど作ってみました🐣
カスタマイズ例１ ↓
- title="ここがポイント！"
- webicon="st-svg-lightbulb-o"
- color="#523634"
- bordercolor="#523634"
- bgcolor="#ffffff"
- borderwidth="2"
- borderradius="5"
- titleweight="bold"
- fontsize="100"
- myclass="st-mybox-class"
- margin="20px 0 20px 0"
カスタマイズ例２ ↓
- title=""
- webicon=""
- color="" ※タイトルとアイコンを入れていないので、ここは空欄でOK！
- bordercolor="#003366"
- bgcolor="#f4fbff"
- borderwidth="1"
- borderradius="1"
- titleweight="" ※タイトルを入れていないので、ここは空欄でOK！
- fontsize="" ※同上！
- myclass="st-mybox-class"
- margin="20px 10px 20px 10px"
上記２パターンのカスタマイズ例を見てもわかる通り、マイボックス内に入れるテキスト（例 このマイボックスはサンプルです。 ）については…
- 箇条書きリスト
- 左寄せ・中央揃え・右寄せ
- フォントサイズ変更
- フォントカラー変更
といった「各種アレンジ」も、通常のテキストと同様に行うことができます🐥
▼ ACTION AFFINGER6における「箇条書きリスト」の作り方についてはこちら ▼
-
AFFINGER6「箇条書きリスト」の作り方と、色＆デザイン設定のカスタマイズ方法を初心者向けに解説【ACTION／WordPressブログ】
続きを見る
▼ テキストの各種アレンジに必須な「Advanced Editor Tools」についてはこちら ▼
-
【2021年】Advanced Editor Tools（旧：TinyMCE Advanced）の設定方法を初心者向けに解説【WordPressプラグイン／クラシックエディタ版】
続きを見る
あわせてどうぞ
今回の記事はこちらの章に属しています
次の章はこちらからどうぞ
全９章のTOPページです
2020年1月から毎日コツコツ作ってきたワードプレス初心者ガイド、
・役に立ちました！
・わかりやすかったです！みたいな大変ありがたいお言葉を頂けるケースが最近増えてきたので、改めて載せておきますhttps://t.co/QJohn2MGlF
— あずき@ブロガー (@azuki_rinrin) July 13, 2020