The Master of Swift App Coding

Swiftプログラミングでのアプリ作成方法やWordPressのテクニック解説

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

投稿日:2018年8月15日 更新日:

AFFINGERの見出しボックスのいい感じの配色のやつない?
5秒で選んでコピペして時短できる?
こんな疑問に答えていきます。
別ブログで月に2万PVを超える僕が解説していきます。

はじめに

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

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

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

 

注意事項

(1)冒頭の「消す」の2文字だけ消してください。

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

(2)ショートコード直後も改行しない

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

(3)内部で改行するときは、Shift押し改行がベター

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

(4)アイコンは変更すると効果的

アイコンは「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]

 

Ad-336px-stinger8

Ad-336px-stinger8

-WordPress, デザインテンプレート

Copyright© The Master of Swift App Coding , 2018 All Rights Reserved.