Random Life Blog

日々のあれこれ

はてなブログの見出しをカスタマイズする方法

スポンサーリンク

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

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

みなさん、こんばんは。

ここ2、3日、ブログのカスタマイズ記事を書いてます。

今日はCSSで見出しのカスタマイズについて書いてみようと思います。

 

見出しとは?

見出しとは、新聞を始めとする様々な記事、文章において内容の要点を非常に短い言葉にまとめ、本文より大きな字で章や節の最初に置かれる言葉。

見出し - Wikipedia

 

ということで、見出しはこれから書いていく内容を端的に表す文です。

どんな内容を書いているのかをひと目で分かるようにしなければなりません。

文章として正確に記載するのも大事ですが、見た目も目立たせていきたいですよね。

そんなわけで「見出し」を装飾するカスタマイズをやっていきたいと思います。

カスタマイズ前の状態は以下です。

 

f:id:samada:20190512195415p:plain



 

参考にさせて頂いたブログは以下になります。

www.nxworld.net

saruwakakun.com

 

はてなブログでは、

 大見出し h3

 中見出し h4

 小見出し h5

という構成になっています。

 

上記のブログではh1で例を表示しているので、

大見出しならh1をh3に、

中見出しならh1をh4に、

小見出しならh1をh5に、

書き換えて【デザインCSS】に貼り付けてください。

 

貼り付けの流れ

f:id:samada:20190508201917p:plain

はてなブログの設定画面の左側メニューの【デザイン】をクリック。

 

f:id:samada:20190508201625p:plain

パナマークの【カスタマイズ】をクリック。

 

f:id:samada:20190508201649p:plain

一番下の【デザインCSS】を開き、コードを貼り付けます。

 

f:id:samada:20190512195559p:plain

最後に【変更を保存する】で終了です。

 

 

では、貼り付けるコードを。

大見出し

h3 {

  padding-bottom: .5em;

  border-bottom: 2px solid #ccc;

}

 

大見出しはシンプルに下線のみにしました。

padding は余白を意味します。文字と下線の距離です。

border-bottom: 2px solid #ccc; の部分が下線のコードになります。

2pxの普通の線を#CCCという色で引くという意味です。

 

中見出し

h4 {

  padding-bottom: .5em;

  border-bottom: 2px dashed #ccc;

}

 

中見出しは破線にしてみました。

border-bottom: 2px dashed #ccc; の部分が破線のコードです。

2pxの破線(dashed)を色#CCCで引くという意味になります。

 

小見出し

h5 {

  padding-bottom: .5em;

  border-bottom: 2px dotted #ccc;

}

 

小見出しは点線にしました。

border-bottom: 2px dotted #ccc; の部分が点線のコードです。

2pxの点線(dotted)を色#CCCで引くという意味になります。

 

見出しカスタマイズまとめ

カスタマイズ後の状態は以下。

 

f:id:samada:20190512195457p:plain

シンプルにまとめてみました。

上記のブログでは様々な例をCSSで表示しています。

h1の部分をh3などに変更したり、色の部分(#○○○○○○)などを変更して自分好みの見出しを作ってみてください。

色見本はこちら↓

www.colordic.org

 

randamlife.hatenablog.com