ページソースを見て、ブログの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のスタイルを使っているかわかりますし、

反対に言えば、決まっているスタイルを変更することも可能になりますね。

その他、拡張

に新しいスタイルを作るときも、他にどんなスタイルがあるか知っていると

作業が楽になります。

私も、ソースは印刷して必要なところはチェックしてありますよ。( ̄▽+ ̄*)

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA