Stinger8

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

スポンサーリンク
新たにレンタルサーバーを選ぶならこれ!
エックスサーバー
  • 国内シェアNo.1の高速サーバーなのでストレスフリー!
  • 自動バックアップ機能に標準対応で安心運用可能!
気になるポイント!キャンペーン中に契約すれば.com等のドメインを永久無料で使えます!
WordPressでサイトを運用すると重くなりがちですが、使用しているレンタルサーバーのスペックがあまり良くないと、どんなにWordPress側で高速化をしていても、なかなか高速化の成果が反映されません。サイトの表示スピードが上がらない原因がレンタルサーバーの場合は、エックスサーバーにしてみると改善するかもしれません! またサーバー等のバックアップを自動で行っているので、安心してサイトの運用をすることができます! またマルチドメイン、メールアドレスを無制限で使えるというのもうれしいですね。

公式サイトはこちら

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

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

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

この両脇に区切り線を加えます。
下記のコードを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のカスタマイズ記事まとめはこちら!↓

【プログラミング入門最強の味方】STINGER8カスタマイズまとめ
WordPressのテーマStinger8のカスタマイズ記事が増えてきたので、記事を種類別に分類をしてみました。STINGER8は基本的には、最低限の機能しかないまっさらなテーマです。その分非常にカスタマイズがやりやすく、HTMLやCSS、...

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

テーマによってはカスタマイズなんて必要ないかもしれませんが、HTMLやCSSの知識あるとないとでは、トラブルがあった時に大きく違ってきます。
コピペも便利ですが、専門の本などを併せて使用すると、理解度がぐっと深まりますよ!

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


コメント

  1. […] 【引用・参考サイト】 ・『Plus Plus』(【WordPress】STINGER8におけるヘッダーメニューの簡単カスタマイズ集)2017年5月7日検索 […]