未分類

Stinger　グローバルナビの変更方法

この記事の最終更新日は2014年9月21日ですので、古い情報を掲載している可能性があります。その点ご理解のうえ読んでいただけると助かります。


外観→テーマの編集→style.cssを選択し、下の方にある下記部分を編集します。デフォルトでは下記になります。


/*---------------------
ナビゲーション
--------------------- */

#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;
}
#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;
}

Wel では

Wel ではこのように設定しております。cssの知識があれば、簡単にできると思います。



#navi-in {
background-image: url(背景画像リンク先を指定してます);
background-repeat: repeat-x;
}

#navi-in li {
         color: #ffffff;
         line-height: 40px;
	position: relative;
	float: left;
	font-size: 15px;
	padding-left: 0px;
	display: inline;
	padding-right: 0px;
	border-left-width: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}

#navi-in li li {
         color: #ffffff;
	float: left;
	font-size: 15px;
	padding-left: 0px;
	display: inline;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	border: none;
}

#navi-in li a {
         color: #ffffff;
	float: left;
	text-decoration: none;
         background-color: #333333;
         padding-left: 15px;
         display: inline;
         padding-right: 15px;
}
.menu-navigation-container {
	overflow: hidden;
}
#navi-in li a:hover {
         color: #000000;
         background-color: #f7f7f7;
         padding-left: 15px;
         display: inline;
         padding-right: 15px;
	text-decoration: none;
}

Wel でのコードの説明

#navi-in {
background-image: url(背景画像リンク先を指定してます);
background-repeat: repeat-x;
}

デフォルトではこの部分はないので追加しました。背景画像を用意し、background-repeat: repeat-x;でその画像を繰り返し使用しています。繰り返し使用することにより、用意した画像は10px　×　40pxですが、コンテンツのメイン領域全体にナビがいきます。

その他変更箇所は

その他には背景色をbackground-color: #f7f7f7;で設定したり、line-height: 40px;で高さを広げたりしました。いろいろ変更してみると面白いと思います。

-未分類