【WordPress】STINGER8におけるヘッダーメニューの簡単カスタマイズ集

Stinger8
スポンサーリンク

ヘッダーメニューの両脇に区切り線を作る方法

ヘッダーメニューに区切り線を作ります。
最初の状態はこんな感じ

両脇に線がありませんね。

この両脇に区切り線を加えます。
下記のコードをstyle.css追記します。

header .smanone ul.menu li{
	border-left: 1px solid #fff;
  	border-right: 1px solid #fff;
}

このコードを追記すると下の様になります。

 

一番左に線が追加されましたが、
真ん中あたりが線が重なって太くなっていますね。

さらにstyle.cssに下記のコードを追記します。

header .smanone ul.menu li + li{
	border-left: none;
}

これで重なった部分が修正されました。

 

 

最後に右側に縦線を追加するため、
以下のコードを追記します。

header .smanone ul.menu li:last-child{
	border-right:1px solid #fff;
}

これで右端に線が追加され、
ヘッダーメニューの区切り線が完成しました。

 

 

ヘッダーメニューを中央に寄せる方法

ヘッダーメニューを中央に寄せる場合は、
以下のコードをstyle.cssに追記するだけです。

#st-menuwide{
	display:flex;
}

こんな感じになります。

 

ヘッダーメニューの色を変更する

ヘッダーメニューの色を変更させるためには、
以下のコードをstyle.cssに追記します。

#st-menubox{
   background-color:blue;
}

header .smanone ul.menu li a{
	color:#fff;
}

こんな感じになります。

ちなみに上記のコードではわかりやすいように、
メニューの色を青にしていますが、
メニューの色を変えたい場合は、
【st-menubox】のbackground-colorを好みの色に変更してください。
また、文字色を変更したい場合は、
【header .smanone ul.menu li a】のcolorを変更してください。

 

ヘッダーメニューの色をホバーしたときに反転させる方法

ホバー時にヘッダーメニューの色を反転させる場合は、
以下のコードをstyle.cssに追記します。

header .smanone ul.menu li a:hover{
	background-color:#fff;
	color:#38b48b;
}

こんな感じになります。

とりあえず簡単なカスタマイズをの記事を書いてみました。
そのうちまたメニューのカスタマイズを書いてみようと思います。

コピペも良いですが・・・

カスタマイズ記事はコピペできるものもあり、便利ですが、もし分かりずらかったりする場合は、本などを併せて使用すると、理解度が深まりますよ!

私が使用したおすすめの本はこちらです。

Stinger8のカスタマイズ記事まとめはこちら!↓

【WordPress】STINGER8のカスタマイズまとめ
WordPressのテーマStingerのカスタマイズ記事が増えてきたので、記事を種類別に分類をしてみました。カスタマイズをするにあたりカスタマイズをする場合には、必ず子テーマを使用しましょう。子テーマを使用することで、カスタマイズによる不

コメント