ナヴィゲーションに背景画像を入れる
1、独自レイアウトのファイルに背景画像を用意する。
用意した背景画像を独自ドメイン⇒ファイルにアップする。
スタイルシート(CSS)の修整
ナヴィゲーション部分の修整
/* Typo
----------------------------------------------- */
a:link, a:visited
{
text-decoration: underline;
color:#ffffff;
}
a:active { text-decoration: underline; }
a:hover { text-decoration:none; }
h1 { background-image:url(h1rogo1.jpg);}
h2 { background-image:url(h2.jpg) }
h3 { background-image:url(h3.jpg) }
p { font: 24px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;}
/* Layout
----------------------------------------------- */
body {
background: #F3E2A9
}
#container
{
margin:0 auto;
width:1200px;
background:white;
}
#header
{
padding:17px;
}
#header h1,
#header a
{
padding:0;
font-family:"Helvetica","Lucida Sans Unicode",Tahoma,Verdana,Arial,Helvetica,sans-serif;
font-size:20px;
font-weight:normal;
text-decoration:none;
line-height:1.3em;
color:#666666;
text-align:right;
}
#header a:hover { text-decoration:none; }
#navigation
{
float:left;
width:220px;
padding:17px;
}
#sidebar
{
padding-top:10px;
}
#content
{
float:right;
width:900px;
padding:17px;
}
#footer
{
clear:both;
margin-top:10px;
background:#90ee90
}
#footer .gutter
{
height:30px;
padding:35px 15px 0 90px;
}
/* Navigation
----------------------------------------------- */
ul.mainNav1,
ul.mainNav2
{ margin: 0; padding: 0;}
ul.mainNav1 li,
ul.mainNav2 li
{ display: inline; margin: 0;padding: 0;}
ul.mainNav1 li a,
ul.mainNav2 li a
{ font:normal 18px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none; display: block; color:#333; border-bottom:1px solid #CCC;
background-image:url(nav1.jpg); }
ul.mainNav1 li a { padding:4px 4px 4px 34px; }
ul.mainNav2 li a { padding:4px 4px 4px 54px; }
ul.mainNav3 li a { padding:4px 4px 4px 34px; }
ul.mainNav1 a:hover {background-image:url(nav2.jpg);color:black;}
ul.mainNav1 a.current {background-image:url(nav3.jpg);
color:#ffffff;font-weight:bold; }