Platinum color サイトのテンプレートは、無料配布中の「WHITE CUSTOM Mk2」テーマをカスタマイズしたものです。
エントリータイトルの背景画像を、ほぼそのまま利用しているため気づかれた方も多いでしょう。
以前のＨＰではWordPress用「wp.Vicuna Ext」を利用させて頂いていましたが
ビジネス調の少し堅い雰囲気のデザインになっていたため気分を新たにリニューアルしてみました。

「WHITE CUSTOM Mk2」と、Platinum color 新ホームページテンプレートの大きな違いは２カ所です。
・ヘッダー画像をブラウザ横幅全体に表示すること。
・ページをセンタリングせず、left配置（左寄せ）すること。

その他にもβ・γカラムの表示位置をずらしていたり、ヘッダー部分にメニュー表示されていたりしますが
これらは微調整の範囲でしょう。

一番の違いはページの横幅全体にヘッダー領域が表示されていることでカスタマイズポイントは単純そのもの。
WHITE CUSTOM Mk2テンプレートではページ内部に定義しているヘッダー領域の要素を
ページ外部に記述するだけでサイトのイメージが大きく変わります。

具体的にはWHITE CUSTOM Mk2テンプレートのheader.phpでは下記のようになっています。
※以後、半角「＜,＞」は誤動作の原因となるため全て全角「＜,＞」で表します。
　　・
　　・
＜/head＞
＜body＞
＜div id=”page”＞
＜div id=”header”＞
＜div id=”headerimg”＞
　　・
　　・

「body」の始まりのあとすぐにページの定義である「page」が呼び出されヘッダー部分の「header」と
ヘッダー画像等が格納される「headerimg」が呼び出されています。

しかし、Platinum color サイトのテンプレートでは下記のようにカスタマイズ。
　　・
　　・
＜body＞
＜div id=”header”＞
＜div id=”headerimg”＞
＜/div＞
＜/div＞
　　・
　　・
＜div id=”page”＞
　　・
　　・

「header」関連の処理が終わったあとにページ全体（α・β・γのカラムとフッター）を格納する「page」が
呼び出されて表示を行います。

つまり、ヘッダー関連は上部で自由に表示させ、本来のサイト表示である「page」を規律正しくまとめて表示
させることが「WHITE CUSTOM Mk2」から「Platinum color サイト」新ホームページへとカスタマイズする
際の要点と言うことになります。

残るはカスタマイズポイントはleft配置です。
こちらは単純とは言えず幾つか修正部分がありますが、要点はページをヘッダー画像に重なるように配置させること。

ます、WHITE CUSTOM Mk2テンプレートの「style.css」では下記のようになっています。
※以後、直接関係ないタグは未記載

#page {
margin: 10px auto;
}

上下に10ピクセル分の余白を取って左右は自動的に配置。

そして、Platinum color サイトでは下記のようにカスタマイズされています。

#page {
margin: -340px auto 0px 0px;
float:left;
}
ヘッダーの背景画像と重ねて表示させるため上に、マージン設定で340ピクセル分表示下垂し位置を上げ
右の余白は自動配置、左の余白はゼロとしています。
IE7・8及びFirefox、Google Chrome等ではマージン設定のみで左寄せ配置が行えました。
しかし、IE6ではセンタリングされたままになります。
そこで「float:left」を行って強制的に左配置置にしています。

以上が主なカスタマイズポイントです。

その他の修正点としては右上のLED点滅表示（headerled）を消したり、β・γカラムの背景画像定義を
消すことでしょうか。

細かな部分ではいろいろ修正を行っていますが要点は以上のようになります。

無料ブログや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」の指定をまとめて置換する
場合にも多用する技です。

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