Chromeブラウザの検証モードでヘッダ部分を調べる

昨日断念したヘッダ画像の挿入ですが、もう一度設定して、どのような設定になっているのかを、Google Chrome の検証モードを使用して確認していきます。

検証モードを起動するには、Chromeブラウザ上で確認したいページの任意の場所で、マウスを右クリックします。

メニューが表示されるので、一番下の「検証」を選択します。

ページが左右に分かれて、左側に今まで見ていたページ、右側にHTMLやCSSのコードが表示されています。

マウスを動かすたびに、どこかがチラチラ変化して油断ならないページのようで身構えてしまいます。

先ず、右側のコードが表示されている部分の左上の、「四角に矢印」のアイコンをクリックします。

クリックすると青くなります。

この「四角に矢印」のアイコンが青色のときに、左側のWEBページが表示されている側で、スタイルシートを確認したい要素にマウスカーソルを移動させてクリックします。

実際にタイトル文字部分でクリックしてみます。選択している部分の色が変わり、どこを選択しているのかがハッキリとわかります。

クリックすると、

1. 「四角に矢印」のアイコンの青色が消え、元の灰色に戻る。
2. 選択した部分に該当するHTMLコードに色が付く。
3. Stylesの欄に該当部分のCSSコードが表示。

CSS部分を拡大してみると

.header-image-enable #blog-title #title a {
color: #fff;
-moz-text-shadow: 0 0 20px #000;
-webkit-text-shadow: 0 0 20px #000;
text-shadow: 0 0 20px #000;
}

--------------------

color: #fff; で、文字列を白くして、text-shadow: で、文字列に黒い影を付けています。

このパラメタは、変更して影響をリアルタイムで確認することができます。実際のページが変更されるわけでなく、検証モードで確認中のページのみ。

また逆に、右側ページのHTMLの各要素をクリックすると、左側ページのプレビュー上での該当する範囲に色が付き、CSSも表示されます。

そういうわけで、この検証モードで確認しつつ、ヘッダ部分の画像調整をしていきたいと思います。