WordPressナビゲーションデザインのカスタマイズ
ヘッダー部分のデザインのカスタマイズはうまく行きましたか？続いて右のメニュー部分、ナビゲーション部分です。基本的にヘッダー部分のときとやることは同じです。
WordPressテンプレート販売
メニューの見出しの変更
背景画像の変更
メニューの見出しには左のような画像が使われています。画像は「wdcro」フォルダの「css_img」の中の「h4_bg.gif」というファイルです。画像のサイズは縦45ピクセル、横220ピクセルです。あなたが作成した画像ファイルを「h4_bg.gif」という名前で上書き保存、上書きアップロードすればよいですが、もしかするとGIFではなくJPEG画像を使用するかもしれません。その場合はテーマファイルを編集する必要があります。
管理画面の「デザイン」、「テーマエディタ」そして「スタイルシート」をクリックします。以下のような記述を探します。
#sidebar ul li h4 {
font-size: 14px;/*見出しの文字の大きさ*/
color: #FFFFFF;/*見出しの文字の色*/
background-image: url(css_img/h4_bg.gif);/*背景画像のURL*/
background-repeat: no-repeat;
margin: 0px;
padding-top: 10px;
padding-right: 5px;
padding-bottom: 15px;
padding-left: 18px;
list-style-type: none;
}
ここの記述の「h4_bg.gif」をあなたの作成した画像ファイル名に変更すればOKです。また、その上の行で文字の色を指定しています。あなたのデザインに合わせて文字の色を変更しましょう。
メニューボタンの変更
メニューボタンも背景画像を使っています。左のような画像です。これまでの画像とちょっと違うのは2つの画像を縦に並べているという点です。上の画像は通常の表示で下の画像はマウスが乗っかったときの画像で、スタイルシートで表示する位置を指定しています。
画像のサイズは縦が32ピクセル、横が201ピクセルです。縦に2つですので、縦は合計64ピクセルになっています。画像ファイルは見出しと同じフォルダ「wdcro」の中の「css_img」にある「menu_bg.gif」というファイルです。
ファイル名を変更したいときはテーマファイルも変更する必要があります。管理画面の「デザイン」、「テーマエディタ」そして「スタイルシート」をクリックします。以下のような記述を探します。
#sidebar ul ul li a {
background-image: url(css_img/menu_bg.gif);/*ページメニューの背景画像のURL */
background-repeat: no-repeat;
display: block;
font-size: 12px;/*ページメニューの文字の大きさ*/
color: #333333;/*文字の色*/
text-decoration: none;
width: 165px;
height: 25px;
padding-top: 7px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 25px;
background-position: 0px 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
line-height: 95%;
}
#sidebar ul ul li a:hover {
background-position: 0px -32px;
color: #666666;/*文字の色*/
}
ここの記述の「menu_bg.gif」をあなたの作成した画像ファイル名に変更すればOKです。また、その下の行で文字の色を指定しています。あなたのデザインに合わせて文字の色を変更しましょう。
最後にメインの部分のデザインを変えてみましょう。