Rikiによる知識財産の共有

【素敵なおじさん化計画中!】

【ブログを見やすくする15】見出しのデザインを変えよう

どうもみなさん!Rikiです!

読みやすいブログを作るためにデザインを試行錯誤していて、今回は第15弾となります。

前回はタイトルをセンターにしてヘッダーを狭くする方法をお伝えしました。下記記事をご覧ください。

www.riki-riki.com

今回は各見出しのデザインを変える方法をお伝えします。

 

ブログを見やすくする15〜見出しのデザインを変えよう〜

見出しのデザインを変える方法

デザインCSSの入力

デザインCSSに入力します。

”デザイン”→”デザインCSS”をクリックします。

f:id:Riki-Riki:20200319174736p:plain

ここに以下のテキストを入力します。

 

h4 { /*中見出しの編集*/

  border-bottom: solid 1px #ffebcd; /*枠線下の線種類、太さ、カラー*/

  position: relative;

}

 

h4:after { /*中見出し後の編集*/

  position: absolute;

  content: " ";

  display: block; /*形状*/

  border-bottom: solid 1px #ff6347; /*枠線下の線種類、太さ、カラー*/

  bottom: -1px; /*下からの位置*/

  width: 20%;

}

 

h5 { /*小見出しの編集*/

  border-bottom: solid 1px #ffebcd; /*枠線下の線種類、太さ、カラー*/

  position: relative;

}

 

これを保存すると以下のような見出しになります。

f:id:Riki-Riki:20200322141411p:plain

 

h4やh5というのが中見出しや小見出しを指しています。ちなみに、h1はタイトル、h2はタイトル下、h3は大見出しとなっています。

それぞれの項目で必要そうなところの意味はメモに書いてありますが、考え方としては各見出しに下線を引いて色を付けたり、見出しの下にブロックを置いて色を付け足してこのようなデザインにしています。

 

カラーコードについては原色大辞典をご参照ください。

https://www.colordic.org

 

また私が参考にさせてもらっているサルワカさんでは様々なデザインをコピペできるようにしていますのでご覧ください

https://saruwakakun.com/html-css/reference/h-design

 

色々いじってみて、好きなデザインにしてみてください。

 

デザインCSSの入力方法は以下の記事にも書いてありますので参考にしてください。

https://www.riki-riki.com/entry/2020/02/26/224804

 

今後

これからも読者に読みやすいデザインに変える方法をお伝えしていこうと思います。