STINGER3 : ナビゲーションをカスタマイズしよう

ナビゲーションのカスタマイズ

ナビゲーションとは、ぼくのブログでは、以下の黄色の部分のことです。
この部分をカスタマイズする方法を紹介します。

ぼくのナビゲーションのCSSのコードはこれです。

#navi-in{
background:#ffff00;
}
#navi-in li {
	position: relative;
	float: left;
	font-size: 13px;
	padding-left: 10px;
	display: inline;
	padding-right: 10px;
	border-left-width: 1px;
	border-left-style: dotted;
	border-left-color: #CCC;
	padding-top: 5px;
	padding-bottom: 5px;
        font-weight: bold;
}
#navi-in li li {
	float: left;
	font-size: 13px;
	padding-left: 10px;
	display: inline;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	border: none;
}
#navi-in li a {
	float: left;
	color: #333;
	text-decoration: none;
}
.menu-navigation-container {
	overflow: hidden;
}
#navi-in li a:hover {
	text-decoration: underline;
}
#navi-in li a:hover {
        color:#000;
}
#navi-in li:hover {
    background-color:#87cefa;
}

#navi-in{

background:#ffff00;

}

#navi-in li {

position: relative;

float: left;

font-size: 13px;

padding-left: 10px;

display: inline;

padding-right: 10px;

border-left-width: 1px;

border-left-style: dotted;

border-left-color: #CCC;

padding-top: 5px;

padding-bottom: 5px;

font-weight: bold;

}

#navi-in li li {

float: left;

font-size: 13px;

padding-left: 10px;

display: inline;

padding-right: 10px;

padding-top: 5px;

padding-bottom: 5px;

border: none;

}

#navi-in li a {

float: left;

color: #333;

text-decoration: none;

}

.menu-navigation-container {

overflow: hidden;

}

#navi-in li a:hover {

text-decoration: underline;

}

#navi-in li a:hover {

color:#000;

}

#navi-in li:hover {

background-color:#87cefa;

}

後は、これを外観→テーマ編集→style.css内のナビゲーション内の記述と入れ替えればＯＫ。