AFFINGER

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

ボックスをカスタマイズ

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

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

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

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

 

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

小豆
AFFINGER5は、ボタン一つで色々なデザインのボックスを使えるから便利だなぁ。
でも、ボックス内の背景色や線の色などをもっと自分好みに変更したい。
カスタイズ方法やその際に参考になるサイトを教えて。

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

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

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

小豆
AFFINGER5を使うのは、今日が初めて。

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

 

まずは、早速実例から。

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

デフォルトの状態

サンプルテキスト サンプルテキスト サンプルテキスト

カスタマイズした状態

サンプルテキスト サンプルテキスト サンプルテキスト

 

デフォルトの状態

ここにタイトル

サンプルテキスト サンプルテキスト サンプルテキスト

カスタマイズした状態

ここにタイトル

サンプルテキスト サンプルテキスト サンプルテキスト

 

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

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

 

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

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

小豆
ショートコード?編集??

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

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

 

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

  1. ショートコードの役割
  2. ショートコードの編集方法とその結果

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

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

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

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

ボックスを挿入

ボックスショートコード

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

 

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

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

[/st-midasibox]

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

 

大福
こちらのタグは覚えておくとすごく便利。

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

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

 

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

ここからは実践編です。

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

デフォルトの状態

見出し(全角15文字)

サンプルテキスト サンプルテキスト サンプルテキスト

ボックスの呼び出し方

タグボックスデザイン見出し付きフリーボックス基本

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

 

【ボックスデザイン】ショートコードタグ

  1. title="見出し"
  2. fontawesome="アイコン"
  3. bordercolor="枠線の色"
  4. color="見出しテキストの色"
  5. bgcolor="背景の色"
  6. borderwidth="枠線の太さ"
  7. borderradius="枠線の丸み"
  8. titleweight="見出しテキストの太さ"

 

title="見出し"

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

ここにタイトルを入力

サンプルテキスト サンプルテキスト サンプルテキスト

編集後のショートコード

[st-midasibox title="ここにタイトルを入力" fontawesome="" bordercolor="" color="" bgcolor="" borderwidth="" borderradius="" titleweight="bold"]

サンプルテキスト サンプルテキスト サンプルテキスト

[/st-midasibox]

 

見出しタイトルは全角15文字以下で入力します。
15文字をオーバーすると表示が崩れます。

 

fontawesome="アイコン"

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

ここにタイトルを入力

サンプルテキスト サンプルテキスト サンプルテキスト

編集後のショートコード

[st-midasibox title="ここにタイトルを入力" fontawesome="st-svg-bigginer_l" bordercolor="" color="" bgcolor="" borderwidth="" borderradius="" titleweight="bold"]

サンプルテキスト サンプルテキスト サンプルテキスト

[/st-midasibox]

 

fontawesome="" に値を何も入力しなければ、アイコンは非表示になります。

アイコンタグは2つの方法で呼び出すことができます。

 

  • ①AFFINGER5の機能から呼び出す

アイコンを呼び脱し

タグショートコード補助WEBアイコン(クラス)

 

  • ②専用サイトから呼び出す

アイコン

 

bordercolor="枠線の色"

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

ここにタイトルを入力

サンプルテキスト サンプルテキスト サンプルテキスト

編集後のショートコード

[st-midasibox title="ここにタイトルを入力" fontawesome="" bordercolor="#212121" color="" bgcolor="" borderwidth="" borderradius="" titleweight="bold"]

サンプルテキスト サンプルテキスト サンプルテキスト

[/st-midasibox]

 

カラーコードは2つの方法で呼び出すことができます。

 

  • ①AFFINGER5の機能から呼び出す

カラーコードの呼び出し

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

 

  • ②専用サイトからコピペする

カラーコード表

 

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

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

ここにタイトルを入力

サンプルテキスト サンプルテキスト サンプルテキスト

編集後のショートコード

[st-midasibox title="ここにタイトルを入力" fontawesome="" bordercolor="" color="#f44336" bgcolor="" borderwidth="" borderradius="" titleweight="bold"]

サンプルテキスト サンプルテキスト サンプルテキスト

[/st-midasibox]

 

見出しテキストに使用するカラーコードも、【bordercolor="枠線の色"】同様に呼び出します。

 

bgcolor="背景の色"

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

ここにタイトルを入力

サンプルテキスト サンプルテキスト サンプルテキスト

編集後のショートコード

[st-midasibox title="ここにタイトルを入力" fontawesome="" bordercolor="" color="" bgcolor="#ffebee" borderwidth="" borderradius="" titleweight="bold"]

サンプルテキスト サンプルテキスト サンプルテキスト

[/st-midasibox]

 

背景に使用するカラーコードも、【bordercolor="枠線の色"】同様に呼び出します。

 

borderwidth="枠線の太さ"

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

ここにタイトルを入力

サンプルテキスト サンプルテキスト サンプルテキスト

編集後のショートコード

[st-midasibox title="ここにタイトルを入力" fontawesome="" bordercolor="" color="" bgcolor="" borderwidth="5" borderradius="" titleweight="bold"]

サンプルテキスト サンプルテキスト サンプルテキスト

[/st-midasibox]

 

【borderwidth=""】には、直接数字を入力します。

大きな数値を入力すればするほど、枠線が太くなります。

 

borderradius="枠線の丸み"

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

ここにタイトルを入力

サンプルテキスト サンプルテキスト サンプルテキスト

編集後のショートコード

[st-midasibox title="ここにタイトルを入力" fontawesome="" bordercolor="" color="" bgcolor="" borderwidth="" borderradius="20" titleweight="bold"]

サンプルテキスト サンプルテキスト サンプルテキスト

[/st-midasibox]

 

【borderradius=""】には、直接数字を入力します。

大きな数値を入力すればするほど、枠線が丸みを帯びます。

 

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

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

ここにタイトルを入力

サンプルテキスト サンプルテキスト サンプルテキスト

編集後のショートコード

[st-midasibox title="ここにタイトルを入力" fontawesome="" bordercolor="" color="" bgcolor="" borderwidth="" borderradius="" titleweight="bold"]

サンプルテキスト サンプルテキスト サンプルテキスト

[/st-midasibox]

 

デフォルトの状態では、見出しテキストを太字にするタグ「bold」が入力されています。

見出しを太字にしたくない場合は、「bold」を削除します。

【太字】titleweight="bold"  【細字】titleweight=""

 

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

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

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

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

 

お気に入りボックスデザイン

  1. オレンジ囲みボックス
  2. マイボックス
  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]

 

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

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

 

見出し付きフリーボックス(赤)

タイトル15文字以内

サンプルテキスト

 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使い方TOP画像
AddQuicktagの使い方とコピペで使える5つの囲み枠

続きを見る

 

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

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

続きを見る

 

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

こちらの記事もよく読まれています

  • この記事を書いた人
大福

大福

人間関係に嫌気がさして10年間務めた会社を退職。その後3年間のニート生活を送る。自宅にいながらパソコン1台で稼げることを知り、現在はストレスフリーな毎日を送っています。このサイトではブログやアフィリエイトで稼ぐ方法を発信しています。自宅にいながら稼げるって素晴らしい♪

-AFFINGER

© 2020 大福日記