ページソースを見て、ブログのCSSを学ぶ
本日は、少し目線を変えてみます。
(ある程度、タグとCSSの知識が必要かもしれません。)
ブログをカスタマイズするときにCSSの編集をします。
ところで、このCSSはブログ内のどこで使われているのでしょうか?
とても気になったので、ページソースを見てみることにしました。
わからなかったところが少しずつわかってきました。
今見ている、このページの中で右クリックをして「ソースの表示」をクリックします。
(写真やリンクの上で右クリックしてはいけませんよ。)
すると、新しくウィンドウが立ち上がって、
<!doctype html>
で始まるタグが表示されたと思います。
順番に見ていくと、18行目の
10017101872.css
というのが、いつも自分でカスタマイズしているCSSになります。
数字は人によって変わります。この数字は私用です。
そのまま進んで、42行目からが実際に表示に関連するところになります。
すぐに、CSSの読み込みがあります。下の3行です。
<div class="skinBody">
<div class="skinBody2">
<div class="skinBody3">
ここでは、自分で編集するCSSの
(3-1) ボディ (全体)
にある
.skinBody
.skinBody2
.skinBody3
に記述した内容を読み取って反映させます。
このようにCSSを読み込む場所は、基本的に
class="スタイル名"
となっています。
なので、ソース内のclassで始まる場所を見ていけば、
自分でカスタマイズしたCSSが使われている場所がわかります。
余談ですが、1つの記事は
<article>で始まって</article>で終わっています。
ソースを全部見れば、どこでCSSのスタイルを使っているかわかりますし、
反対に言えば、決まっているスタイルを変更することも可能になりますね。
その他、拡張
に新しいスタイルを作るときも、他にどんなスタイルがあるか知っていると
作業が楽になります。
私も、ソースは印刷して必要なところはチェックしてありますよ。( ̄▽+ ̄*)