ブログの見出しをお洒落にするCSSデザイン13選

ブログを魅力的にするためにデザインはとっても大切。

本稿ではブログの見出し(h2タグ)を魅力的にするサンプルデザインを幾つか紹介。

ちなみにどんなテーマでもデフォルトの見出しスタイルが設定されているため、当ブログでは以下のように一旦無効化して、新スタイルを上書きするように対応している↓↓↓

基本コピペOKだけど、デフォルトデザインが邪魔して綺麗に表示されない時は、上の例のように無効化、もしくはコメント化など対応が必要。

スポンサーリンク

上下ボーダーのシンプルデザイン

株式会社LIGなど色んなブログで見受けられるシンプルな見出し。

borderプロパティで太さや色を指定している↓↓↓

topとbottomのどちらか一方だけ指定すれば、上線だけ・下線だけのスタイルにも変更可能。

上下に2重ボーダーを引くデザイン

ボーダースタイルの値をsolidからdoubleに変更。

topとbottomのどちらか一方だけ指定すれば、上線だけ・下線だけのスタイルにも変更可能。

上下に点線表示させるデザイン

ボーダースタイルの値をsolidからdashedに変更。

dasheddottedに変更すれば点線で表示される。

下線にちょっと工夫したデザイン

こちらも色んなブログで見受けられるが、h2でなはくh3で利用する人もいる。

サンプルでは紺色指定だが、background-colorを変更することで変えられる。

見出し色+文字色反転で目立たせる

ブログ背景が白の場合、見出しに色付けし、文字色を白にすると結構目立つ↓↓↓

シンプルな上に目立つが、読み手には負担のないデザインなので好感持たれると思う。

背景+下線のみ表示するデザイン

あんまり凝りたくないけど、背景色だけ、下線だけじゃ寂しい人向けデザイン↓↓↓

上例では同系色だが、色や線の太さはお好みで!!

左線でワンポイントデザイン

border-leftで左枠にワンポイントで太めの線を付けている↓↓↓

色や線の太さを変えたければ、border-leftで変更可能。

光と影と丸みを駆使したデザイン

背景色のみの見出しにちょっとだけ工夫を凝らし、光・影・丸みを加えたデザイン。

少しだけ立体的に見える。

Lifebear風のデザイン

box-shadowでブロック要素に広がりを指定してLifebear風の見出し↓↓↓

グラデーション効果

単一背景では物足りない方はグラデーション使ってみると面白いかも。

linear-gradientプロパティの定義は以下の通り↓↓↓

linear-gradient(開始位置と角度, 開始色, 途中色, 終了色)

好きなマークをワンポイントに

サンプルでは♥だが、自分の好きなマークを付ける事が簡単に出来る。

パックマン風の見出し

コレはネタだけど、今にも見出しがパックマンに食べられそうなデザイン↓↓↓

最もシンプルな何も装飾しない見出し

最後の最後で最もシンプルな何も装飾しない見出し。

何だかんだ見た目は大切なので、極力ブログデザインには拘った方が良いけど、一番大切なことはコンテンツの中身。また自分では良いと思って凝ったデザインにしても、他人から見たら見づらいブログになっていることもあるので、デザインやカスタマイズは慎重にやるべき。

今後も色々なデザインやブログを見て、コレは!!と思うものがあれば随時追記予定。

スポンサーリンク