AFFINGER5の【ボックスデザイン】を自分好みにカスタマイズ

AFFINGER5のボックスデザインのカスタマイズ方法を詳しく紹介していきます。

記事を参考にすれば、自分好みのオリジナルボックスが作れるようになること間違いなし！

また記事後半では、AFFINGER5大好きな僕がよく使用している「カスタマイズ済みのボックスデザイン」を用意しました。

コピペですぐに使えるので、気にいった人はぜひ使ってください。

 

こんな人のお役に立てる記事です。

AFFINGER5のボックスデザインのカスタマイズは超簡単

AFFINGER5のボックスデザインのカスタマイズは超簡単です。

ただし、それは正しい手順と方法を知っていればの話。

というわけで、こんな人でも確実に理解できるようわかりやすく解説していきますね。

 

まずは、早速実例から。

AFFINGER5デフォルトの状態のボックスをサクッとカスタマイズしてみました。

 

 

デフォルトの状態のボックスを、黒板風にカスタマイズしてみました。

こんな感じで、自分好みのデザインに自由自在に変更することが可能です。

 

ボックスデザインのカスタマイズ方法

ボックスを好みのデザインに変更するには、挿入されたショートコードを編集します。

文章で書くとすごく難しそうに聞こえますが、安心してください。

実際の作業は、すごく簡単です。

 

というわけで、早速実際の手順を紹介していきますね。

この順番で解説していきます。

ショートコードの役割【これを覚えておくと超役立つ】

まずはショートコードの解説から。

ショートコードとは、AFFINGER5でボックスを挿入した時に表示される文字列のことです。

ボックスデザインをカスタマイズするには、このショートコードを編集していきます。

 

何をどう変更するとどうなるのかがコチラ。

title	見出し	bgcolor	背景の色
fontawesome	アイコン	borderwidth	枠線の太さ
bordercolor	枠線の色	borderradius	枠線の丸み
color	見出しテキストの色	titleweight	見出しテキストの色

 

今回はボックスデザインのカスタマイズ方法についての紹介ですが、こちらのタグはAFFINGER5の記事装飾で頻繁に使われています。

ということは、これを覚えておけばボックス以外のカスタマイズにもすごく役立つということですね。

 

ショートコードの編集とその結果【参考サイトも紹介】

ここからは実践編です。

ショートコード内のタグの編集の仕方とその結果表示されるボックスデザインを紹介していきます。

こちらのボックスを参考に、以下の順番で解説していきますね。

 

 

title="見出し"

ボックスデザインにタイトルを表示します。

 

 

fontawesome="アイコン"

アイコンを表示・非表示にします。

 

 

タグ→ショートコード補助→WEBアイコン（クラス）

 

 

bordercolor="枠線の色"

ボックスの囲み枠の色を変更します。

 

 

タグ→ショートコード補助→HTMLカラーコード

 

 

color="見出しテキストの色"

見出しテキストの色を変更します。

 

 

bgcolor="背景の色"

ボックス内の背景色を変更します。

 

 

borderwidth="枠線の太さ"

ボックスを囲む枠の太さを変更します。

 

 

borderradius="枠線の丸み"

角のとれた丸みのあるデザインに変更します。

 

 

titleweight="見出しテキストの太さ"

デフォルトの状態では太字設定がされている見出しテキストを、細字に戻します。

 

 

最後にもう一度、ボックスデザインをカスタマイズするタグコード一覧を載せておきます。

title	見出し	bgcolor	背景の色
fontawesome	アイコン	borderwidth	枠線の太さ
bordercolor	枠線の色	borderradius	枠線の丸み
color	見出しテキストの色	titleweight	見出しテキストの色

コピペ使える！僕のお気に入りのボックスデザインを3つ紹介

ブログ歴3年、AFFINGER5歴1年の僕がカスタマイズして使っているボックスデザインを3つ紹介します。

 

 

オレンジ囲みボックス

 コピペ用
[st-mybox title="" fontawesome="" color="#757575" bordercolor="#FFD54F" bgcolor="#FFFDE7" borderwidth="2" borderradius="2" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]
サンプルテキスト
[/st-mybox]

 

オレンジ枠で囲ったシンプルなボックスです。

記事内で重要なポイント等をまとめたい時などに使用しています。

 

マイボックス

 コピペ用
[st-mybox title="ここにタイトル" fontawesome="fa-check-circle" color="#f44336" bordercolor="#8b4513" bgcolor="#FFFDE7" borderwidth="2" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]
サンプルテキスト
[/st-mybox]

 

淡い色合いの多いデフォルトの「マイボックス」を、文字色を赤、枠線の色を茶色にしてメリハリを強調しました。

専門用語の補足説明やちょっとしたメモを加えたいときに使用しています。

 

見出し付きフリーボックス（赤）

 html
[st-midasibox title="タイトル15文字以内" fontawesome="fa-check-circle" bordercolor="#ef5350" color="" bgcolor="#ffebee" borderwidth="" borderradius="" titleweight="bold"]
サンプルテキスト
[/st-midasibox]

 

見出し付きフリーボックスを赤を主体とした色に変更しました。

特に重要なポイントを説明するときや、注意点などを記す際に使用しています。

 

冒頭で使用した黒板デザインのショートコードも貼っておきます。

 コピペ用
[st-mybox title="" fontawesome="" color="#ffffff" bordercolor="#6D4C41" bgcolor="#2E7D32" borderwidth="5" borderradius="0" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]
サンプルテキスト　サンプルテキスト　サンプルテキスト
[/st-mybox]

 

 

 html
[st-midasibox title="ここにタイトル" fontawesome="fa fa-hand-o-right" bordercolor="#6D4C41" color="" bgcolor="#2E7D32" borderwidth="3" borderradius="" titleweight="bold"]
サンプルテキスト　サンプルテキスト　サンプルテキスト
[/st-midasibox]

 

テキストを選択→テキストを色を白に

 

まとめ：自分好みのボックスデザインで差を付けよう

AFFINGER5はブロガーやアフィリエイターに超人気のWordPress有料テーマです。

というわけで、けっこう他のブログとデザインが被りがち。

カスタマイズした自分だけのオリジナルボックスを使えば差別化ができますね。

 

ちなみに、毎回毎回ショートコードをその都度変更するのは大変。

プラグイン【AddQuicktag】（無料）を使えば、自分だけのオリジナルコードを保存、ボタン一つで簡単に呼び出せます。

AddQuicktagの使い方とコピペで使える５つの囲み枠

続きを見る

 

👉AFFINGER6の購入を検討している人におすすめの記事です。

AFFINGERの評判を使用歴3年の僕が解説【見本サイトも紹介】

続きを見る

 

👉AFFINGER5をもっと便利に使いたい人はこちらを参考にしてください。

 

AFFINGER利用者向けオリジナル特典の販売

＼ AFFINGER6にも対応済み ／

AFFINGERをすでに利用しているユーザー向けの「カスタマイズ＆役立つテクニック」集です。

目的に合わせて、以下の2つを用意しました。

 

 

特典詳細ページへ移動する