【はてなブログ】簡単に見出しを編集する方法
見出しのデザインを変える事で印象が大きく変わり、見やすくなります！！
変更する方法はHTMLを変更しないといけないので、上手くいかない方も多いのではないでしょうか？私も知識が無く学びながら編集をしています。(;^ω^)
このブログではコピペで使用できるコードを載せ、HTMLに書く方法と色等の変更方法をお伝えします。
画像1:【はてなブログ】簡単な見出し編集
見出しの変更結果
↑のように変更できます。記入内容を変更すれば色を変えれるだけでなく、デザインも変えることが出来ます。まずはこれをブログで表示できるやり方をお伝えしたいと思います。
HTML記入方法
1.まず以下 のHTMLコードをコピーします。
<style>
.entry-content h3 {
padding: 4px 8px;
font color: #333;
font-size:180%;
font-weight:bolder;
line-height: 1.5;
background-color: #bdf7ff;
</style>
2.HTML編集を開き、一番上に張り付ける。
3.見出しにしたい文を「大見出し」にします。以上です(^O^)
編集方法
<style>
.entry-content h3 { ←①見出しの種類
padding: 4px 8px; ←②行の背景カラーの大きさ
font color: #333; ←③文字のカラー
font-size:180%; ←④文字の大きさ
font-weight:bolder; ←⑤文字の太さ
line-height: 1.5; ←⑥文字の上下の余白
background-color: #7fffd4; ←⑦背景カラー
</style>
①見出しの種類
h3：大見出し
h4：中見出し
h5：小見出し
このブログで中見出しの背景に色が塗られていないのは、上記のコードが大見出し用になっているからです。
中見出しも色を付ける場合は、上記コードをコピーし画像2の</style>と<p> </p>の間に張り付けます。そして、h3をh4に変更します。
②行の背景カラーの大きさ
padding: 4px 8px
最初の4pxが上下の幅，8pxが左右になります。数字を変更して下さい。
③⑦文字のカラー，背景のカラー
#以降の箇所を変更して下さい。色は英数字の組み合わせによって表します。
カラーコードとwebで検索すれば、様々な色が選べます。(例 青色：#0000ff)
④文字の大きさ
180の数字を変えると大きさが変更されます。100が通常の大きさになります。
⑤文字の太さ
nomal：標準
bold：太い
lighter：一段階細い
bolder：一段階太い
⑥文字の上下の余白
nomal or 1が標準で、1以上になるとと余白が大きくできます。
他のデザイン
「ブログ 見出し HTML」で検索すると他にも様々なデザインがあります。そのデザインを使用する場合は、今回使用したコードの{}の中をそっくり変えて下さい。まずは簡単なコードから使用して慣れれば複雑なコードに挑戦が良いと思います。
◆◇◆◇
最後まで読んでいただきありがとうございます。
説明に不足があったり、誤字等があれば教えて頂けると助かります。