ブログのデザイン変更とCSSの編集が簡単にできるGoogle Chromeの「検証」ツール

Google Chromeの「検証（デベロッパー ツール）」の紹介です。

このツールを使えば、ブログの「余白を広げたい」「文字の大きさや色を変更したい」「背景を変更したい」そんな時、WEB画面でプレビューを確認しながらCSSを編集することができます。

使い方

Google Chromeでこのページを開いて、実際にCSSを編集してみて下さい。

検証ツールの起動

起動方法は3つあります（使いやすい方法で起動させて下さい）。

検証ツール画面の見方

CSSを編集する時は、主に下記の3つを使います。

検証ツール画面の見方

編集したい箇所の選択

画面左上のカーソルアイコンをクリックし、編集したい箇所をクリックします。

今回は見出し「h2」を選択してみます。

編集したい箇所のCSSが表示される

編集したい箇所にカーソルを載せ、右クリックから「検証」ツールを起動させることもできます。

他にも、HTMLソースから選択することもできます。

ちなみに、ここで表示されるCSSの要素は、上から優先度の高い順に並んでいるので、編集する時はできるだけ上に表示されている要素を編集するのが基本です。

打ち消し線で消されているものは、スタイルの上書き等によって適用されていないスタイルです。

CSSを編集する

変更したい要素の値を編集します。

今回は見出し「h2」のCSSが表示されているはずですから、試しに「.entry-content h2」の要素「font-size: 1.25em;」の値を「font-size: 2.25em;」に変更してみて下さい。

すると、WEB画面上の見出し「h2」も大きくなったのが分かるはずです。

CSSを編集するとWEB画面上でもスタイルが変更される

他にも、新しく要素を追加することができますし、チェックを外して要素を無効化させることもできます（優先度の低かった他のスタイルが適用される可能性もある）。

ちなみに、この編集は現在閲覧中の画面でのみ適用されているだけで、実際のCSSファイルが変更されている訳ではありません。再読み込みやページを移動するとリセットされます。

CSSの変更を保存する

変更を適用させたい時は、スタイルシートを編集します。

WordPressの場合は、変更した箇所をコピーして「スタイルシートに記述する」及び「カスタマイズの追加CSSに記述する」だけです。例えば、先程の見出し「h2」のフォントの大きさの変更なら、下記の様に記述します（変更した箇所だけでOK）。

上書きされない時は、優先度の低い要素を編集している可能性があります（優先度の高いスタイルに打ち消されている）。どうしても適用されない場合は、「!important」を使います。

親テーマやプラグインのスタイルシートを直接編集する方法もありますが、アップデートの際に初期化されてしまうので、僕は子テーマで上書きする方法をとっています。

最後に

今回紹介したGoogle Chromeの「検証（デベロッパー ツール）」使えば、自サイトのCSS編集だけでなく、他人のサイトのデザインを参考にすることもできます。とにかく便利の一言です。

デザインを変更したい時のCSS編集にはかかせないツールです。