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

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

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

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

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

  • 記事が読みやすくなる
  • 見出しにキーワードを適切に配置することでSEO対策になり、検索が上位になる

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

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

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

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

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

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

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

→ https://wpcustom.clmbs.jp/customize/wordpress-appearance-customize-points/

追加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にあたる部分だけが装飾されたのがわかります。

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

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

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

【初心者向け】WordPress5.0の追加cssで見出し装飾する方法」への1件のフィードバック

コメントは受け付けていません。