月別アーカイブ
検索

今回は、前回説明した意味構造と見た目についてです。

前回の記事の見出し「昔のWebサイト」の部分が、どういう意味構造の中にあるものなのか、そして何故あのような見た目になったのかを説明します。

ソース表示

普通のブラウザには、見ているWebページのソースを表示する機能がついています。この機能を使うと、HTMLのソースを見ることができます。

しかし、もっと簡単に見やすく構造を見ることができるソフトがあります。

FireFox というブラウザにFireBugという拡張機能を使う方法もありますが、今回はGoogle Chrome というソフトを使います。

要素の検証

Google Chrome で前回の記事を開き、例えば「昔のWebサイト」の部分で右クリック→「要素の検証」を選ぶと、Developer Tool が開きます。

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;
}

関係ありそうな記事

コメント