テンプレート

【コピペOK】AFFINGER4に導入したいオシャレ見出し8選

AFFINGER4
おおかみくん
おおかみくん
AFFINGER4の見出しって変えることはできるのか?
ひつじくん
ひつじくん
それはもちろんできるよ!いろいろデザインがあるから紹介してみるね。

AFFINGER4の見出しはデフォルトではかなり簡素なものになっています。カスタマイズ自分でしてくれ!と言わんばかりですね(笑)

AFFINGER4 見出しデフォルト
僕的には勝手にカスタマイズするのでこれで困ることはないのですが、アフィリ初心者でHTML/CSSを知らない人にとってはキツイですよね。そこで、AFFINGER4の見出しh2、h3のカスタマイズをまとめてみたいと思います。

↓ サイトデザインを思いのままに! ↓

JIN

h2の見出しカスタマイズ

シンプルな見出し

見出しは以外とシンプルなほうがいい場合が多いです。見出しに凝っていると個性が出ますけれど、個性を出しすぎると、どれが大見出しなのか小見出しなのかが分かりにくくなったりもします。

一般的に最も大見出しとして使われているのが以下のデザインなので、こちらを大見出しとして採用するのが無難です。僕はフラットなデザインが好きなのでこう言った見出しを採用しています。

もちろん背景の色などは変えることができますので、自分のサイトにあったものを採用するようにしてくださいね!

h2見出し

font awesomeでオシャレに!

font awesomeというフォントツールを使って見出しをオシャレにするものアリですね!

AFFINGER4にはfont awesomeが標準搭載されていますから、フォントコードを入力するだけで簡単にオシャレなフォントを出してくることができます。このフォントコードはfont awesomeから手に入れてくることができます。

h2見出し

影をつけて立体的に

少し立体感を出したいなら、影をつけると少し印象が変わります。サイトとの調和を意識しながら、影をつけるかどうかは決めるようにしてください。

見出しh2

少し凝ったデザイン

サイトのテーマカラー(赤・黒)の2種を盛り込んで見るというちょっと凝ったデザインにしてみました。

見出しh2

かなり凝ったデザイン

もはや遊んでます。スタイリッシュなブログとかだと、こんなデザインの見出しにしてもいいのかもしれませんけれど、、アフィリエイトサイトではこの形はよろしくないかもしれません(笑)

それでも採用するぜという勇者にはどうぞ。
h2見出し

h3の見出しカスタマイズ

シンプルな見出し【タイプ1】

シンプルに行くならこの見出しで十分です。

見出しはそんなにキラキラさせなくても、読者に大見出しなのか小見出しなのかさえ分かれば良いのですから。実際、僕も見出しをシンプルにしていますが、そんなに読みにくいとか違和感を感じることはないかと思います。

以下のコードを追加するだけで、このような見出しに変更することができますよ。pxをいじれば線の太さが変わり、色もカラーコードを使えば自在に変更できます。

見出しh3

シンプルな見出し【タイプ2】

見出しh3

font awesomeでアイコンを追加する

h2に続き、font awesomeでアイコンを追加するものも一応紹介しておきます。

シンプルさは減ってしまいますが、ちょっと遊び心がでて可愛くなるのがfont awesomeの良いところですね。こちらもフォントはfont awesomeから取ってくれば自由に変えることができますので、好みにカスタマイズしていってくださいませ!

h3小見出し

AFFINGER4の見出しカスタマイズまとめ

AFFINGER4

AFFINGER4の見出しのカスタマイズについてご紹介しました。僕はシンプルなデザインの方が好きなので、オシャレというよりはシンプル寄りな紹介だったかもしれません(笑)

でも読者にとってわかりやすい見出しである方が良いですし、あんまり凝った見出しはアフィリエイト的には良くないかなと個人的には思っています。なので、シンプルで格好いい見出しばかりを扱わせてもらいました。

もちろんこの見出しを参考に、どんどんカスタマイズをしてもらうと良いですよ。カスタマイズしやすいようにCSSに説明書きも加えていますので、それを参考にオリジナルな見出しを作ってみてください。

この記事が気に入ったら
いいね ! しよう

Twitter で