ワードプレスのテーマ THE THOR のカスタマイズ
今回はグローバルメニューを少々変更しました。グローバルメニューの色の変更もこちらで可能です。
グローバルメニューをCSSでカスタマイズ
変更内容は以下の通りで追加CSSにコードを追加します。
/*グローバルメニュー*/
.globalNavi {
width: 100%;
margin-top: 48px;
}
/*文字色背景色*/
.globalNavi__list li a {
background-color: #eeeeee;
color: #444444;
border-radius: 4px;
width: 110px;
text-align: center;
}
/*グローバルメニューマウスオーバー*/
.globalNavi__list li a:hover {
background-color: #cccccc
}
/*グローバルメニューレスポンシブル*/
@media screen and (max-width : 767px){
.globalNavi {
margin-top: 24px;
}
}
出来上がりはこのようになります（スマホ表示）
グローバルメニュー 追加CSSの詳細説明
僕のサイトの出来上がりでは他サイトでは使いモノにならないと思うので個別で微調整してください。
追加CSSの内容を上から説明をしていくので参考にしてください。
※カスタマイズは自己責任でお願いします。
THE THOR のグローバルメニューのクラス名
クラス名は.globalNaviになります。
このクラス名を使い装飾を変更や追加していきます。
サイズと位置を設定
/*グローバルメニュー*/の部分
width:100%;グローバルメニュー全体のサイズを設定。
margin-top: 48px;グローバルメニューの上部分に余白を取っています。デフォルトよりかなり大きめ。当サイトではメインビジュアルなどの設定をしていないので余白大きめです。各サイトで数値を微調整してください。
メニューの文字色と背景色
/*文字色背景色*/の部分
文字色や背景色などの設定を行います。
背景などが必要ない部分はゴッソリカットしてください。
background-color: #eeeeee;文字の背景色を設定することでボタンのようになります。
color: #444444;こちらは文字色です。
border-radius: 4px;背景を角丸形状にします。必要なければカットしてください。
width: 110px;文字背景のサイズです。当サイトではボタンサイズを統一したかったのでpxで指定していますがpaddingを使ったほうが良い場合が多いと思います。
text-align: center;文字をセンター配置にしています。
背景サイズを文字量に合わせる場合はwidth: 110px;の代わりに下記CSSを挿入してください。数値で左右の余白サイズが変更できます。
padding-left: 10px; padding-right: 10px;
色を決めるのに参考資料として本があると色をweb検索しながらの作業より効率が良くオススメです。一冊は手元に置いておきましょう。
↑持ってます。
↑電子版がめちゃ安い（役立つかは不明）
マウスオーバーの変化
メニュー上にポインターがきたときの挙動です。スマホでは選択した結果として表示されます。
/*グローバルメニューマウスオーバー*/の部分
background-color: #cccccc;ここで指定した色に変化します。
実行すると影がつくと思いますが、影付けはデフォルトでの設定です。文字色なども同時に変更すると良いかもしれません。
スマホ用の設定です
グローバルメニューの上の余白がPCと同じでは大きすぎるので小さくしています。デフォルトよりは大きいかと思います。
/*グローバルメニューレスポンシブル*/の部分
margin-top: 24px;各サイトにあわせて数値を変えてください。
以上です。
他にもコードを追加することでTHE THOR のグローバルメニューをカスタムできるので色々試してみてください。
あとがき
グローバルメニューは各ページで表示されることが多いパーツです。その割におざなりになっている事が多い不思議なパーツです。
上手く使うことが出来れば直帰率の改善によるPV数アップが期待できるので、この状態を基本としてさらに改良をしていきたいと思っています。
※現在、当サイトでは標準で設定できるグローバルメニューを非表示にしています。