CSS WordPress

WordPress のテーマを解析する。~ 画像を使ったヘッダーとフッター

2009年9月16日

よく以下の様な綺麗なヘッダーやフッターのテーマがある。

image

これは、WordPress 独自の話では無く、一般的な Webサイトで用いられる手法で、上記のヘッダーがそのまま画像ファイルである事が多い。ヘッダーの角が丸くなっていたり、グラディエーションがかかっているのは、単にそういう画像ファイルを貼り付けているためだ。

このテーマのイメージが入ってるディレクトリを覗いてみると、それっぽい画像が幾つかある。

image

この画像は、同じ大きさで作って差し替えると、全く違う好みのデザインのテーマを作ることができる。

image

このテーマの場合、ブログの右上の周辺を見ただけでも、ヘッダーを定義した①の部分、周りにグラーディーエーションをかけた②の部分、背景の③の部分。と幾つかのイメージファイルから構成されていた。

バックグラウンドの③の部分は、同じ色なので小さなイメージファイルを繰り返して表示させる事で表現できる。このテーマの場合は、bg.jpg と言うファイルを、body の中で、x軸方向に繰り返して表示させていた。

image

上記のファイルを、x軸方向に繰り替えす事で、背景を作り出している。画像のy軸方向にはグラディエーションをかけている。

body {
background:#BEC3C6 url(img/bg.jpg) repeat-x;

#BEC3C6 は、画像ファイルの下の側とマッチするネズミ色で、画像ファイルで埋め尽くされない部分(  y軸方向は画像ファイルの長さを超えた部分は、下地の色が出るので)をカバーしている。

①のヘッダー部分の画像は、以下の通りで、

image

CSS中では、header の中で画像を読み込んでいる。

#header {
background:url(img/header_footer.jpg) 0 0 no-repeat;
height:132px;

②の部分の画像は、①のヘッダーを挟み込む形の画像として作成され、①の画像と中心を合わせて重ね合わせれば、適切な配置になるように作られていた。グラディエーションは、ヘッダー周辺の一部だけなので、y軸方向の長さはそれほど、なかった。

image

CSS中では、center  top  (中央揃え、上揃え)が指定されている。

#wrap {
background:url(img/light.gif) center top no-repeat;
padding:20px 0;

-CSS, WordPress

Copyright© エンジニアの何でもメモ帳 , 2022 All Rights Reserved.