株式会社ジラフィー(Giraffy)

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

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

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

1：テーマをコピーする

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

default テーマをコピーした状態

コピーした default テーマをリネームする

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

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

/*
Theme Name: GiraffyBlog theme
Theme URI: http://giraffy.net/
Description: WordPress のデフォルトテーマをもとにした GiraffyBlog のテーマ
Version: 1.0
Author: Giraffy
Author URI: http://giraffy.net/
Tags: fixed width, two columns, widgets
*/

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

テーマのstyle.cssを変更する前の状態

テーマのstyle.cssを書き換えた後の状態

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

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

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

ヘッダー背景画像修正前

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

ヘッダー背景画像修正後

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

#header {
background: #73a0c5 url('images/kubrickheader.jpg) no-repeat bottom center;
}

これを

#header {
background: #ffffff url('images/保存した画像名.gif') no-repeat top center;
}

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

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

ヘッダー画像置き換え直後

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

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

Blogのタイトル画像

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

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

h1 {
font-size: 4em;
text-align: center;
}

h1 {
padding-top: 70px;
margin: 0;
}

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

h1 {
background: url('images/タイトル画像.gif') no-repeat top left;
margin: 0;
}

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

<h1><a href="http://giraffy.net/blog/">Giraffy Blog</a></h1>

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

そこで、以下のように a要素 を display: block; 扱いにして、height の設定で文字を追い出し ( overflow:hidden; ) 、背景画像の高さに合わせた padding を追加します。

h1 a {
display: block;
width: 画像の横幅 px;
height: 0;
  /* 高さを 0 にすることで、テキストを追い出す準備 */
overflow: hidden;
 /* height よりも内容 (この場合はタイトルテキスト) がはみ出た場合、非表示 */
padding-top: 画像の高さ px;
 /* 背景画像を表示するための余白です */
}

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

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

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

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

タイトル画像の挿入直後

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

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

#headerimg {
margin-top:7px;
padding:30px 0 0 30px;
}

/* こちらは無効にしました
#headerimg 	{
margin: 7px 9px 0;
height: 192px;
width: 740px;
}
*/

/* これも今回は必要ないので無効です
#headerimg {
margin: 0;
height: 200px;
width: 100%;
}
*/

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

タイトル画像の配置を調整

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

#header {
background-color: #73a0c5;
margin: 0 0 0 1px;
padding: 0;
height: 200px; /* ここの高さを適当な高さに変更します */
width: 758px;
}

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

ヘッダーの高さ調整後

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

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

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

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

/*
h1, h1 a, h1 a:hover, h1 a:visited, #headerimg .description {
text-decoration: none;
color: white;
}
*/

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

Descriptionの初期状態

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

Descriptionの設定画面

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

#headerimg .description {
font-size: 1.2em;
text-align: center;
}

#headerimg .description {
margin: 10px 0 0 15px;
font-size: 1.2em;
}

Description調整後

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

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

関連する記事はありません.