【初心者向け】WordPress5.0の追加cssで見出し装飾する方法

さてさて、この記事でお分かりの通り非常に読みづらい我がサイト。

初めて！スマホから投稿します

読みやすくするには、まずは見出しの装飾ですね。

現在使用しているテーマでは、見出し1と見出し2の違いは文字サイズだけなので個人的には非常に読みづらいなーと思います

ちなみに、見出しは2つの点で非常に重要です。

読みやすく＋検索が上位の記事、つまり、よく読まれる記事となりますね。

実際ライティングの仕事をしていても、SEO対策のために見出しの数と、見出しに使用するキーワードは指定されます。

装飾、、、といえばcssですね。htmlかじった程度なので使いこなせていません。

実は使いこなせていなくても装飾用のcssコードはコピペすれば使えます！というサイトが複数あります。

CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選

しかし、コピペだけとはいえどこにコピペするの、、、？というのが初心者

WordPress5.0での見出しの装飾について詳しく解説していきます。

まずは参考にしたサイトはこちら

追加cssを使いこなそう！

まずは「外観」→「カスタマイズ」→「追加css」

ここを選択しましょう。

すると、cssのコードが書ける画面が出てきます。

横にはサイトのプレビューが出て、公開ボタンを押さない限りはテスト環境として使用できます。

ここに、先ほどのサイトからお借りしたh2 (見出し2)の装飾コードをコピペします。

使用したコードこちら↓

h2 {/*線の種類（二重線）太さ色*/border-bottom: double 5px #FFC778;}

オレンジ色の二重線を引くことができるcssコードです。

これを、左側の追加cssにコピペすると、、、？

うまく装飾できました！

ここで、検証して見ましょう。

Google Chromeを使用すると、文字を選択して右クリックで検証することができます。

こんな感じ

検証ボタンをおすと、右端にコードが現れます。

拡大すると、、、

下側のStyleという部分に以下のコードが読み込まれているのがわかります。

h2 {/*線の種類（二重線）太さ色*/border-bottom: double 5px #FFC778;}

複数のcssコードが書かれていますが、cssの優先順位は高い方が反映されます。

さて、h2でcssを追加したよくみると、サイドバーの検索とかカテゴリーもオレンジの二重線がついていますね。

こちらは違うデザインにしたい、という場合はidやクラスを確認します。

同じ様に選択して検証。

すると下の様な画面が出て、

拡大すると、、、

h2 classがwidget-titleだと記載されていますね。

追加cssに以下の様にクラスを書き込むことで、文章内の見出しと分けて指定することができます。

以下の様に書き直すと、、

h2.widget-title {/*線の種類（二重線）太さ 色*/border-bottom: double 5px #FFC778;}

文章内の見出しではなく、サイドのh2 widget-titleにあたる部分だけが装飾されたのがわかります。

このようにして、指定することができます！

文字の装飾の仕方は色々な方法がネットに出ていて、混乱しました。

長くなったのでとりあえずこのあたりで！