カスタマイズ小話「配布中のテンプレートをカスタマイズしてイメージ一新」

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

「WHITE CUSTOM Mk2」と、Platinum color 新ホームページテンプレートの大きな違いは2カ所です。
・ヘッダー画像をブラウザ横幅全体に表示すること。
・ページをセンタリングせず、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)を消したり、β・γカラムの背景画像定義を
消すことでしょうか。

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

コメントは受け付けていません。