THE THOR ザ・トール グローバルメニュー 矢印 をカスタマイズ

みなさん グローバルメニュー 表示していますか？

僕はしていませんw

今は表示させています。設定は気分で変更。

ここではグローバルメニューの右側にある矢印を色々とカスタマイズしていきたいと思います。

THE THOR まだ持ってないの？

カスタマイズ①

メニュー文字と重なり見づらい矢印を見やすく変更。

通常のグローバルメニューはメニューと矢印が重なり見づらくなることがあります。

とても見づらくモヤモヤしますね！

モヤモヤの図

ちょっとした追加cssでスッキリ！

スッキリの図

カスタマイズ②

そもそも矢印いらなくない？

矢印を消してしまいましょう。（矢印の下のグラデも消せます）

※カスタマイズは自己責任でお願いします。

THE THOR
グローバルメニュー 設定

まずは基本の設定をおさらいです。

そんなの知っているよ！という人はすっ飛ばしちゃってください。

グローバルメニューは以下の場所から設定します。

• PC/スマホで表示する(default)
• PC/スマホで表示しない
• スマホで表示しない
• PCで表示しない

表示するのが基本になっているので「スマホで表示しない」を選んだ場合はPCのみ表示します。「PCで表示しない」はスマホのみ表示になります。

メニュー自体は以下の場所で作ったり選択することができます。

グローバルメニュー
右側に出る矢印の問題点

問題点はいくつかあります。完璧な対処は難しいですがカスタマイズでほとんど気にならなくなります。

あ〜って思ったでしょ？

残念ながら僕の力では矢印の必要がないときは表示しないということが出来ませんでした。

カスタマイズ①
グローバルメニューの矢印をスッキリ表示

カスタマイズは追加cssを使います。

.globalNavi {
    width: calc(100% - 1.5em);
}
.t-headerColor .globalNavi::after {
    color: rgba(255,255,255,1);
}
.globalNavi::after {
    right: -1.5em;
} 

color: rgba(255,255,255,1);の部分で矢印のカラーと透過度を決めているので好みの数値に変更してください。最後の数字1が透過度です。1で100%、0.5で50%表示になります。現状では白色100%表示になっています。

文字と矢印の重なりは、メニュー幅を縮小した分だけ矢印を右側に移動して画面幅いっぱいになるよう調整しています。

カスタマイズ②
グローバルメニューの矢印を消去

矢印を完全に消去する場合は追加CSSに以下のコードをコピペ。

.globalNavi::after{
    display: none;
}

これで矢印は非表示となります。

矢印の下のグラデーションも消す場合は以下をお試しください。

.globalNavi::after,.globalNavi::before{
    display: none;
}

以上でカスタマイズは終了です。

※カスタマイズは自己責任でお願いします。

あとがき

細かいカスタマイズですがスッキリ見やすくなったと思います。

気になっていた人も多いのではないでしょうか？

特にPVに影響をあたえる部分ではありませんが、せっかくの自分のサイトです。自己満足上等、好きなようにカスタマイズしていきましょう！