WordPressテーマ（テンプレート）をカスタマイズしよう
こちらで販売しているWordPressテンプレートの利用方法についてもう少し詳しく解説します。「ホームページビルダーテンプレート」をご利用の方はそのカスタマイズと似ていますのですぐに分かると思います。初めての方も順を追っていけば何も難しいことはありません。何といってもWordPressをインストールすることが出来たのですから。
まずはヘッダー部分のカスタマイズ方法です。
WordPressテンプレート販売
画像の変更
まずはタイトル画像などの画像ファイルを変更しないといけませんね。ひとつずつ説明しておきましょう。
タイトル画像
タイトル画像は「wdcro」フォルダの中の「img」フォルダの中にあります。ファイル名は「title.gif」です。画像の大きさは縦150ピクセル、横300ピクセルです。あなたのサイトに合うように作成したタイトル画像ファイルはwordpress/wp-content/themes/wdcro/img/に上書きアップロードします。
もしタイトル画像に使うファイルがGIFではなくJPEGの場合はテーマファイルを書き換える必要があります。WordPressの管理画面の「デザイン」をクリックし、続いて「テーマエディタ」をクリックします。そして右側に表示されているテンプレートの中から「ヘッダー」をクリックします。その約30行目くらいに以下のような記述があります。
<div id="title"><a href="<?php bloginfo('url'); ?>/"><img src="<?php bloginfo('url'); ?>/wp-content/themes/wdcro/img/title.gif" alt="ホームページのタイトル画像" width="300" height="150" /></a></div>
この部分の「title.gif」を「title.jpg」等のようにあなたが作成したタイトル画像のファイル名に変更すれば良いでしょう。そしてその画像ファイルはwordpress/wp-content/themes/wdcro/img/にアップロードします。またaltも「ホームページのタイトル画像」から適切な言葉に変更しましょう。もう1点このタイトル画像のリンクは現在ブログのトップとなっていますが、ホームページビルダーテンプレートなどを使っていて別のトップページにリンクさせたいときは「<?php bloginfo('url'); ?>/」の部分を変更したいURLにしましょう。通常はブログのトップページではなくHTMLのサイトのトップページのURLにします。
タイトル右の背景画像
タイトルの右側には上のような背景画像を使用しています。ファイルの場所は「wdcro」フォルダの中の「css_img」フォルダの中にある「h_r_bg.gif」というファイルです。ファイルのサイズは縦150ピクセル、横420ピクセルです。もしこのファイルがGIFではなくJPEGを使用したい場合はタイトル画像のときと同じようにテーマファイルを書き換える必要があります。
テーマファイルを書き換えるのは管理画面の「デザイン」、「テーマエディタ」そして「スタイルシート」をクリックします。
/*タイトル画像右側*/
#h_rbox {
margin: 0px;
padding: 0px;
float: right;
width: 420px;
background-image: url(css_img/h_r_bg.gif);/*タイトル右側の背景画像*/
height: 150px;
}
上のような部分がありますので「h_r_bg.gif」のファイル名をあなたが作成した画像ファイル名に変更すればOKです。そしてその画像ファイルはwordpress/wp-content/themes/wdcro/css_img/にアップロードします。
ヘッダーメニューの書き換え
タイトル部分のすぐしたの横に並んだメニューがありますがこれはホームページビルダーテンプレートで作成したサイトと連動させるために作成しています。この部分を書き換えるのはテーマファイルの編集で行います。「デザイン」、「テーマエディタ」そして「ヘッダー」をクリックします。先ほどのタイトル画像の記述の下に以下のような記述があります。
<div id="h_menu">
<a href="index.html">ホーム</a>
<a href="info/index.html">インフォメーション</a>
<a href="sitemap.html">サイトマップ</a>
<a href="color.html">カラーチャート</a>
</div>
この部分をあなたのサイトのメニューに合うようにリンクを作成しましょう。ここのリンクは絶対パスで記述しましょう。もしあなたのドメインが***.comだとしたら以下のような感じになります。
<div id="h_menu">
<a href="http://www.***.com/index.html">ホーム</a>
<a href="http://www.***.com/info/index.html">インフォメーション</a>
<a href="http://www.***.com/sitemap.html">サイトマップ</a>
<a href="http://www.***.com/contact/index.html">お問い合わせ</a>
</div>
ここに作成するリンクはいくつでもかまいませんが、この部分に収まる程度にしておきましょう。
ヘッダーメニューの背景画像
ヘッダーメニュー部分の背景には左のような画像をX軸（横方向）に繰り返して表示しています。この画像ファイルは「wdcro」フォルダの「css_img」フォルダの中の「h_menu_bg.gif」です。
もしもGIFではなくJPEGを使うなど、ファイル名が変わる場合はテーマファイルを編集します。管理画面の「デザイン」、「テーマエディタ」の「スタイルシート」をクリックします。そこに以下のような記述があります。
#h_menu {
margin: 0px;
clear: both;
width: 720px;
background-image: url(css_img/h_menu_bg.gif);/*メニュー部分の背景画像*/
background-repeat: repeat-x;
background-color: #E0E0E0;/*メニュー部分の背景色*/
height: 30px;
text-align: right;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
もうわかりますね。「h_menu_bg.gif」をあなたが作成したファイル名に書き換えればよいのです。そしてその画像ファイルはwordpress/wp-content/themes/wdcro/css_img/にアップロードします。
ヘッダーメニューのボタンを変更
さらにそのテーマエディタでスタイルシートをもう少し見ていくと以下のような記述があります。
#h_menu a {
background-color: #FFFFFF;/*ヘッダーメニューボタンの背景色*/
border: 1px solid #333333;/*ヘッダーメニューボタンの枠線の色*/
padding-top: 3px;
padding-right: 15px;
padding-bottom: 3px;
padding-left: 15px;
font-size: 12px;
color: #333333;/*文字の色*/
text-decoration: none;
margin-top: 0px;
margin-right: 15px;
margin-bottom: 0px;
margin-left: -10px;
}
#h_menu a:hover {
background-color: #FFE26F;/*ヘッダーメニューボタンにマウスが来たときの背景色*/
color: #333333;/*文字の色*/
}
コメントで書かれている内容を読めば分かると思いますが、ここでヘッダーメニューのボタンの背景色や文字の色、枠線の色を指定します。「#FFFFFF」等の部分を変更します。これでヘッダー部分のカスタマイズはおしまいです。続いて右のナビゲーション部分を変更しましょう。