ブログの「見出し」をカスタマイズしてみた

こんにちは、ぽに子です。

先日メルカリに出した大物が全部売れて嬉しいです。

出して見るもんですね！

＊＊＊＊＊＊

最近お勉強を兼ねて、いろんなブログを行脚していますが、記事がキレイにまとまっている（わかりやすい）のを見ると、憧れを抱きます。

はぁ〜。

私のブログはこれからですから（自分で励ます）、少しずつ取り入れてバージョンアップしていきます。

今日は「見出しのカスタマイズに挑戦」です！

（GW、毎日何かに挑戦してる気がする…）

見出しのカスタマイズ、参考にしたサイト

参考にしたのはコチラのサイトです。

dearbrother.hatenablog.com

さらに上記サイトでおしゃれな見出しデザインサイトの紹介もしています。 

saruwakakun.com

ステキな見出しがたくさんあります。

助かります。ありがとうございます〜

はてなブログ Perfect GuideBook [改訂第2版]

気に入った見出しデザインのcssコードを探す！

今回はコチラのサイトから、気に入った見出しデザインのcssコードを頂きます。

ただ、はてなブログで使用できる本文の見出しは、

• 大見出し→h3
• 中見出し→h4
• 小見出し→h5

のとのことですので、適宜その部分（h1をh3にするとかね）を修正して使用します。

↓今回はコレを使うことにしました！

cssコードをコピーします。

自分のブログに貼り付けよう！

自分のブログの「デザイン」から「カスタマイズ（工具マーク）」を選びます。

「{ }デザインcss」を選択して、出てきた白枠内にペーストします。

※他にcssタグを入れている場合は消さないように注意

↓わたしの例です。

ペーストできたら、「変更を保存する」をクリックして、設定終了です。

はてなブログカスタマイズガイド―HTML & CSSで「はてなブログ」を次のステッ

設定ができたら早速使ってみよう！

では、早速、カッコ良いみだしが出来るか確認します。

Before afterで比べて見ます。

＜Before＞

いつもの、みたまま編集の見出し（大）を使用しました。

↑今まで使っていたものです。

シンプルで、あんまり見出し感はないです。他の太文字との区別もつきません。

＜After＞ 

cssコードを使ったバージョン↓

見出しをカスタマイズする 

出来てる出来てる〜！

いいじゃない、いいじゃない〜！！

昨日あげた記事にもちゃんと反映されてましたよ〜

ふー、出来た出来た。やれやれ。

設置したcssが反映されない？

ちなみになんですけど、参考にさせていただいたサイト通りにやっても、プレビューすると反映されてなくて、「あれ？」「あれ？」って実はなってたんですが、

少し時間を置いてみてください。

何がおかしいのか、調べるために他のサイトを見ている間に出来てましたw

焦るな。少し待て。

ってことですね。

 こんな私みたいな、やらかしをする人はいないか〜！

あ、子どもにも教えてあげよー！

ではでは。

ぽに子