CSSカスタマイズの必須ツール！Chrome「検証ツール」の使い方の基本

こんにちは。岐阜の拠点から、今日もWeb制作とブログ運営のリアルな情報をお届けする当ブログです。

記事を書き進める中で「ここの文字の色を変えたい」「この見出しのデザインを少し調整したい」といった悩みが出てきていませんか？

WordPressには「追加CSS」という機能があり、そこへCSSのコードを貼ることでデザインをカスタマイズできます。しかし、初心者がいきなりコードを書くのは崩れるリスクもあり怖いはずです。

今回は、Web制作の現場でエンジニアが100%毎日使っている、安全で便利なChromeの「検証ツール（DevTools）」の使い方を解説します。これを使えば、ブログを一切壊さずにデザイン変更をテストでき、反映すべきコードが瞬時に分かります。

なぜCSSカスタマイズに「検証ツール」が必要なのか？

WordPressテーマのデザインはCSSで作られています。例えば「見出し2（H2）」をデザインしたい場合、そのH2に対してCSSが適用されています。しかし、初心者がいきなり「追加CSS」に h2 { color: red; } と書いても、テーマの優先順位（スペシフィティ）によっては反映されなかったり、テーマのクラス名が h2.my-theme-heading のようになっていたりすると、うまく機能しません。

検証ツールが必要な理由は2つです。

【図解】検証ツールで変更箇所を探す方法

では、実際にChromeブラウザを使って検証ツールを使ってみましょう。（※Google Chromeが必要です）。

1. カスタマイズしたい場所で右クリック：デザインを変えたい要素（ここでは「見出し2」を例にします）の上にマウスカーソルを乗せ、右クリックをして「検証」をクリックします。
2. 検証ツールが立ち上がる：画面の右側または下側に、複雑なコードが表示されたウィンドウ（検証ツール）が立ち上がります。左側の「Elements」タブにはHTML構造が、右側の「Styles」タブにはその要素に適用されているCSSが表示されています。
3. クラス名を特定する：Stylesタブの上部にある H2.○○ や .○○ と書かれている部分が、その要素に付けられたCSSのクラス名です。当ブログの記事なら、例えば見出し2には .post h2 といったクラスが適用されているのが確認できます。

検証ツールでデザインをテストし、追加CSSへ反映させる流れ

クラス名を特定したら、検証ツール上で安全にデザイン変更をテストします。

1. 検証ツール上でCSSを変更してみる

Stylesタブの中にある既存のCSSプロパティ（例：color: #333;）をクリックし、値を red（赤）などに書き換えてみましょう。瞬時にブログ画面の見出しの色が赤に変わります。（この変更はあなたにしか見えておらず、ページをリロードすれば元に戻ります）。

2. うまくいったコードをコピペする

デザインが決まったら、検証ツールのStylesタブの中から、自分で変更を加えたCSSの塊（セレクタとプロパティ全体）をコピーします。

/* これをコピー */
.post h2 {
    color: red; /* ここを変更した */
}

3. WordPressの「追加CSS」にペーストする

WordPressのダッシュボードに戻り、「外観」＞「カスタマイズ」＞「追加CSS」を開きます。テーマ（SWELLなど）の既存の追加CSSの下に、先ほどコピーしたコードをペースト（貼り付け）して「公開」をクリックします。これで、ブログ全体に安全にカスタマイズが反映されます。

まとめ：検証ツールはカスタマイズの「砂場」

検証ツールは、コードを書く前の安全な「砂場」です。ここで十分にテストしてから本番の追加CSSに貼ることで、初心者でも崩れることなく、プロ並みのカスタマイズが可能になります。今日からぜひ、検証ツールを使ってブログへの愛着を深めていきましょう！