画伯の試行錯誤 – 2018年03月06日 モバイルテーマのメニューの問題を修正。

WordPress関連の忘備録

このサイトはJetpackというプラグインのJetpack モバイルテーマを有効化という機能でレスポンシブ対応しています。

Jetpackのマバイルテーマ設定ON/OFF

JetpackのモバイルテーマON/OFF

シンプルで見やすく不必要にプラグインが増えないので組み込まれている機能は最大限活用しようと思っています。

気づくのに時間がかったのですが、スマートフォンの画面で見た際にメニューの下の方にある項目までスクロールできないことによりすべての項目が表示されないという問題がありました。

メニューがスクロール出来ず、すべて表示されない

スマホでこのサイトを表示した場合のスクリーンショット

スマホでこのサイトを表示した場合のスクリーンショット

(プルダウンメニュー、トグルメニュー、ドロップダウンメニュー、いろいろな呼び名があると思いますが、このサイトの場合は一番左上に表示されているものです。)

そこで今回はJetpackのプラグインが入っているフォルダ内にあるstyle.cssを一部書き換えてみる事にしました。(最善の方法では無いと思うのでただの僕の忘備録として見てください。)

Jetpackのstyle.cssの場所

このサイトの場合は以下のフォルダに入っていました。
wp-content/plugins/jetpack/modules/minileven/theme/pub/minileven/style.css

このstyle.cssを書き換えデフォルトのテーマカラーである青色からブロッコリープレスのコーポレートカラーの緑色へ変更も行っています。

378行目から388行目辺りにある項目に…

もともとはこんな感じ

#access ul.nav-menu {
	background: #fff;
	-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.15), 0 3px 8px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.15), 0 3px 8px rgba(0, 0, 0, 0.1);
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.15), 0 3px 8px rgba(0, 0, 0, 0.1);
	display: none;
 	position: absolute;
		left: 0.5em;
		top: 3em;
 	width: 100%;
 	z-index: 99999;
        }     

書き加えるコード

 height: 100%;
 overflow: auto;
 -webkit-overflow-scrolling: touch;

上記の項目を書き加えた最終的なコード

#access ul.nav-menu {
	background: #fff;
	-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.15), 0 3px 8px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.15), 0 3px 8px rgba(0, 0, 0, 0.1);
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.15), 0 3px 8px rgba(0, 0, 0, 0.1);
	display: none;
 	position: absolute;
		left: 0.5em;
		top: 3em;
 	width: 100%;
 	z-index: 99999;
 	height: 100%;
        overflow: auto;
       -webkit-overflow-scrolling: touch;
       }

このように加筆しました。

同じようなトラブルがまた発生した時に慌ててしまいそうなので忘備録として書きました。

注)すべての人が同じ方法で解決できるとは限りません、また間違っている箇所があるかもしれません。他のトラブルがこの方法をとった事で発生するかもしれません。あくまでも自己責任で。

下記のページを参考にさせていただきました。

Copyrighted Image

このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシー利用規約が適用されます。