everyday-study

【Minimalism】見出しデザインのカスタマイズ

前回はSNSのシェアボタンの設置方法についてでした
everyday-study.hatenablog.jp

今回は見出しのデザインのカスタマイズを行っていきます

デフォルトの設定だと見出しはこのようになります
f:id:hachipochi5:20201120223614p:plain

これを以下のサイトを参考にカスタマイズします
saruwakakun.com

このサイトには68種類ものデザインがコードと一緒になってまとめられています
それらの中から自分が気に入ったデザインを選びましょう
「コードを表示」を押すと、そのデザインを表現するためのCSSのコードが出てくるので、これをコピーします
f:id:hachipochi5:20201120224803p:plain


コピーしたコードを
ダッシュボード」⇒「デザイン」⇒「カスタマイズ」⇒「デザインCSS」に貼り付けます
f:id:hachipochi5:20201120225607p:plain

ただ、この時気を付ける点が、参考サイトのコードがh1に対するデザインになっているので、これをそれぞれh3,h4,h5に変える必要があります
f:id:hachipochi5:20201120225717p:plain

大見出しh3

中見出しh4

小見出しh5

これで見出しのデザインが変更できています


他にもカスタマイズについて書いています
everyday-study.hatenablog.jp

everyday-study.hatenablog.jp

everyday-study.hatenablog.jp

everyday-study.hatenablog.jp

everyday-study.hatenablog.jp

everyday-study.hatenablog.jp