ページメニュー回り
上部に並んでいるメニュー回りのデザインカスタマイズ方法
メニューの背景
メニューの通常表示している時の背景はwp-content/themes/wdtkihon/images/にある
page.jpg を使用しています。
通常表示している時の背景を変更する場合はpage.jpgを変更します。
style.css
247行目
#navcontainer ul {
padding: 0;
margin: 0;
background: #FFFFFF;
float: left;
width: 760px;
height: 30px; ←メニュー高さ（上下幅）
background:url(images/page.jpg) top left no-repeat;
font: 13px Osaka, Verdana, sans-serif; ←メニューの文字の大きさ
style.css
262行目
#navcontainer ul li.page_item a {
padding: 5px 14px 5px 14px; ←文字の余白 上-右-下-左
color: #666666; ←通常表示での文字色
text-decoration: none;
font-weight: bold;
float: left;
border-right: 1px solid #666666; ←メニュー同士を区切っている線の幅と色
}
#navcontainer ul li.page_item a:hover {
color: #009900; ←マウスが上に来た時のメニューの文字色
style.css
275行目
#navcontainer ul li.current_page_item a {
padding: 5px 14px 5px 14px; ←選択されているページメニュー文字の余白 上-右-下-左
background: #009900; ←選択されているページの背景色
color: #FFFFFF; ←選択されているページメニュー文字の文字色
text-decoration: none;
float: left;
border-right: 1px solid #DFDFDF; ←選択されているページメニューの右区切り線の幅と色
}
#navcontainer ul li.current_page_item a:hover {
background: #ECF3CF; ←選択されたページメニューの上にマウスが来た時の背景色
}