【STINGER6】記事内の文字の調整と見出しデザインのカスタマイズ

文字を調整して読みやすく！

「STINGER6」をそのまま利用すると、文字が小さかったり、行間が狭かったりで読みにくい印象があったので、調整してみました。

また、記事内の見出しデザインも変更したので、参考までにまとめておきます。

※STINGER6専用子テーマを利用しています。

 

PC画面だけ記事タイトルを大きくして行間を広げる

/*media Queries PCサイズ
----------------------------------------------------*/
@media only screen and (min-width: 781px) {

.entry-title {
	font-size: 30px;
	line-height: 45px;
}

}

style.cssのPC部分に上記を追加して、PC画面だけ記事タイトルを大きくして、行間を広げました。

 

記事内の文字を大きくして、文字間の幅と行間も広げる

共通部分

p {
	font-size: 17px;
	letter-spacing: 1px;
	line-height: 25px;
}

style.cssの共通部分に上記を追加。
フォントサイズを大きくして、文字間、行間の幅を広げました。

PC部分

/*media Queries PCサイズ
----------------------------------------------------*/
@media only screen and (min-width: 781px) {

p {
	line-height: 30px;
}

}

PC部分には上記を追加。
PCの方が行間を少し広めにしました。

 

記事内の見出しデザインをカスタマイズ

h2 {
 font-size: 26px;
 line-height: 36px;
 padding-top:20px;
 padding-bottom:20px; 
 background-color: #f6f6f6;
 border-radius: 6px;
}

h2:after {
 display:none ;
}

h2:before {
 display:none ;
}

.post h3 {
 font-size: 22px;
 padding: 10px;
 border-top: 1px solid #333;
 border-bottom: 1px solid #333;
}

.post h4 { 
 font-size:18px;
 padding: 10px;
 margin-bottom: 10px;
 border-bottom: 1px dotted #333333;
 background-color: #ffffff;
}

style.cssの共通部分に上記を追加。

こんな感じでシンプルにしてみました。

h2

h3

h4

 

最後に

以上が、このブログで行った記事内文字のカスタマイズです。

本当は、見出しはもうちょっと考えたかったんですが、時間が無いので取り急ぎこんな感じです。

また、変更したら更新させていただきます！

※2016/2/3更新しました。