- 国内シェアNo.1の高速サーバーなのでストレスフリー！
- 自動バックアップ機能に標準対応で安心運用可能！
| 気になるポイント！ | キャンペーン中に契約すれば.com等のドメインを永久無料で使えます！ |
|---|
ヘッダーメニューの両脇に区切り線を作る方法
ヘッダーメニューに区切り線を作ります。
最初の状態はこんな感じ
両脇に線がありませんね。
この両脇に区切り線を加えます。
下記のコードを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のカスタマイズ記事まとめはこちら！↓
コピペも良いですが・・・
テーマによってはカスタマイズなんて必要ないかもしれませんが、HTMLやCSSの知識あるとないとでは、トラブルがあった時に大きく違ってきます。
コピペも便利ですが、専門の本などを併せて使用すると、理解度がぐっと深まりますよ！
私が使用したおすすめの本はこちらです。
コメント
[…] 【引用・参考サイト】 ・『Plus Plus』（【WordPress】STINGER8におけるヘッダーメニューの簡単カスタマイズ集）2017年5月7日検索 […]