WordPressと直接的に関係があるわけではありませんが、テーマのカスタマイズに関することで、「ここのフォントサイズを変更したい」「余白をもう少し狭くしたい」といったご質問をいただくことがあります。
以前はこうした確認に、Firefoxアドオンの「Firebug」がよく使われていましたが、Firebugは2017年に開発が終了しており、現在は入手・利用ができません。ですが安心してください。今ではFirebugが持っていた機能は、Chrome・Firefoxなど主要ブラウザに標準搭載されている「デベロッパーツール（開発者ツール）」で同じように、むしろより手軽に使うことができます。
本記事では、ブラウザ標準の開発者ツールを使って、Firebugと同じように「該当箇所のCSSを確認し、その場で値を変更してテストする」方法をご紹介します。
開発者ツールを起動する
Google Chromeの場合、確認したい要素の上で右クリックし、「検証」を選択すると開発者ツールが起動します。Firefoxの場合も同様に、右クリックから「検証」（環境によっては「要素を調査」）を選ぶだけです。キーボードショートカットは、Windowsは F12 または Ctrl+Shift+I、Macは Cmd+Option+I で共通して起動できます。
カスタマイズしたい箇所のCSSを確認する
開発者ツール左上にある矢印アイコン（要素選択ツール）をクリックし、そのままページ上でカスタマイズしたい箇所をクリックすると、該当するHTMLとCSSが自動的にハイライトされます。該当箇所さえ分かれば、あとは値をお好みに変更するだけなので、Firebugのときと同じ感覚で直感的にCSSを確認できます。
ウェブサイトの構造（HTML）や適用されているスタイル（CSS）を確認するには、デベロッパーツールが便利です。構造がわかれば、一部を編集して簡単にテスト・検証することも可能です。 そこで当記事では、Google Chromeのデベロッパーツールの基本的な使い方を解説いたします。 基本的な...
その場で値を変更してテストする
Firebugと同じように、開発者ツール上でCSSの値を直接書き換えると、ページに即座に反映されます。たとえばフォントサイズを 11px → 15px に変更すれば、その場で見た目の変化を確認できます。この変更はあくまでブラウザ上の一時的なプレビューなので、ページを再読み込みすれば元に戻ります。テストして問題なければ、実際のCSSファイルやWordPressのカスタマイザーに反映させましょう。
また、右クリックから新しいプロパティやクラスを追加することも可能です。専門知識がなくても、感覚的にカスタマイズの検証ができる点は、Firebugの頃と変わりません。
まとめ
Firebugはすでに開発が終了していますが、同じ役割はブラウザ標準の開発者ツールが十分に果たしてくれます。追加のインストールも不要なので、WordPressサイトのちょっとしたカスタマイズを検討する際は、ぜひ開発者ツールを活用してみてください。
コメント（1件）