[ WordPress 既存テーマ ] 検証ツールを用いて、CSSを独自でカスタマイズする方法

本記事では、WordPressの既存テーマを用いたコードカスタマイズ(今回は主にCSSデザイン)の際に、ブラウザの検証ツールを用いて現状で要素に割り当てられているCSSを確認/修正していく方法を各種ブラウザ( Safari , Google Chrome …)における検証ツールの開き方に加えてご紹介させて頂きます。

 

今回使用するテーマは、Xeory Extension です。
公式ページから詳細の確認及びダウンロードが可能ですので、　初めて聞く方は、是非確認してみてください✨

作業内容

※ 本記事で使用している子テーマが必要な場合は、コメントを頂くかTwitterよりDMして頂ければと思います。 zipファイルでお渡しします。

現状、以下のようにヘッダーの背景が緑です。 Xeoryは、いくつかの色を選択できますが、それらを選ばずに背景を水色(skyblue)に設定しようと思います。

検証ツールの開き方

検証ツールを使うにしても.. それぞれ開き方が違いますので、まずは、ブラウザごとに確認してみましょう。

Google Chrome

画面上にて、右クリックをして頂くとメニューが出てきますので、一番下にある 「検証」 をクリックすると、開くことが出来ます。
(Windows, Mac どちらでも同様の方法で出来ます。)

⬇︎  右側に表示されれば、OKです。

次のショートカットキーでも、開くことが可能です。

Windows ： ［F12］キーもしくは、［Ctrl］＋［Shift］＋［I］キー
Mac : ［option］＋［command］＋［I］キー

Safari

Safariは、　Macのみになります。まずは、環境設定を行う必要が御座いますので、以下の手順で作業を進めましょう。

環境設定が終わりましたら、検証ツールを開いてみましょう。
画面上で右クリック ⇨ 要素の詳細を表示 を選択することで開くことが出来ます。

デフォルトでは、画面の下部分に表示されますが、黄色枠の箇所で右に寄せたり、画面の分割も行うこともできますので、試してみてください。

Microsoft Edge

Microsoft Edgeは、Windowsは勿論、Macでもインストールすることができるブラウザになります。 どちらも環境設定を行うことなく、ブラウザ上で右クリック ⇨ メニューから「開発者ツールで調査する」を選択することで、検証ツールを開くことが可能です。
※ Windowsにて確認しているため、別ページを使用しています。

⬇︎  右側に表示されれば、OKです。

Windowsに限定されますが、F12キーをクリックすることでも検証ツールを開くことが可能です。
はじめは、以下のように表示されますが、次回から表示させたくない場合は、「決定を記憶する」にチェックをしましょう。

「DevToolsを開く」をクリックすることで、検証ツールを開くことが出来ます。

Fire Fox

Fire FoxもWindowsは勿論、Macでもインストールすることができるブラウザになります。 どちらも環境設定を行うことなく、ブラウザ上で右クリック ⇨ メニューから「調査」を選択することで、検証ツールを開くことが可能です。
※ Windowsにて確認しているため、別ページを使用しています。

⬇︎  右側に表示されれば、OKです。

こちらもMicrosoft Edgeと同様にF12キーをクリックすることでも検証ツールを開くことが可能です。

ヘッダーのCSSを確認/修正

CSSの確認/修正について進めていく上で、今回は、多く用いられているGoogle Chromeを用いていきます。以下の順番で一つずつみていきましょう。

今回は、ヘッダーの背景を変えてみたいので、ヘッダー部分の要素を選択します。
すると、以下の画像のように選択した要素のCSSを確認することが出来ます。

⬇︎  該当箇所のCSSを確認

表示されたCSSを確認してみると、背景色を適用させるためのプロパティであるbackground-colorが見つかりましたので、
ここで間違いないか試しに色をredに変更して、確かめてみます。値を検証ツール上のCSSの値をクリックすると、変更が出来るようになります。
以下のように、赤に変わりましたので、ここを変更すれば背景の色を変えられることが分かりました。

最後に、テーマのstyle.cssで変更したい要素がセレクタ(idやclass, 要素など)を検索し、背景色(background-color)に関するプロパティの値を修正します。

① 値を変更するセレクタを検索する
② 先程、検証ツールで確認したものと間違いないか確認する

変更するものとして、間違いないようであれば、以下の画像のようにbackrground-colorプロパティの値をskyblueに変更したのちに、反映されているかを確認します。

⬇︎  ブラウザを更新し、ヘッダーの背景色がskyblueになっていれば修正完了です。

今回は、Google Chromeにて、Xeoryというテーマを例に作業を行ってきましたが、大抵の既存テーマで同様に検証ツールを使用し、修正/変更を行いたい要素のCSSを調べ、style.cssで該当するセレクタを検索/値の修正を行う方法で、独自のデザインに変更することが可能になりますので、参考になればと思います。勿論、他のブラウザ/テーマでも同様に作業を行うことが可能です。

まとめ