WordPress講座(個別相談)

サイトで使うh1やh2の見出しをおしゃれなデザインにしたいというニーズは多いです。また、おしゃれかどうかは別にして、使用中のテーマとは違う見出しデザインに変えたいこともあります。

見出しのデザインをカスタマイズしたい

見出しのデザインをカスタマイズしたい

そんなわけでインターネットでも見出しデザインのサンプルCSSが多数見つかりますが、そのまま子テーマのstyle.cssに入力しても反映されないかもしれません。何らかの修正が必要です。

ここでは、インターネットで見つけた見出しのサンプルCSSを自分のサイトで使うときに必要な修正ポイントを説明します。

スポンサーリンク

ネット検索した見出しのCSSが反映されない

ほとんどのテーマでは見出しにスタイルが設定されています。たとえば、BizVektorでは次のような感じですが、この見出しのデザインをカスタマイズしたいと思うこともあります。

見出しのスタイルをカスタマイズしたい

見出しのスタイルをカスタマイズしたい

サンプルのコードを見つけるため、「見出し CSS」などでネット検索すると、次のようなサイトが見つかります。

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

見出しを装飾するCSSのサンプルコードが提供されています。このような素晴らしいサイトに感謝しつつ、あなたのサイトにピッタリのサンプルを探してみましょう。「コードを表示」をクリックするとCSSが表示されます。

参考にしたいコードを表示

参考にしたいコードを表示

表示されたCSSをコピーさせていただきましょう。

CSSをコピー

CSSをコピー

コピーしたCSSを子テーマのstyle.cssなどにペーストします。

子テーマのstyle.cssにペースト

子テーマのstyle.cssにペースト

ただし、コードを保存してもCSSは反映されないでしょう。

入力したCSSが反映されない

入力したCSSが反映されない

「おかしいな?」と思うかもしれませんが、おかしくはありません。インターネットで見つけたCSSはほとんどの場合、WordPressで使うための修正が必要だということです。

見出しのサンプルCSSは修正が必要

インターネットで見つけたコードは「サンプルコード」なので、ほとんどの場合は何かしらの修正が必要です。この例でもカスタマイズしたい見出しは「見出し2」(h2)ですが、サンプルコードは「h1」になっているので、少なくとも「h1」を「h2」に修正する必要があります。

少なくとも「h1」を「h2」に修正する必要がある

少なくとも「h1」を「h2」に修正する必要がある

この修正だけでうまくいく場合もありますが、このような簡単な修正ではうまくいかないかもしれません。その典型的な原因は「CSSの優先度」です。

CSSが反映されない原因No.1は「優先度」

WordPressでCSSをカスタマイズするには、優先度のチェックが必要です。既存のCSSより優先度が低いスタイルを記述しても反映されません。

優先度をチェックするため、ブラウザで見出しあたりを右クリックして「要素を調査」(「検証」)メニューを実行してみましょう。

「要素を調査」(検証)をクリック

「要素を調査」(検証)をクリック

画面下部や右側にウィンドウが開いて現在の画面状況を確認できます。わかりづらいかもしれませんが、ブラウザ画面(1)、HTML(2)、CSS(3)の3つが表示されます。

適用されているCSSをチェック

適用されているCSSをチェック

入力したCSSが反映されない場合、右側のCSS画面(3)を下にスクロールしてみましょう。さきほど入力したCSSが見つかるはずです。

入力したCSSが見つかる

入力したCSSが見つかるが打ち消されている(反映されていない)

打ち消し線で消されていることに注目してください。これは、入力したCSSの優先度が低いため反映されてないことを示しています。

優先度の高いCSSを探して画面を上にスクロールしてみましょう。見出し2(h2)に対して実際に適用されている(打ち消されていない)CSSが見つかります。

h2に対する優先度の高いCSSが見つかる

h2に対する優先度の高いCSSが見つかる(こちらが反映されている)

このCSSで注目すべきは、見出しに対して「#content h2」(1)と指定されている点です。「h2」に対するCSSよりも優先されます。実際、1つ前の画像では打ち消されていた「background」が打ち消されていない(2)ので、このCSSが優先されていることがわかります。

話をまとめると、優先度が高いコードが存在するため、インターネットで見つけて子テーマのstyle.cssにコピーペーストしたサンプルコードが反映されないのです。

「優先度って何?」が疑問かもしれませんが、よくわからなければ、「具体的に指定した方が優先される」とだけ覚えておきましょう。「h2」よりも「#content h2」が優先されます。

CSSの優先度について詳しくは以下のページも参考にしてください。
CSSの変更が反映されないときはセレクタの優先順位をチェック

ただし、「#content h2」はBizVektorの例です。他のテーマでは「.entry h2」だったり「.post h2」だったりしますが、具体的な記述は、ここまで見てきたCSS画面が参考になります。その中で打ち消されていないスタイルを探せば大丈夫です。

最も優先度が高いスタイルを調べる

最も優先度が高いスタイルを調べる

打ち消されていないCSSを見つけると、ここでは、「#content h2」になっているので、これを参考にサンプルコードの「h2」を「#content h2」に変更してみます。

「h2」を「#content h2」に変更

「h2」を「#content h2」に変更

少し違和感がありますが背景色と下線の設定は反映されるようになりました。

一部のスタイルが反映される

一部のスタイルが反映される

既存のスタイルを無効に

CSSは部分的に反映されましたが、サンプルコードに含まれない「上の枠線」が表示されています。既存のスタイルが残っているためです。CSS画面でチェックしてみると、見出しに対して「border-top」が指定されていることがわかります。

既存のスタイルが有効になっている

既存のスタイルが有効になっている

問題なければこのままでも大丈夫ですが、消したければ既存のスタイルを無効にする必要があります。この例では上・左・右の枠線を「none」に設定して消しています。

既存のスタイルを無効に

既存のスタイルを無効に

これで、子テーマのstyle.cssに入力した見出しスタイルが反映されるようになります。

見出しスタイルの設定完了

見出しスタイルの設定完了

テーマによっては、まだ既存スタイルが残っている場合もあるので必要に応じて無効にしてください。

まとめ

このように、インターネットで見つけた見出しなどのスタイルを自分のサイトに反映するには、少し工夫が必要です。特に優先度の調整は必要かもしれません。CSSの修正は難しいかもしれませんが、ひとまず「詳しく指定した方が優先される」という仕組みを覚えておきましょう。少しずつうまくいくようになるでしょう。見出しに限らず、さまざまなパーツでチャレンジしてみてください。よくわからなければWordPress個別サポートでサポートします。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
カスタマイズがうまくいかないときは
お急ぎのときはWordPressメールサポートで対応します。ご活用ください。
wordpress講座受講予約
WordPress講座の問い合わせ先

関連記事

スポンサーリンク