自分方位研究所

日々の活動記録

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

 

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

 

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

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

f:id:k-emu:20210210234538j:plain

 

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

f:id:k-emu:20210211173041j:plain

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

 

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

f:id:k-emu:20210211175515j:plain

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

f:id:k-emu:20210211175809j:plain

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

 

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

f:id:k-emu:20210211182551j:plain

クリックすると、

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

f:id:k-emu:20210211183315j:plain

CSS部分を拡大してみると

f:id:k-emu:20210211184307j:plain

.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も表示されます。

 

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