cssを設定してサイトの見出しを見やすくしてみました

見出し(h2)を入れて読みやすくしたいと

思って試してみました。

でも、ただ見出しにした文字が大きくなるだけだったので、もう少しみやすくオシャレな感じにしてみました。

ブログ本文の見出しを装飾してみた

見出しをオシャレにする方法をメモしておきます。

WordPressの設定

WordPressの左側メニューから設定します。

1. WordPress管理画面の左メニューから「外観」→「カスタマイズ」
2. 追加CSSを開く 「追加CSS」を選択。
3. CSSを追記する CSS部分に見出しコードの記述を追加する。

追加cssは、以下のコードを入力してください。

h2 {
  border-left: 3px solid #55A8DC;/*左線*/
  padding: .5em .7em;/*余白*/
  background: rgba(85,168,220,.07);/*背景色*/
  color: #323232;
}

※NOMAD CODE様のサイトを参考に設定しました。https://code.nomad.inc/wordpress/basic/heading/

最後に

見出しの背景に色がついて読みやすくなったと思います。

みなさまも試してみてくださいね。