Simplicity CSS カスタマイズ : hタグ (見出し) の表現を変更しました

この記事を読むのに必要な時間は約 7 分です。

---

本日、このブログの見た目を少しカスタマイズしました。

今回変更したのは、ヘッダタグ・リストタグ用 CSS です。

どうカスタマイズしたかを CSS の内容とともに、ご紹介したいと思います。みなさんがカスタマイズする際の参考になれば幸いです。

---

ビフォー / アフター

以下、1枚目がビフォー、2枚目がアフターになります。

 

 

変更のポイント

h2 / h3 / h4 のどのレベルの見出しなのかを、より分かりやすく

デフォルトだと、以下の点が気になりました。

• h2 の表現と、 h3 や h4 の表現とが、あまり似ていない
• h3 と h4 は似ていて判別しづらい

見出しで区切っても、読んだ時にどのレベルの区切りなのかが、分かりづらいかな、と思っていました。

例えば、h4 の区切りを入れた時に、h3 の話題が続いているのか、次の話題になるのか、パッと見て分かりづらいのでは、ということです。

一方で、h2 の区切りは、表現が h3/h4 と違うので、似せた方が、パッと見で分かりやすいかなーといったところです。

 

h2 / h3 / h4 の見出しにアイキャッチを付与

せっかくカスタマイズするならば、最近流行？な感じに、見出しを目立つようにしたいと思いました。

とはいえ、シンプルさを保ちたいので、アイキャッチを付与する程度にしました。

吹き出しや、リボンなどもインパクトもあるし、素敵なのですが、下位となる h3 や h4 と揃えることは難しいので、見送りました…。

 

箇条書きの行間を空ける

これが一番やりたかったところです。箇条書きの行間が少ないため、箇条書きにたくさん詰め込むと、やけに文字のつまった塊となってしまって読みづらくなってしまっていました。

 

行間を空けることで、1項目 1項目がはっきりし、読みやすくなると思います。

 

変更の流れ

当サイトでは、Simplicity を利用させてもらっています。

自分でカスタマイズするため、子テーマを適用して、子テーマに CSS を追記しています。

子テーマの適用や、Simplicity 子テーマのダウンロードについては、以下をご参照ください。

http://wp-simplicity.com/downloads/child-theme/

 

カスタマイズした CSS 実際のソースコード

以下の内容を、子テーマの style.css に追記しました。

h2 タグ

.article h2{
padding-left: 2.25em;
    border-bottom: 3px double #e7e7e7;
    border-top: 3px double #e7e7e7;
    border-left: 0px;
}
 
h2:before {
    position:  absolute;
    top: 0.9em;
    left: 0.4em;
    width: 0.75em;
    height: 0.75em;
    border: 2px solid #c7c7c7;
    content: "";
}

h2:after {
    position:  absolute;
    top: 1.25em;
    left: 0.75em;
    width: 0.75em;
    height: 0.75em;
    border: 2px solid #e7e7e7;
    content: "";
}

h2 の padding-left, h2:before / after の top, left, width, height はサイトの文字サイズによって、微調整が必要になると思います。

 

h3 タグ

.article h3{
    border-bottom: 2px solid #e7e7e7;
    padding-left: 1.5em;
}

h3:before{
	content:''; 
	height: 0.75em; 
	width: 0.75em; 
	display:block; 
	position:absolute; 
	top: 0.6em; 
	left: 0.2em; 
	background-color:#FFFFFF;
	box-shadow: 0 0 2px 2px rgba(0,0,0,0.1) inset
}

 

h4 タグ

.article h4{
    border-bottom: 2px dashed #e7e7e7;
    padding-left: 1.75em ;
}
h4:before{
	content:''; 
	height: 0.5em; 
	width: 0.5em; 
	display:block; 
	position:absolute; 
	top: 0.75em; 
	left: 0.4em; 
	background-color:#FFFFFF;
	box-shadow: 0 0 2px 2px rgba(0,0,0,0.1) inset
}

 

li タグ

li{
    margin-top: 1ex;
}

 

今回は以上です。

---