目次
WordPress関連の忘備録
このサイトはJetpackというプラグインのJetpack モバイルテーマを有効化という機能でレスポンシブ対応しています。
シンプルで見やすく不必要にプラグインが増えないので組み込まれている機能は最大限活用しようと思っています。
気づくのに時間がかったのですが、スマートフォンの画面で見た際にメニューの下の方にある項目までスクロールできないことによりすべての項目が表示されないという問題がありました。
メニューがスクロール出来ず、すべて表示されない
(プルダウンメニュー、トグルメニュー、ドロップダウンメニュー、いろいろな呼び名があると思いますが、このサイトの場合は一番左上に表示されているものです。)
そこで今回は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;
}
このように加筆しました。
同じようなトラブルがまた発生した時に慌ててしまいそうなので忘備録として書きました。
注)すべての人が同じ方法で解決できるとは限りません、また間違っている箇所があるかもしれません。他のトラブルがこの方法をとった事で発生するかもしれません。あくまでも自己責任で。