【AFFINGER】見出しボックスの配色サンプル一覧【コピペで時短】

AFFINGERの見出しボックスのいい感じの配色のやつない？
５秒で選んでコピペして時短できる？
こんな疑問に答えていきます。

人気ブログスタイル、AFFINGERの見出しボックスの配色サンプル一覧を貼ります。

僕が好きな色で作りました。
よく自分で使っています。

コピペで時短しましょう。

僕はWordPressのブログでは月２万PV、自作のiPhoneアプリを２つリリースしています。
そんな僕が解説していきます。

注意事項

（１）冒頭の「消す」の２文字だけ消してください。

消すっていう部分を取ると、コードとして認識されるようになります。

（２）ショートコード直後も改行しない

改行すると無駄なスペースが空いてしまいます。

（３）内部で改行するときは、Shift押し改行がベター

内部で改行すると、文字の大きさが変わってしまうことがたまにあります。

（４）アイコンは変更すると効果的

アイコンは「fa-」から始まる部分を、変えると変更できます。

fontawesome
https://fontawesome.com/icons?from=io

※ノーマル設定だと、見出しボックス内の文字の大きさは少し小さくなるようです。

見出しボックスの配色サンプル一覧

１

[消すst-midasibox title="このカテゴリーの人気記事" fontawesome="fa-folder-open" bordercolor="#005B78" color="#ffffff" bgcolor="#E5FAEB" borderwidth="" borderradius="" titleweight="bold”]緑色の見出しボックスです。アイコンの部分は自由に変えて使ってくださいね。
見出しボックスは、このように複数行の重要な文章、まとめ的な格言を書くのに便利です。
カテゴリーの人気記事を入れる時にも使えますね。[/st-midasibox]

２

[消すst-midasibox title="このカテゴリーの人気記事" fontawesome="fa-calculator" bordercolor="#1D0077" color="#ffffff" bgcolor="#E5EDFA" borderwidth="" borderradius="" titleweight="bold”]濃い青色の見出しボックスです。アイコンの部分は自由に変えて使ってくださいね。
見出しボックスは、このように複数行の重要な文章、まとめ的な格言を書くのに便利です。
カテゴリーの人気記事を入れる時にも使えますね。[/st-midasibox]

３

[消すst-midasibox title="このカテゴリーの人気記事" fontawesome="fa-bicycle" bordercolor="#440077" color="#ffffff" bgcolor="#E7E5FB" borderwidth="" borderradius="" titleweight="bold”]グレープ色の見出しボックスです。アイコンの部分は自由に変えて使ってくださいね。
見出しボックスは、このように複数行の重要な文章、まとめ的な格言を書くのに便利です。
カテゴリーの人気記事を入れる時にも使えますね。[/st-midasibox]

４

[消すst-midasibox title="このカテゴリーの人気記事" fontawesome="fa-thumbs-up" bordercolor="#790067" color="#ffffff" bgcolor="#EDE5FA" borderwidth="" borderradius="" titleweight="bold”]すみれ色の見出しボックスです。アイコンの部分は自由に変えて使ってくださいね。
見出しボックスは、このように複数行の重要な文章、まとめ的な格言を書くのに便利です。
カテゴリーの人気記事を入れる時にも使えますね。[/st-midasibox]

５

[消すst-midasibox title="このカテゴリーの人気記事" fontawesome="fa-coffee" bordercolor="#78002D" color="#ffffff" bgcolor="#F4E5FA" borderwidth="" borderradius="" titleweight="bold”]ピンク色の見出しボックスです。アイコンの部分は自由に変えて使ってくださいね。
見出しボックスは、このように複数行の重要な文章、まとめ的な格言を書くのに便利です。
カテゴリーの人気記事を入れる時にも使えますね。[/st-midasibox]

６

[消すst-midasibox title="このカテゴリーの人気記事" fontawesome="fa-heart" bordercolor="#780500" color="#ffffff" bgcolor="#FAE5F6" borderwidth="" borderradius="" titleweight="bold”]赤色の見出しボックスです。アイコンの部分は自由に変えて使ってくださいね。
見出しボックスは、このように複数行の重要な文章、まとめ的な格言を書くのに便利です。
カテゴリーの人気記事を入れる時にも使えますね。[/st-midasibox]

７

[消すst-midasibox title="このカテゴリーの人気記事" fontawesome="fa-key" bordercolor="#771C01" color="#ffffff" bgcolor="#FAE5EC" borderwidth="" borderradius="" titleweight="bold”]オレンジ色の見出しボックスです。アイコンの部分は自由に変えて使ってくださいね。
見出しボックスは、このように複数行の重要な文章、まとめ的な格言を書くのに便利です。
カテゴリーの人気記事を入れる時にも使えますね。[/st-midasibox]

８

[消すst-midasibox title="このカテゴリーの人気記事" fontawesome="fa-link" bordercolor="#784301" color="#ffffff" bgcolor="#FBE9E5" borderwidth="" borderradius="" titleweight="bold”]みかん色の見出しボックスです。アイコンの部分は自由に変えて使ってくださいね。
見出しボックスは、このように複数行の重要な文章、まとめ的な格言を書くのに便利です。
カテゴリーの人気記事を入れる時にも使えますね。[/st-midasibox]

９

[消すst-midasibox title="このカテゴリーの人気記事" fontawesome="fa-phone" bordercolor="#786000" color="#ffffff" bgcolor="#FAF0E6" borderwidth="" borderradius="" titleweight="bold”]からし色の見出しボックスです。アイコンの部分は自由に変えて使ってくださいね。
見出しボックスは、このように複数行の重要な文章、まとめ的な格言を書くのに便利です。
カテゴリーの人気記事を入れる時にも使えますね。[/st-midasibox]

１０

[消すst-midasibox title="このカテゴリーの人気記事" fontawesome="fa-map" bordercolor="#787200" color="#ffffff" bgcolor="#F9F3E5" borderwidth="" borderradius="" titleweight="bold”]メロンパン色の見出しボックスです。アイコンの部分は自由に変えて使ってくださいね。
見出しボックスは、このように複数行の重要な文章、まとめ的な格言を書くのに便利です。
カテゴリーの人気記事を入れる時にも使えますね。[/st-midasibox]

１１

[消すst-midasibox title="このカテゴリーの人気記事" fontawesome="fa-music" bordercolor="#567800" color="#ffffff" bgcolor="#F9F6E5" borderwidth="" borderradius="" titleweight=“bold"]黄緑色の見出しボックスです。アイコンの部分は自由に変えて使ってくださいね。
見出しボックスは、このように複数行の重要な文章、まとめ的な格言を書くのに便利です。
カテゴリーの人気記事を入れる時にも使えますね。[/st-midasibox]

１２

[消すst-midasibox title="このカテゴリーの人気記事" fontawesome="fa-plane" bordercolor="#097800" color="#ffffff" bgcolor="#F7FAE5" borderwidth="" borderradius="" titleweight="bold”]芝生色の見出しボックスです。アイコンの部分は自由に変えて使ってくださいね。
見出しボックスは、このように複数行の重要な文章、まとめ的な格言を書くのに便利です。
カテゴリーの人気記事を入れる時にも使えますね。[/st-midasibox]

というわけで今回は以上です。