WordPressのテーマをカスタマイズしていると、
「文字を大きくしたい」
「ボタンの位置を変えたい」
「余白を調整したい」
といった場面が出てきます。
しかし、CSSファイルを直接編集しても、どのコードがどこに影響しているのか分からず困ることがあります。
そんな時に役立つのがブラウザのDevToolsです。
DevToolsを使うと、画面上の要素にどのCSSが適用されているのか確認したり、一時的にスタイルを変更して表示を試したりできます。
今回はDevToolsを使ってCSSを調査し、カスタマイズの当たりを付ける方法を確認していきます。
Dev toolsの使い方
ブラウザでページを開いたときに、右側のその他のツールの中にデベロッパーツールや開発者ツールという項目があります。これを開くとソースコードが表示されて、該当するHTMLの部分が色で確認できます。今回はナビゲーションメニューの背景色を変更したかったのですが、該当する範囲のクラスはnavi-menu-contentでした。
追加CSSによる変更
ワードプレスの管理画面の外観/カスタマイズの中に追加CSSという項目があります。ここでクラスとcssの内容を指定することで背景色を変更することができます。ただし、追加CSSの記入が増えていくとどこでCSSの指定をしているのか分かりにくくなるので、実際にcssを加えて画面に変化が出るかどうか確認する場所として使うのが良いと思います。変更されることが確認できたら実際のstyle.cssファイルに書き加えていくことで管理しやすいサイトになると思います。
①DevToolsでクラスの該当箇所を探す。
②追加CSSの画面で追加したいCSSを試す。
③想定通りにCSSが反映されることが確認できたら、実際のstyle.cssへ追記する。
【補足】CSSの優先度を理解しよう
DevToolsでCSSの変更箇所を把握したあとは、実際に style.css へ記述を追加していきます。
このときに重要になるのが、CSSの優先度の考え方です。
例えば、テーマ側で次のようなCSSが指定されていたとします。
.header .button {
color: red;
}
この場合、
.button {
color: blue;
}
と記述しても変更されないことがあります。
CSSの優先度は、簡単に考えると次のようになります。
IDセレクタ = 100点
クラスセレクタ = 10点
要素セレクタ = 1点
テーマ側のCSSは、
.header = 10点
.button = 10点
—————-
合計 = 20点
となります。
一方で、
.button
はクラスが1つだけなので10点です。
そのため、
.header .button = 20点
.button = 10点
となり、優先度で負けてしまいます。
このような場合は、テーマ側と同じように親要素から指定します。
.header .button {
color: blue;
}
これで両方とも20点になります。
同じ点数の場合は、後から読み込まれたCSSが優先されるため、通常は子テーマや追加したCSSが適用されるようになります。
CSSが反映されないときは、まずDevToolsでセレクタを確認し、優先度が足りているかを確認してみましょう。
