こんにちは、greenです。ブログの見出しが分かり難かったので、分かり易いように見出しを変えたかったんです。ゴールデンウィークは、私と愛犬を放置して家族は旅行に行くので、私とワンコは時間があります。私はブログなどのしたいことに集中します。その１つとつして、ブログの見出しを分かり易く変更します。ワンコはずっと寝てます。
私の名前はgreenなので、色は緑がいいですね🌱
分かり易く、シンプルな見出しが良いですね！個性は記事の内容で出せば良いし！
えっ記事のハードル上げてない？😅
このブログの見出しも、下のイメージよう分かり易い引き出しのある家具のようにしたいと思います！
今回の記事では、分かり難い見出しを卒業するため、引き出しではなく、見出しを分かり易くしていきます。
分かり易い見出しに興味のある人の参考になればと思います。
記事の内容は、完成例、分かり易い見出しにするため、私のCSS、最後にまとめの順で書いていきます。
完成例
こちらが完成例になります。
- 大見出し(h3)は、上下に緑の線を入れ、上の線を若干太くしました。
- 中見出し(h4)は、下に緑の線を入れました。
- 小見出し(h5)は、下に緑の線を少し入れました。
下が変更前の見出しです。
文字の大きさと色を変更せずに、緑の線を上下に追加することで、見出しを分かり易くすることが出来ました。
分かり易い見出しにするため
分かり易い見出しにするための作業内容を順番に書いていきます。
- 今の見出しの表示を確認する。
- １で見出しを見て、新しい見出しをイメージする🤔。
※公開済みの記事へも反映されるので、私は文字の大きさと色は変更せずに、線だけを追加することにしました。 - 大見出し、中見出し、小見出しの新しい設定を考える。
- CSSを修正します。
- 見出しの設定完了です。
- 公開済みの記事を確認します。
詳細については、👇こちらでご確認ください。このサイトは吹き出しの時もお世話になりました。ありがとうございます！
こちらは、私が吹き出しの設定をした時の記事です。この記事を読むと吹き出しの設定は簡単と思えるようで、簡単に設定できたとコメントがありました。
おまけ（私のCSS）
見出しの変更に伴い、CSSに追加した内容です。参考に記載しておきます。
/* 見出しカスタマイズ */
/* 大見出し（上下にライン） */
.entry-content h3 {
padding: 4px 10px;
border-top: 2px solid #009900;
border-bottom: 1px solid #009900;
}
/* 中見出し（下にライン） */
.entry-content h4 {
padding: 4px 10px;
border-bottom: 1px solid #009900;
}
/* 小見出し（下に2本ライン ）*/
.entry-content h5 {
padding: 4px 10px;
position: relative;
border-bottom: 1px solid #ccc;
}
.entry-content h5::before {
position: absolute;
top: 100%;
left: 0;
width: 20%;
height: 1px;
background-color: #009900;
z-index: 2;
content: '';
}
まとめ
もう、まとめですが、憧れの分かり易い見出しがあるブログにすることが出来ました。
吹き出しの設定をした時と同じように、見出しの設定に関しても参考になる分かりやすい記事があり、簡単に対応できました。
しかし、私の過去の記事を見てみると、新しい見出しに反映されていないものや、大見出しがなく中見出しから始まっているものがありました。過去の記事を修正する必要があることが分かりました。＿|￣|○
この見出しの設定も早くしておくべきだったと後悔中です。
皆さんも憧れの分かり易いの見出しがあるブログにしてみては如何でしょうか。
最後まで、読んでいただきありがとうございます。🙇
