コメントするWordPressのスマホレイアウトでメニューボタンが動かない!ある特定の条件下で、Wordpressのテーマ、Twentytwelveのスマホ用メニューが開かない場合がある。Twentytwelveを使っている。WordPressのテーマ(テンプレート)にtwentytwelveを使っている時にこれは発生する。子テーマを使用していて、header.phpをカスタマイズしている親テーマのheader.phpがアップデートで変更になった。具体的には端末判定によるスマホ対応ではなく、レスポンシブデザインによるスマホ対応になった。レスポンシブってなに?って場合はこちらのレスポンシブデザインでtableタグを制御をチェック。この2つの条件が当てはまる場合に、Twentytwelveのスマホメニューが動かなくなる。右上の「編集するテーマを選択:」の箇所がTwentytwelveの子テーマになっている事を確認して、「header.php」を編集する。?></button>これでメニューが動くようになったはずだ。カスタマイズは自己責任で。心配ならバックアップを取っておこう。コメントするスマホで「三」をタップ(クリック)すると、メニューがニュル~っと出てくるやつ正式名称は、ハンバーガーメニューと言うらしいが、あまりこの呼称は浸透していない。これを導入してみよう。導入イメージはこんな感じ↓デモページはこちら(デモページ右上にMENUがある。)jQueryなどのメニューに必要なものを揃える右クリックで「対象を保存」などでダウンロード可能。・jquery.min.js・jquery-ui.min.js・menu3.js・index.html・menu3.css・「三」と「X」の画像これが最低限必要。ちなみに、上記リンク先は全てテキストにしているので、ダウンロードして使う場合は、拡張子の.txtをそれぞれ、「.js」「.css」「.html」などに変更しておくこと。3menu.zip↑index.html、menu3.css、menu3.js、jquery.min.js、jquery-ui.min.js、MENUとXの画像2個を全てまとめて圧縮したもの(フォルダ階層あり)はこちら。サーバー上に設置cssフォルダ/menu3.cssimgフォルダ/menu.png、menu2.pngjsフォルダ/jquery.min.js、menu3.js、jquery-ui.min.jsindex.htmlと言う感じで設置する。パーミッション等は変更必要ないので、そのままアップロードする。書いている部分を修正。追加すれば、メニューは自動的に増える。center;}この辺りを修正。画像等も適当に入れ替え可能。テキストにする事も可能。その場合はCSSでサイズなどを調整する必用がある。iOSのRetinaディスプレイ対応のため、画像サイズが陪になっている。src=”js/menu3.js”></script>menu3.jsスタイルシートなどに記述するクラス名などを変更したい場合はこちらを編集。コメントするドロップダウンメニューというか、プルダウンメニューというか...下層の表示が縦並びになっているものしかない。したがって、子や孫の横幅を指定してやればこの問題は解決する。下層メニューの数はそれぞれ固有なので、仕方なく個別に指定するしかなかった。したがって、汎用性は全くない。参考程度にしかならないが、、結構困っている人がいたみたいなので、一応のTipsとして。4明日試したくなるカスタマイズ、ネットな日々に役立つ小技と、たまに旅行の妄想と。WordPressコメントを読み込み中...コメントをどうぞメール名前サイト。