人生100年時代に必要なスキルと私

発見したことを分かりやすく伝えたい!

はてなブログの見出しをカスタマイズすると見やすい!

こんにちわ。

最近はてなブログを始めて読みやすいようにカスタマイズをしています。

ブログが読みやすくなると多くの方に読んでもらえそうでワクワクします。

自分で見ても読みやすいと気合いも入ります(頑張るぞ~)

 

今回は「見出しのカスタマイズ」をしましたので報告しますね。

とっても簡単だったのでよかったら参考にして下さい。

 

変更前の見出し

見出しは見やすいでしょうか?

 

f:id:emisun:20190113192836p:plain

大見出しを付けると目次を作ることができます。

 

目次の作り方はこちらの記事を参考にして下さいね。

kozukaisite.hatenablog.jp


目次と見出しの関係はこうなっていますが
見出しはぱっと見て分かりますか?

f:id:emisun:20190113192556p:plain

実際にはこのようになっています。

大見出しと中見出し、・・・わかりにくいですよね?
(太い文字が並んでいるだけ?って見えます)

ちょっと気になりますよね(なんとかならないかな~)

 

そこで「はてなブログ 見出しカスタマイズ」で検索しました。

見出しの変更方法

検索するといろいろ出てきました。初心者でもできそうなものを選びました。

f:id:emisun:20190113193852p:plain

ダッシュボード」から「デザイン」をクリックします。

 

f:id:emisun:20190113193935p:plain

「カスタマイズ」をクリックします。

 

f:id:emisun:20190113201158p:plain

下の方にある「デザインCSS」をクリックします。

 

f:id:emisun:20190113194204p:plain

検索して気に入った見出しのコードをコピーして貼り付けます。

 

f:id:emisun:20190113194258p:plain

大見出しと中見出しについてのコードが入っています(入っているそうです)

「変更を保存する」を忘れないようにクリックしましょう(これで完了です!簡単ですね)

 

f:id:emisun:20190113194507p:plain

中央上に「設定を変更しました。ブログを確認する」が出てきました。

では、ドキドキしならクリックしてみますね。

 

 

変更後の見出し

見出しは見やすくなったでしょうか?

変更ができているハズ(どうなっているでしょう?)

f:id:emisun:20190113194703p:plain

うわっ、み、見やすい!

 

f:id:emisun:20190113194635p:plain

実際にはこんな感じです。説明文がなくても十分見出しと分かりますよね~

 変更前後で比較

せっかくなのでスクリーンショットで比較してみます。

青枠が変更前、赤枠が変更後です。

f:id:emisun:20190113201108p:plain

f:id:emisun:20190113201127p:plain

赤枠の方が断然見やすいっ!

まとめ

設定のまとめ

ダッシュボード」→「デザイン」→「メンテナンス」→「デザインCSS

思ったよりも簡単でした。検索するといろいろでてきますよ~。

最後に

いかがでしたでしょう?

見出しを変えるとこんなに雰囲気が変わるんですね。

見やすいと自分でもブログに愛着が生まれてきます

これからも読んで為になるブログを作っていきたいと思います。