Facebook
RSS Feed
Feb 22, 2017

スマホメニューの子階層(副項目)も常に表示させるカスタマイズ方法

Minimal WPのWordPressテーマは、
スマホビューの時に右上にハンバーガーメニューが表示されて、
クリックするとメニューが表示される、というパターンのテーマがあります。

この時、子階層(副項目)は非表示になっていて、
「親項目をクリックすると子階層がサブメニューとして現れる」仕様なのですが、
これを「メニューを開くと親も子も全階層のメニューが表示される」ように、
カスタマイズする方法を解説します。

スマホメニューの子階層(副項目)も常に表示させるカスタマイズ方法

◎ダッシュボード>外観>テーマの編集>スタイルシート(style.css)

スタイルシートを開きます。
一番下の方の『/* **** レスポンシブ(メディアクエリ)**** */』ブロックの中から、
以下の部分を探してください。

/* Mobile (Portrait) 画面の横幅が300px~767pxまで(基本)
---------------------------------------------------- */
@media only screen and (max-width: 767px) {

(省略)

}

上記の「{」〜「}」の間(どこでもOK)に以下の3行を追加します。

以上です。

これで子階層(副項目)も常に表示されるようになります。

Androidだとドロップダウンが上手くいかない場合があるので、
全表示にしておく方が使い勝手が良いかもしれません。
ただメニュー数が多い場合は、逆にiOSで見辛くなるかもしれませんので、
メニュー構成に合わせて、お好みでどうぞ。

*HTML/CSSカスタマイズをする時は、必ずバックアップを取った上でお願いします!

by |Posted in WordPress初心者講座

関連記事

今月の人気のワードプレステンプレートBEST 3

WordPressテーマ(スマホ対応レスポンシブデザイン)「Folclore」
ビジネス・企業サイト / マガジン
WordPressテーマ(スマホ対応レスポンシブデザイン)White Studio
ビジネス・企業/コーポレートサイト/公式サイト