THE THOR ザ・トール 【 グローバルメニュー 】の【 矢印 】を見やすくカスタマイズ

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

僕はしていませんw

 


THE THOR まだ持ってないの?


 

ちょっとちょっとまだ話は終わってませんよ!

今後はグローバルメニューを活用する予定なんです。「使ってないやつのカスタマイズなんか見たくない」なんて言わずに見てください。いままでグローバルメニューが気にいらず使っていなかった人も「使ってみようかな〜」と思うカスタマイズです。

 

具体的にはグローバルメニューの右側にでる「スクロールをうながす矢印」を見やすくカスタマイズです。(長いw)

 


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

 

メニューと矢印が重なっている↓

グローバルメニュー 矢印 カスタマイズ前

とても見づらくモヤモヤする。

 

ちょっとした追加cssで、あら不思議↓

グローバルメニュー 矢印 カスタマイズ

スッキリしました!そんなカスタマイズです。

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

 

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

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

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

 


 

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

操作手順
外観 → カスタマイズ → 共通エリア設定[THE] → ヘッダーエリア設定 → グローバルメニュー設定
選択項目は4つ
  • PC/スマホで表示する(default)
  • PC/スマホで表示しない
  • スマホで表示しない
  • PCで表示しない

 

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

 


 

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

操作手順
外観 → カスタマイズ → メニュー
メニューを作る操作はテキトーにいじって慣れましょう!

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

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

 

問題点は以下の通り

  • スクロールの必要がないのに表示される
  • グローバルメニューの文字数が多いと矢印と文字が重なり見た目が良くない。
  • 表示が半透明でスッキリしない

 

あ〜って思ったでしょ?

 

カスタマイズで行うのは以下の通り

  • 矢印と文字の重なりをなくす
  • 半透明をやめて100%表示する

 

残念ながらここでは「必要のないときの表示」を自動で感知して消すということが出来ませんでした。自分で横幅を設定して消すこと、矢印を全く使用しないことは出来ます。

矢印と文字の重なりは、メニュー幅と矢印の位置調整で対応します。

このカスタマイズではカラーを100%表示にしますが、お好みで色と透過度を決めてください。

 

お気に入りポイント

【 2019年9月14日 編集 】 THE THOR は2019年8月5日にアップデートがあり、ver1.6.0になりました。     アップデートでは内部的な不具合の修正やデザイン的な不具合の修正さらに[…]

THETHORレビュー

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

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

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

操作手順
外観 → カスタマイズ → 追加css
追加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%表示になっています。

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

 


矢印を消す

画面サイズを指定して矢印を消す場合は以下を最初のコードに追加して使用してください。

@media only screen and (min-width: 768px){
    .globalNavi::after{
        display: none;
    }
}

768pxというのが画面サイズになります。グローバルメニューの文字数幅より画面サイズが大きくなれば矢印は必要がなくなります。各サイトにあわせて数値を変更してください。(768pxは THE THOR の初期設定と同じなので上記コードのまま使う必要はありません)

 

矢印を完全に消去する場合は以下のコードのみを使用してください。※矢印を表示しないので幅調整は必要なし。カラー/透過度が必要な場合はその部分のみ適用してください。

.globalNavi::after{
    display: none;
}

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

 

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

こっちもあるよ

ワードプレスのテーマ THE THOR のカスタマイズ 今回はグローバルメニューを少々変更しました。グローバルメニューの色の変更もこちらで可能です。 (adsbygoogle = window.adsbyg[…]

あとがき

細かいカスタマイズですがスッキリ見やすくなったと思います。気になっていた人も多いのではないでしょうか?

特にPVに影響をあたえる部分ではありませんが、せっかくの自分のサイトです。

自己満足上等、好きなようにカスタマイズしていきましょう!

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

 

グローバルメニューの矢印をカスタマイズ
呟くのよ・・・私の棒ストが