WordPress

STINGER5のスマホ表示メニューをカスタマイズする方法

参考にしたサイトは、「株式会社シスアナコム」さんです。ありがとうございます!

[box class=”box28″ title=”参考”]

株式会社シスアナコム

[/box]

カスタマイズ後のイメージ

stinger5-menu-mobile_01

メニューをクリックすると、画面下へ展開します。  

jqueryの編集

STINGER5の親テーマにある「js」フォルダの中の「base.js」ファイル開きます。

wp-content/themes/stinger5verxxxxxxxx/js/base.js

[codebox title=”コード”]

/*--------------------------- ドロップダウン ---------------------------*/ /* jQuery(document).ready(function(){ jQuery(".menu ul.children").hide(); jQuery("li.page_item").hover(function() { jQuery("ul.children",this).slideDown("slow"); }, function() { jQuery("ul.children",this).slideUp("slow"); }); }); */

[/codebox]

「/*」と「*/」で、ドロップダウンのコードを囲い、コメントアウトするか削除します。  

style.cssの編集

スマホメニューのコードを、以下のものに変更。

[codebox title=”style.css”]

/* スマホメニュー */ .pcnone li { width: 100%; padding: 0; margin: 0; } .pcnone li a { display: block; padding: 10px; width: 100%; background: #4682B4; color: white !important; border-bottom: 1px solid white; } .pcnone li:hover > a { background: darkblue; text-decoration: none; } .pcnone li ul li a { padding-left: 30px; } .pcnone li ul li { padding: 0; margin: 0; }

[/codebox]

style.cssのアコーディオンの項目を編集

[codebox title=”style.css”]

/*——————————–———– アコーディオン ——————————————–*/ #s-navi dl.acordion p { margin: 0; } #s-navi dl.acordion { margin: 0px; } #s-navi dt.trigger { text-align: left; padding: 10px 0px; cursor: pointer; } #s-navi dt.trigger .op { font-size: 14px; color: #333; padding: 0px 0px 0px 7px; } #s-navi dd.acordion_tree { padding: 0px; display:none; overflow: hidden; } .acordion_tree li { float: left; font-size: 13px; padding-left: 10px; display: inline; padding-right: 10px; padding-top: 5px; padding-bottom: 5px; margin-bottom: 10px; border-left: none; } .acordion_tree li li { float: left; font-size: 13px; padding-left: 10px; display: inline; padding-right: 10px; border: none; padding-top: 5px; padding-bottom: 5px; margin-bottom: 10px; } .acordion_tree li a { float: left; color: #333; text-decoration: none; }

[/codebox]

変更した箇所

  • MENUの表示位置を右から左に移動
  • メニュー左側の区切り線を削除
  • バックグラウンドを画面の横幅いっぱいに表示

背景のカラー等は、お好みで変更してください。  

さいごに

動作もスムーズな感じでいいです!

親テーマのbase.jsを編集したので、子テーマを使用していると、バージョンアップした時に、上書きされてしまうので注意してください。  

ABOUT ME
ねこのてそう
ねこのてそう
妻、娘、ネコと暮らす、超記憶力の悪い30代のオッサン。 好きな言葉は、死ぬこと以外、かすりキズ。 尊敬する人は絵を描ける人とピアノを弾ける人。嫌いなものはタバコ。 元2ちゃんねる管理人ひろゆきが好き。(趣味と思考が似てる) ニコニコ生放送の、暗黒リスナー歴9年。