ブログの見出しデザインのあしらいについて

お疲れさまです。hanawaです。

さあ世の中もクリスマスムードは終わりまして、一気にお正月ムードですね。
みなさん、良いクリスマスは迎えましたでしょうか。
私は居酒屋で呑んだくれていました。

さて本日のテーマはですね、ブログの見出しデザインのあしらいについてです。

今までやり方がわかっていなかったのですが、実装してみたら案外簡単にカスタマイズできたのでご紹介します。

本当はテーマ>カスタマイズでCSSを変更すれば、h1〜h6まで毎回変更せずにできるのですが、一人一人の見出しの使い方が違うと思いますので、投稿にそのまま追加してできるものをいくつか紹介します。

見出し①

左に線と背景色がつくあしらいです。

<h3 style="padding: 1em; color: #494949; background: #fffaf4; border-left: solid 5px #ffaf58;"> 

見出し②

縫い目がついているようなあしらいです。

<h3 style="background: #dfefff; box-shadow: 0px 0px 0px 5px #dfefff; border: dashed 1px #96c2fe; padding: 0.8em; color: #454545;">

見出し③

下線部にマーカーを引いてる感じのあしらいです。

<h3 style="background: linear-gradient(transparent 70%, #a7d6ff 70%); padding-left: 1em;">

見出し④

下線部の点線のあしらいです。

<h3 style="color: #6594e0; border-bottom: dashed 2px #6594e0; padding-left: 1em;">

いかがでしたでしょうか。

投稿>新規追加>テキストの部分に追加するだけで、こんなにカラフルな見出しに変わります。

私は今回見出しの大きさをh3で行ったのですが、大きさに応じてタグも変更して使ってみてください。

サルワカさんの記事では、もっとたくさんの種類のあしらいをコードとともに載せてありますので、ブログの際でもコーディングの際にでもご使用ください！めちゃくちゃ参考になります。

これでブログがもっと華やかになります。

余談ですが、今日は私が1日音楽をかけました。

いつもかける時はおすすめにある2022ヒットベストみたいなプレイリストを流しているのですが、今日は私の普段聞いているプレイリストを流させていただきました。笑

多分WOWNのみなさんも流すとき、有名なプレイリストを流しているのではないのかなと思っています。

ちょっと恥ずかしいと思いながらも、口笛を奏でている音が聞こえてきたので楽しく仕事できました😂

ありがとうございます！

今日もお疲れさまでした。明日もよろしくお願いします！