どうも！ばなおかです！
見出しを付けることで記事が読みやすくなりますよね。
ただ普通に色を付けるだけでは強弱がなく読みにくい記事になってしまいます。
分かりやすく記事が書かれていることでGoogleAdsenceへの審査も通りやすくなりますね。
そこで見出しに色を付ける方法を説明します。
↓コレです。
見出し色の変更方法
まずは、下記のHTMLコードをコピーしHTML編集にペーストします。
<style>
.entry-content h4 {
padding: 4px 8px;
font color: #333;
font-size:110%;
font-weight:bolder;
line-height: 1.5;
background-color: #808080;
</style>
HTML編集画面に 貼り付けます。一番上が分かりやすくて良いですね。
上記コードは「h4」中見出しの変更を指定しておりますので
この場合は変更したい文字を「中見出し」に設定します。
そうすると変更されましたね。
編集方法とおすすめ設定
下記赤色部分を変更すればカスタマイズが可能です。
- .entry-content h4 { 見出しの種類が変更できます。
- padding: 4px 8px; 背景カラーの高さと幅
- font color: #333; 文字の色
- font-size:110%; 文字の大きさ
- font-weight:bolder; 文字の太さ
- line-height: 1.5; 文字上下の余白部分
- background-color: #808080; 背景色
1.見出しの種類の変更
h3：大見出し
h4：中見出し
h5：小見出し
となっており、使用したい箇所を変更します。
見出しの変更方法設定方法は、上記に記載しておりますので再確認をお願いします。
2.背景カラーの高さと幅
padding: 4px 8px;
4px部分が文字の上下の幅の変更
8px部分が文字の左右の幅の変更
下記が実際に変更した際の見え方です。
横幅は表示される最大サイズが決まっているため8pxから変更しなくてよいかもしれませんね。
3.文字の色
font color: #333;
＃333部分を変更することで文字色が変更可能です。
下記HTMLコードを参考に変更したい色を選択してください。
好きな色よりも見えやすい色が良いですね。
4.文字の大きさ
font-size:110%
110％の部分を変更してください。
100％が通常のサイズですので、目立たせたい文字は150％など1.5倍にしても良いですね。私は通常120％程で使用することが多いです。
5.文字の太さ
font-weight:bolder;
border部分を変更します。
上から順に太くなります。
「lighter」 normalより一段階細い
「normal」 標準
「bolder」 標準より一段階太い
「bold」 bolderよりも太い
基本は「normal」と「bolder」で良いかなと思います。
(変化もあまりわかりません。)
6.行間の高さ
line-height: 1.5;
7.背景色
background-color: #808080;
こちらも③の文字色同様に下記参照に選定してください。
以上です。
お疲れ様でした。