【WordPress】LION MEDIA(ライオンメディア)テーマのスマフォ用ヘッダーメニューを見やすくする方法

【WordPress】LION MEDIA(ライオンメディア)テーマのスマフォ用ヘッダーメニューを見やすくする方法
【WordPress】LION MEDIA(ライオンメディア)テーマのスマフォ用ヘッダーメニューを見やすくする方法

【WordPress】LION MEDIA(ライオンメディア)テーマのスマフォ用ヘッダーメニューを見やすくする方法

【WordPress】LION MEDIA(ライオンメディア)テーマのスマフォ用ヘッダーメニューを見やすくする方法
最終更新日:2018.10.30

LION MEDIA(ライオンメディア)テンプレートは最高のテーマなのですが、スマフォ表示でのメニューが横にはみ出すタイプなのです。

【WordPress】LION MEDIA(ライオンメディア)テーマのスマフォ用ヘッダーメニューを見やすくする方法

↑これ、右側にも

・お問い合わせ(バグの報告)
・よくある質問

とメニューあるのですがスクロールできるかナビもないのでわかりにくいです。

また、遷移するので当たり前なのですがメニューの位置保持もないので
スクロール&タップしてくれたとしても画面が切り替わるとメニュー位置がリセットされてしまいます。

★お問い合わせを押した時の図

【WordPress】LION MEDIA(ライオンメディア)テーマのスマフォ用ヘッダーメニューを見やすくする方法
↑スクロールして【お問い合わせ】を押したのにホームが左に戻っててお問い合わせタブが消えてる!!

これを少し改造してナビゲーションがナビゲーションとして機能するよう改造していきましょう!
うちで使ってるUIです!

これからすること

【WordPress】LION MEDIA(ライオンメディア)テーマのスマフォ用ヘッダーメニューを見やすくする方法

・ページ遷移したら遷移先のタブを先頭にもってくる
・下に2pxのスクロールバーを追加して右にもありまっせアピール

ヘッダーの固定についてはこちらの記事で書いています
簡単3ステップ!LION MEDIA(ライオンメディア)テーマのヘッダーメニューを固定するカスタマイズ

デモ
パソコンの方はブラウザの幅を縮めてみてみてください!
メニューを押すと押したタブが先頭にくるようになります。

DEMOを見る

STEP1 CSSを追加

CSSを子テーマに追加していきます。
子テーマはメインテンプレートがアップデートされた時、折角書いたコードが消えるリスクを防いだりテンプレートベースを触るリスクを抑えたりしてくれます!ありがや

【外観】→【テーマ】で「LION MEDIA Child」を有効にしてください。

【WordPress】LION MEDIA(ライオンメディア)テーマのスマフォ用ヘッダーメニューを見やすくする方法
■FTPで開いて追加する
「/wp-content/themes/lionmedia-child」内style.css

■【外観】→【テーマの編集】で追加する
style.css

style.cssファイルの一番下にはりつけてください。

コピー



.l-extra {
  display: flex;
  justify-content: space-between;
  width: 100%;
  z-index: 1000;
}

.t-light .l-extra {
  border-bottom: 0;
  background: linear-gradient(-45deg, rgba(0, 93, 177, .8), rgba(219, 201, 0, .8));
}

.searchNavi {
  padding: 10px 0;
}
.globalNavi {
  padding: 0;
}

.globalNavi__list .menu-item {
  padding: 0;
  height: auto;
  margin-bottom: 0;
  border-left: 0;
}

.globalNavi__list .page_item a,
.globalNavi__list .menu-item a{
  display: block;
  padding: 19px 15px;
  font-weight: normal;
  transition: .2s;
  color: #fff;
}

//hover色とか
.globalNavi__list .current-menu-item,
.globalNavi__list .current-menu-item a:hover,
.globalNavi__list .menu-item a:hover {
  background: #000;
  display: block;
  color: #fff;
  font-weight: normal;
}

//SP表示の時スクロールバーを表示
@media only screen and (max-width: 767px){

  .globalNavi::-webkit-scrollbar {
    height: 2px;
  }
  .globalNavi::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
  }
  .globalNavi::-webkit-scrollbar-thumb {
    background: #f0b200;
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
  }

}

STEP2 currentを保持する為jqueryを読み込む

【外観】→【カスタマイズ】内【高度な設定 [LION用]】項目を開く

【WordPress】LION MEDIA(ライオンメディア)テーマのスマフォ用ヘッダーメニューを見やすくする方法
【WordPress】LION MEDIA(ライオンメディア)テーマのスマフォ用ヘッダーメニューを見やすくする方法

「■</head>直上の自由入力エリア」部分に次のコードを貼り付けてください。

コピー


<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>

STEP3 特定のタグがある場合先頭に移動させるJSを埋め込む

【外観】→【カスタマイズ】内【高度な設定 [LION用]】項目

【WordPress】LION MEDIA(ライオンメディア)テーマのスマフォ用ヘッダーメニューを見やすくする方法

「■</body>直上の自由入力エリア」部分に次のコードを貼り付けてください。

コピー


/*/////////////////////////////////////////////////
//ナビのカレント保持
/////////////////////////////////////////////////*/

$(document).ready( function(){

  var _globalnavi = $(".globalNavi"),
  _current = $(".current-menu-item");
  extraWidth = $(window).width(),
  leftOffset = _current.offset().left,
  scrollvalue = -20 + leftOffset;

  if(extraWidth &lt; 767){
    _globalnavi.scrollLeft(scrollvalue);
  }

});
スクロールバーはスマートフォン表示の時だけ表示されるようにしています。
JSでWordPressのメニューを使うと自動追加される.current-menu-itemの値がある時、その項目を左から20px右に表示します。
scrollvalue = -20 + leftOffset;この20という数字をいじって好きな位置に表示できます。
センターも良さそうです。
完成!!

わーー出来ました!
色や位置を調整してつかってみてくださいね♪