ブログの見出しデザインまとめとCSSカスタマイズで参考にしたサイト

この記事は、

ブログの見出しをカスタマイズしたい
具体的なCSSを見たい
CSSをコピペして自分なりにカスタマイズしたい
見出しの装飾とCSSを照らしあわせて参考にしたい
見出しデザインに参考になるサイトが知りたい

という、ブログの見出しを何とかしたい！という人の参考になるかと思って自分が見出しを設定した時に参考にしたサイトや実際のCSSのタグをまとめてみました。

ちなみにこのブログは現在WordPressの無料テーマSimplicityを利用して子テーマのCSSファイル（style.cssとmobile.css）を編集しています。Simplicityを導入している人ならちょっとは頭に入りやすいかも。

見出しデザイン完成品の見た目

まず先に設定した見出しを画像で貼り付けておきます。（今後変更する可能性もあるため画像にしています）

パソコンの見出し

パソコンでは左右の余白が十分にあることからインデントも利用しながら上記の画像のように設定しました。

h2見出し（背景色無し、下線、マークあり）
h3見出し（背景色あり）
h4見出し（背景色無し、下線、マークあり）

というふうになっています。

各要素別に見ると、

背景色（無し→あり→無し）
左側マーク（あり→無し→あり）
インデント（徐々に右へ）

というふうに見出しの階層が変わるごとに交互に違いをつけることによって階層が切り替わった時に分かりやすくなるんじゃないかと考えました。

スマホの見出し

スマホの見出しにパソコンと同じフォントサイズを使うと大きくて邪魔になるので小さめにしました。そのぶん左側のマーク・背景色・太字・下線で見出しということが分かるようにしています。

でもインデントに関してはスマホだと横幅が狭いので調節ができずにh2見出しが右側に入り込んで見分けが付きにくくなってしまいました。

スマホのCSSもこだわっていたら時間がいくらあっても足りなさそうだったので妥協しています。今後の課題です。

見出しデザインを考える時に参考にしたサイト

さてここからは自分がどんな見出しデザインにしようか考えた時に参考にさせてもらったサイトの紹介です。

こう書くとあっさり紹介が終わりますけど何時間も何時間も何時間もかかってます。

まわり道・寄り道も知識が深まるので良いことではありますけどまぁ大変でした（汗）

見出しのCSSについて充実したまとめ

Simplicity作者のわいひらさんが見出しのCSSについて参考になるサイトをまとめてくれています。

参考：少しの労力でサイトをかっこよく！見出しのCSSデザインに役立つジェネレーター＆サンプル集30個まとめ｜寝ログ

この記事のリンクを辿りながらいろいろな見出しのデザインを見て回りました。

オシャレな見出しやかっこいい見出し、吹き出しとか具体例は豊富だし他にも見た目を確認しながらCSSを作成できる見出しジェネレーターなども紹介されています。

各見出しで採用したデザイン

続いてh2見出しからh4見出しまでそれぞれで参考にさせていただいたブログの紹介です。

h2見出し

参考：~~【CSS】先頭に四角形が入った見出しのデザインを真似してみました | キノめも~~（ドメインが失効していました）

h2見出し左側のマークを付けるためのCSSをパク・・参考にさせてもらいました。

h3見出し

参考：初心者ブロガー指南：Naifix

背景色の見出しとしてシンプルで立体感があって落ち着いたNaifixさんのデザインを参考にさせてもらい自分のブログに合わせてフォントサイズ・余白（padding・margin）・シャドウの大きさなどを微調整しました。

カスタマイズはしましたがほとんどパク・・・参考にさせていただきました（汗）

h4見出し

参考：CSSで作る見出しデザイン | Web’Notes

この中で紹介されているチェックマークのデザインを参考にさせてもらいました。これも擬似要素・擬似クラスを使っています。色を変えたくらいで形は元のまま使わせてもらってます。

さて次はいよいよ見出しに使ったCSSの中身を見ていきます。

見出しタグの中身

ここからお待ちかね、実際に設定した見出しタグの中身を載せています。自分もパクりまくっているし結局は自分のブログに合わせて組み合わせることになるから大いに参考にしていただけると幸いです。

Simplicityではstyle.cssに書かれたタグはパソコンとスマホ両方に適用されます。スマホ独自のCSSを設定する場合はmobile.cssをカスタマイズします（後述）。

h2見出しのタグ

↑この画像はパソコンで見たら原寸大です。後々見出しのCSSを変更するかもしれないので記録のためにキャプチャを画像として一緒に載せておきます。

.article h2 {
    position: relative;
    font-size: 20px;
    line-height; 29px;
	border-left:none;
	margin: 60px -50px 20px;
	padding:7px 35px;
	box-shadow: 0 5px 6px -6px rgba(0,0,0,.3);
}
.article h2:before {
    position: absolute;
    top: 11px;
    left: 0;
    width: 16px;
    height: 16px;
    border: 2px solid #99ddFF;
    content: "";
}
.article h2:after {
    position: absolute;
    top: 3px;
    left: 9px;
    width: 13px;
    height: 13px;
    border: 2px solid #99ddFF;
    content: "";
}

.article h2 {

position: relative;

font-size: 20px;

line-height; 29px;

border-left:none;

margin: 60px -50px 20px;

padding:7px 35px;

box-shadow: 0 5px 6px -6px rgba(0,0,0,.3);

}

.article h2:before {

position: absolute;

top: 11px;

left: 0;

width: 16px;

height: 16px;

border: 2px solid #99ddFF;

content: "";

}

.article h2:after {

position: absolute;

top: 3px;

left: 9px;

width: 13px;

height: 13px;

border: 2px solid #99ddFF;

content: "";

}

h2見出しは擬似要素・擬似クラスでふたつの四角が重なり合ってる？らしいです。CSSでもこんなことができるとは知りませんでした。

h3見出しのタグ

.article h3{
	font-size: 18px;
	border-bottom: 2px solid #ddd;
	margin: 50px -12px 17px -12px;
	padding: 0.5em 12px 0.4em;
	background: #f5f5f5;
	text-shadow: -1px 1px 0 rgba(255, 255, 255, 1);
}

.article h3{

font-size: 18px;

border-bottom: 2px solid #ddd;

margin: 50px -12px 17px -12px;

padding: 0.5em 12px 0.4em;

background: #f5f5f5;

text-shadow: -1px 1px 0 rgba(255, 255, 255, 1);

}

h3見出しは背景色や下線がほとんどなのでシンプルなCSSで分かりやすいですね。

h4見出しのタグ

.article h4{
	padding: 9px 0 3px 33px;
	margin: 30px 0 10px 0;
	font-size: 16px;
	font-weight:bold;
    position: relative;
	box-shadow: 0 4px 4px -5px rgba(0,0,0,.3);
	border-bottom:none;
}
 
.article h4:after, .article h4:before {
	content:''; 
	height:18px; 
	width:4px; 
	display:block; 
	background:#99ddff; 
	position:absolute; 
	top:8px; 
	left:15px; 
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px; 
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
}
 
.article h4:before{
	height:10px; 
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg); 
	top:16px; 
	left:7px
}

.article h4{

padding: 9px 0 3px 33px;

margin: 30px 0 10px 0;

font-size: 16px;

font-weight:bold;

position: relative;

box-shadow: 0 4px 4px -5px rgba(0,0,0,.3);

border-bottom:none;

}

.article h4:after, .article h4:before {

content:'';

height:18px;

width:4px;

display:block;

background:#99ddff;

position:absolute;

top:8px;

left:15px;

border-radius:10px;

-webkit-border-radius:10px;

-moz-border-radius:10px;

transform:rotate(45deg);

-webkit-transform:rotate(45deg);

-moz-transform:rotate(45deg);

-o-transform:rotate(45deg);

-ms-transform:rotate(45deg);

}

.article h4:before{

height:10px;

transform:rotate(-45deg);

-webkit-transform:rotate(-45deg);

-moz-transform:rotate(-45deg);

-o-transform:rotate(-45deg);

-ms-transform:rotate(-45deg);

top:16px;

left:7px

}

h4見出しは一見シンプルなマークなのに驚くほど長いCSSタグ！

スマホ用のCSS

SimplicityがCSSを読み込む順番はstyle.cssの後でmobile.cssが上書きされるようになっていてmobile.cssの設定はスマホやタブレットなどのモバイル端末にだけ適用されるCSSとなっています。

Simplicity（親テーマ）のstyle.css

子テーマのstyle.css

スキンのstyle.css

Simplicity（親テーマ）のmobile.css

子テーマのmobile.css

スキンのmobile.css

テーマカスタマイザーで変更したスタイル

via：Simplicityのスキン機能の仕様

パソコン用に調整したCSSでそのままスマホ表示を確認するとフォントサイズが大きすぎたりいかにもバランスが悪いのでmobile.cssに追記していろいろ微調整しました。

モバイル用のCSS（mobile.css）は先程の全体のCSS（style.css）の後に読み込まれてスタイルが上書きされるようになっています。

ほとんどの設定は最初のstyle.cssと同じでmobile.cssに書くのは上書き部分だけなのでh2からh4見出しのCSSをすべてここに書きます。

主にフォントサイズを小さくしたりそれに伴ってずれた余白を微調整しています。

.article h2 {
    font-size: 16px;
	font-weight: bold;
	margin: 60px 0 0;
	padding: 8px 0 7px 35px;
	box-shadow: 0 5px 6px -6px rgba(0,0,0,.3);
}

.article h3{
	font-size: 16px;
	margin: 40px -7px 10px -7px;
	padding: 0.5em 0.4em 0.4em;
	background: #f1f1f1;
	border-bottom: 2px solid #dadada;
}

.article h4{
	padding: 9px 0 3px 30px;
	margin: 30px -3px 10px -7px;
	font-size: 15px;
}

.article h2 {

font-size: 16px;

font-weight: bold;

margin: 60px 0 0;

padding: 8px 0 7px 35px;

box-shadow: 0 5px 6px -6px rgba(0,0,0,.3);

}

.article h3{

font-size: 16px;

margin: 40px -7px 10px -7px;

padding: 0.5em 0.4em 0.4em;

background: #f1f1f1;

border-bottom: 2px solid #dadada;

}

.article h4{

padding: 9px 0 3px 30px;

margin: 30px -3px 10px -7px;

font-size: 15px;

}

「AmazonJS」のh4見出しを修正

WordPressでAmazon商品を紹介する時に便利なプラグイン「AmazonJS」ですがこの商品タイトルにはh4タグが使われていて.article h4のCSSが適用されてしまい商品名の部分がおかしくなってしまうので修正します。

Chromeのデベロッパーツールを頼りになんとかAmazonJSのh4見出し部分にだけ下線やマークを非表示にしました。以下がそのCSSタグです。style.cssに追記します。

.amazonjs_item .amazonjs_info h4{
	box-shadow: none;
}
.amazonjs_item .amazonjs_info h4:before{
	display: none;
}
.amazonjs_item .amazonjs_info h4:after{
	display: none;
}

.amazonjs_item .amazonjs_info h4{

box-shadow: none;

}

.amazonjs_item .amazonjs_info h4:before{

display: none;

}

.amazonjs_item .amazonjs_info h4:after{

display: none;

}

いろいろnoneを使って非表示にしていますがこれはそれぞれ設定している内容によって何をnoneにするのか変わってきます。

上記コードは僕が設定したh4見出しに対応した内容なので自分の設定しているh4見出しのCSSを見ながらいじってください。

CSSタグはパクりまくり

ゼロからCSSをゴリゴリ書くことができないので見出しの見た目とCSSが載っているサイトを参考にさせてもらって、それらしき数値の部分を変更してちょっとずつちょっとずつ整えていきました。

なのでこの記事ではパクられるの覚悟で参考になると思い見た目のキャプチャとCSSのタグを一緒に載せています。

でもたぶんブログによって見出しの最適なバランスはそれぞれ違うと思うのでオリジナルの見出しCSSを書く場合はぜひ他のサイトもいろいろ見て回って自分のデザインを決めて欲しいなと思います。

ほとんどのサイトではCSSのコードをわざわざブログ記事に書いていることは無いので基本的には気になるデザインがあったらChromeの「デベロッパーツール」を使って調べています。

Ctrl+Shift+C でタグを調べるモードになるのでマウスのクリックで調べてみてください。クリックした場所のHTMLやCSSが見られますよ。

見出しのデザインセンスが無ければ愚直に・・・

こんなことだろうと思ったけど段落とかと一緒で結局見出しも奥が深かったです。自分はゼロから生み出すデザインセンスに自信が無いので極力シンプルなものを組合わせて使うことがほとんどです。

色んな色を使ったりして冒険したデザインが使える人ってすごいなぁと思います。まぁでも見出しデザインのために色々なブログを見ているとそれ以外にも勉強になることが多くて面白いですけどね。

見出しデザインで目を惹かれたブログ

最後に、見出しデザインを参考にするためにブログをいろいろ見ていて印象に残ったサイトを紹介しておきます。

日常ぴよぴよ

参考：日常ぴよぴよ

h2見出しの色が非常に目立って見やすいと感じたブログでした。後から思ったけどひよこの黄色とか背景の木目の薄黄色と青系統の色は補色の関係で目立つのかなぁと思ったり。

YATのBLOG

参考：YATのBLOG

見出しタグの下に必ずと言っていいほど大きな画像を貼って見出しとして目立たせている方法でした。

ウェビメモ

参考：ウェビメモ

自分から見れば大冒険しまくりのデザインで「すごいなーすごいなー」と思いながら眺めていたブログです。背景色の有り無しや見出し左側のマークがハッキリしていてヒントをもらえました。

・・・

その後の見出し変更

この記事を書いている時はまだまだブログのデザインが定まっていないので何回か見出しのデザインも変更しました。

⇒見出しデザインその2

⇒見出しデザインその3

ブログの見出しデザインまとめとCSSカスタマイズで参考にしたサイト

見出しデザイン完成品の見た目

パソコンの見出し

スマホの見出し

見出しデザインを考える時に参考にしたサイト

見出しのCSSについて充実したまとめ

各見出しで採用したデザイン

h2見出し

h3見出し

h4見出し

見出しタグの中身

h2見出しのタグ

h3見出しのタグ

h4見出しのタグ

スマホ用のCSS

「AmazonJS」のh4見出しを修正

CSSタグはパクりまくり

見出しのデザインセンスが無ければ愚直に・・・

見出しデザインで目を惹かれたブログ

日常ぴよぴよ

YATのBLOG

ウェビメモ

その後の見出し変更