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

3 min 36 views
akira

akira

2006年にうつ病を発症し会社を退職。1年で回復し社会復帰できましたが、2018年1月に人生2回目のうつ病を発症し、その年の6月に会社を退職。現在Youtube、ブログアフィリエイト、バイトと貯金で生活しています。人生山あり谷あり。早く寛解したいです。
>>ブログで収入を得る方法は無料で公開しています

FOLLOW

外観→テーマの編集→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;で高さを広げたりしました。いろいろ変更してみると面白いと思います。

カテゴリー:
ブログで月5万円収入を得る方法

アルバイトはしていますが、僕は現在定職にはついていません。ブログとYoutubeのアフィリエイト収益で生計をたてています。アフィリエイトでお金を得るのは決して楽なことではありませんが、調子の悪いときは休んで、調子の良い時だけ仕事をするという自分のペースで作業をすることも可能です。以下のリンク先ではブログで収益を得る方法を紹介しています。少しでも興味のある方は読んでみてください

関連記事

2 件のコメント

  1. 初めまして!cssの知識がほとんどないままスティンガーのカスタマイズをやっている者です(´・ω・`)

    グローバルメニューを目立たせたいとずっと思っていたので、参考にさせていただきました。
    色やサイズを変えただけで、ほとんどパク お借りしてしまいました(/ω\)

    公開してくださってとてもありがたいです!
    ありがとうございました!

    • コメントありがとうございます。少しでも役にたったならこちらもうれいしいです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です