WordPressのデフォルトテーマ”default”をカスタマイズする(第1回)

ジラフィーstaffのイノマタです。
自社のBlogをWordPressで設置したついでに、テーマのカスタマイズもしちゃおうと思います。

一からテーマを作るのもアリですが、手っ取り早い方法として、インストール時にデフォルトとして入っているテーマのうち、default をカスタマイズして Giraffyテーマにしたいと思います。(決して手抜きでは…)

そんなわけで、今回は「タイトル画像の変更まで」をカスタマイズしたいと思います。

1：テーマをコピーする

まずは、新しく作るテーマを用意します。
/wp-contents/themes/ にある defaultフォルダ をコピー&ペーストします。
もちろん、ペーストしたフォルダの名前は変更します。

2：テーマの詳細を変更する

コピーした時点では、まったく同じテーマになっていますので、管理画面上ではどちらがコピーでどちらがオリジナルなのかがわかりません。
そのため、コピーしたテーマの style.css 上部にあるコメントの内容を書き換えます。

こんな感じで、書き換えて保存(もしくはアップロード)します。
すると、テーマの名前や詳細が変更されています。

3：タイトル画像を挿入する

タイトルはテキストではなく、やっぱりオリジナルの画像を使いたい…ということで、タイトル部分を画像に変更します。

その前に、defaultテーマのタイトルには角丸で色付きの背景画像 （ images/kubrickheader.jpg ） がありますので、まずはここを変更します。

今回、背景色はいらない(ということにした)ので、青色の部分を消してしまいます。
ペイントソフトなどで、比較的簡単に加工できると思います。(PhotoShop CS3で加工)
加工したら、gif形式などで保存します。

加工した背景画像を、style.css で元画像と差し替えて背景として指定します。
背景画像がスタイル設定されているのは、#header 部分になります。

変更前：

これを以下のように変更します。

変更後：

変更したのは、背景色と背景画像のパス、それと画像の配置(top)です。
(画像の配置をtopに変更したのは、後述での”#header の高さ調整”のためです)

変更した cssファイルを上書き保存すると…。

タイトル文字のスタイルが白だったので、こんな感じ………真っ白。

次に、タイトル画像を挿入します。

画像はなるべくcssで変更したいので、ブログタイトルになっている<h1>タグのスタイルを変更します。
<h1>のスタイルは、数カ所定義されているので見落としがないかを確認してください。

今回はタイトルは画像のみにしたいので、以下のように変更します。

変更前：

変更する箇所は2箇所ありますのでご注意を…。

変更後：

このように、変更前の2箇所にあった <h1> の記述を1つにまとめてしまいます。
CSSファイルの中には他にも<h1>のスタイルがいくつか定義されていますが、特に影響しないので、ここでは割愛。
さて、タイトルを表す部分はHTMLの記述ではこのようになっています。

このままですと、さきほど設定したスタイルでは <h1> に高さ ( height ) の記述がありませんので、 background に設定したタイトル画像がきちんと表示されません。
しかも、<h1> で括られた、必要のないテキストまでもが表示されてしまいます。

そこで、以下のように a要素 を

扱いにして、height の設定で文字を追い出し ( overflow:hidden; ) 、背景画像の高さに合わせた padding を追加します。

変更後：

上記のように指定すると、 a要素 が<h1>の背景画像の幅と高さになります。
その上、<h1>内に記述されているblogタイトルのテキストを見た目上の都合から非表示にもできました。

<h1>に直接タイトル画像を img タグで挿入したりするのも良いのかもしれませんが、デザイン上の画像はなるべくCSSで管理したいので、このようにしました。

※このような場合、display:none; や text-indent:-XXXXpx; を使っても良いかと思いますが、今回はblogタイトルのテキストですので、文字をh1の高さから追い出して非表示するという対処にしました。

タイトル画像を追加すると、変更後はこんな感じでちょっと画像が枠からずれてしまいました…。

これを調整する為に、#headerimg の変更をします。

#headerimg は複数スタイル指定されているので、必要のないものはコメントアウトをして無効に(または削除)して、margin　や padding を調整します。

今回は、 style.css の最初に定義されている #headerimg のみを採用して margin　や padding でタイトル画像の配置を調整しました。

ひとまず、これできちんと枠に収まりました。
なんだか #header のタテが長い気がするので、ちょっとだけ #header の height を調整。

height を 200px から 130px に変更しました。

これで、タイトル画像の変更は完了です。

(もうこれで充分のような気がしてきたけど…)

4：ブログタイトル下の div ( .description ) の調整

実は隠れていた(？) div「.description」…。
隠れていたというよりは、たまたまテキストの色が背景と同じ white だったので見えなくなっていましたが、<h1>のCSS調整をしているとひょっこりと出てきました。

今回は特に必要ないと思って、非表示にした上記のスタイルに、 .description の文字色 ( color ) の設定が含まれていました。

この div「.description」の内容は、WordPressの管理画面の「一般設定」のブログタイトルの下にある「キャッチフレーズ」になります。
なくても問題ないと思いますが、せっかくなのでここもきちんと設定してあげます。

テキストの配置などが “default” テーマのままになっていますので、これをタイトル画像に合わせるようにCSSを調整します。

変更前：

変更後：

ひとまず、こんな感じでOK。

今回はここまで。
結構長くなってしまった…。