今回は、前回説明した意味構造と見た目についてです。
前回の記事の見出し「昔のWebサイト」の部分が、どういう意味構造の中にあるものなのか、そして何故あのような見た目になったのかを説明します。
ソース表示
普通のブラウザには、見ているWebページのソースを表示する機能がついています。この機能を使うと、HTMLのソースを見ることができます。
しかし、もっと簡単に見やすく構造を見ることができるソフトがあります。
FireFox というブラウザにFireBugという拡張機能を使う方法もありますが、今回はGoogle Chrome というソフトを使います。
要素の検証
Google Chrome で前回の記事を開き、例えば「昔のWebサイト」の部分で右クリック→「要素の検証」を選ぶと、Developer Tool が開きます。
Developer Tool
画面の左側でHTMLの構造が分かります。
これによると、「昔のWebサイト」の部分は、html → body → div class=”Main” → div class=”Sheet-body” → div class=”content” → div class=”Post” → div class=”Post-body” → div class=”Post-inner article” → div class=”PostContent” → h3 という構造の中にある文字列だということが分かります（おおまかな情報は画面の下1行にも表示されます）。
そして、画面の右側で、その部分に影響を及ぼしているスタイル（見た目の定義）が分かります。
どのCSSファイルに書いてある定義が、どのようなものであるかが書いてあります。今回の例では h3 に影響を与えているCSSの記述は3個所あるようです。
それらの記述がすべて影響を与えるわけですが、同じ事柄についての定義は、優先度の高いものが使われます。今回の例では、一番下の h3 (user agent stylesheet) の font-size:1.17em; と font-weight:bold; には横線が引かれています。これは、これらより上のファイルで指定されている font-size:19px; と font-weight:normal; が効いている、ということです。
他の値については割愛しますが、ひとつだけ。一番上に color:rgb(104,108,71) とあります。これが文字の色です。
つまり、文字の色を変えたければ、このスタイルが書かれているCSSファイル（マウスを 右のほうの /wordpress/wp-content/… に合わせるとファイル名が表示されます）の、”h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover” についての color の指定を変えてやればいいのです。
ちなみに、該当部分はこのように書かれています。
h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover
{
font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
font-size: 19px;
color: #686C47;
}
関係ありそうな記事
WordPress研修 の記事