WordPressテーマ（テンプレート）をカスタマイズして
あなたのオリジナルのデザインに変更してみましょう。
WordPressテーマ（テンプレート）をカスタマイズしよう（２）
ヘッダーメニューの書き換え
タイトル部分のすぐ下の横に並んだメニューがありますがこれはホームページビルダーテンプレートで作成したサイトと連動させるために作成しています。この部分を書き換えるのはテーマファイルの編集で行います。「デザイン」、「テーマエディタ」そして「ヘッダー」をクリックします。先ほどのタイトル画像の記述の下に以下のような記述があります。
<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」等の部分を変更します。これでヘッダー部分のカスタマイズはおしまいです。続いて右のナビゲーション部分を変更しましょう。
