無料ブログやMovableType・WordPressのカスタマイズではスタイルシート（CSS）の変更・調整が主な作業であり、センスの見せ所です。

しかし、カスタマイズを初めて行う方や、熟れない方は、スタイルシートのどこをどう弄れば良いのか、目的とする部分がどこに書かれているのか・・何もかもが全く判らない謎のアルファベットの集合体がスタイルシートの印象です。

DIVなどで定義される要素は名前を付けて指定範囲を認識しているわけですが
「/* 注釈*/」はあるにせよ、熟れていないとスタイルシート上のどの名前が表示と対応しているのか判別できません。

通常は、ブラウザで表示させるソースを見てDIV要素の名前を把握し、スタイルシートの該当部分を変更します。
ところが、初心者の方はHTMLソース上から定義されたDIV部分を探すこともままならない状況・・。
そんなときに紹介していたのが以下で解説する２つの方法です。

・手間が掛からなくて簡単な方法は「Google Chorme」を利用する方法です。
Google Chormeは、Google社のタブブラウザでシンプルさと軽さで人気です。
しかし、使いやすさだけでなく、右クリックメニューにある「要素の検証」がGoogle Chormeの特徴でありスタイルシートカスタマイズの強力な味方とになってくれます。

カスタマイズを行いたいサイトを表示させ右クリックメニューを開き「要素の検証」を表示させて
みてください。
<div id=･･>タグで定義されたコンテナがブロックごとに表示され、右向き▲をクリックする毎に
より深いレベルのブロックを表示しつつも、Chormeブラウザ上に半透明のカラーで色づけされたdivの定期範囲を示してくれます。

つまり、Google Chormeのカラーブロック表示と要素検証を利用すればもっとも下位で定義された<div id=･･>タグが視覚的に発見できますし、要素の検証にはスタイルシートに記述された値も表示されます。＊複数のcssがある場合は、どのURLにあるcssかのかも判ります。

また、Google Chormeは「margin」で定義された透明な範囲であってもカラーブロックで視覚的に把握できるため２カラム・３カラムの調整には大いに役立つツールです。

・原始的な方法ですが画面をキャプチャして色から探す方法は初心者でも簡単です。
ブラウザでカスタマイズしたいサイトを表示させ、「Ctrl+PlintScreen」キーを押し
画像レタッチツールに貼り付けて、該当部分の色を取得したのちスタイルシートで
色の値を検索してみたください。

ちょっとした色変更にしか使えない技かもしれませんが、１ドットの枠を描かせる値はどこなのか調べたり、ソースを見たりGoogle Chormeを起動するのも面倒なときには、かなり役立つ技です。

カスタマイズを行う際はフォトショップ等のレタッチソフトで背景作成と平行して行うことが
多いのですが、色情報をもとにスタイルシートから該当部分を探せば短時間で発見できるため
利用する機会は多いと言えますし、「background」や「border」の指定をまとめて置換する
場合にも多用する技です。

もちろん、同じ色指定を複数定義されていたなら意味のない方法ですが、状況によっては
かなり便利なので覚えておくと良いでしょう。
要素の名前はソースを見て探すのが一番確実ではありますが、「原因不明なとき」面倒なとき」
「なにもかもが訳わからないとき」には、上記の方法を併用すればスタイルシートから目的の
記述を探し出すことができるでしょう。
と言っても・・・結局は慣れなのですが・・。