【図解】simplicityのスマホ画面のメニュー表示の変更方法と種類の解説

シェアする

今回は、wordpressのテーマ(テンプレート)でsimplicityを用いている際のスマホのメニュー表示の変更方法と、種類について図解で解説したいと思います。

ここについては、simplicityを使っている場合は、デフォルトではスマホの画面の一番右上に三本の線(アコーディオン)が出ていると思います。このアイコンをクリックするとPCのナビゲーションメニューと同じ表示が出てきます。

ここの表示方法について、変更することができます。お好みのタイプに変更してみてください。

■スマホのメニュー表示の変更箇所

(1)上の写真のように、wordpressの管理画面で、「外観」⇒「カスタマイズ」を開き、「レイアウト(モバイル)」を選択します。

(2)レイアウト(モバイル)の画面が出てきたら、モバイルメニュータイプというのが出てきますので、ここでお好みのタイプを選択してメニュー画面の表示を変更します。

ただ、言葉だけでは、どんな表示になるかはわからないので、以下に図解したいと思います。

■アコーディオン(デフォルト)

デフォルトで設定されているのが、このアコーディオンタイプです。画面の一番右上に、三本線の表示が出ており、このアイコンをクリックすることで、PCと同様のナビゲーションメニューが出てきます。

■アコーディオンツリー

写真のように、デフォルトのアコーディオンタイプと、若干デザインが異なります。

デフォルトと違って、子カテゴリー、孫カテゴリーについては、クリックしないと出てこない仕様になっています。

■モーダルメニュー

アイコンのデザインは、アコーディオンと同様です。アイコンをクリックすると、写真のような感じで、デザインが異なってきます。

■スライドインライト、スライドインダーク(おすすめ)

個人的におすすめなのが、これから話すスライドイン表示です。ぱっと見、一番目立ちます。

しかも、このスライドイン表示は写真のように画面をスクロールしても追従してくるタイプの画面です。アコーディオンタイプなど、他のメニューのアイコンは追従してきません。

また、ナビゲーションメニューだけでなく、検索画面やサイドバーも選択できます。各記事の画面では、前後の記事も選択できるようになっています。

アコーディオンタイプなど、他のメニュー表示では、サイドバーは各ページの一番下に出てきますが、スライドイン表示では、一番下の表示が消えていて、その代わりサイドバーのアイコンが追加されています。

サイドバーには、見てほしい情報が詰まっているでしょうが、おそらく、このスライドイン表示にしておくと、見られやすくなるのではないかと思います。

選択画面では、ボタン上、ボタン下のどちらかを選択することになりますが、これは上部で追従するか、下部で追従するかを選択できます。グーグルアドセンスでページ単位の広告で追従型の広告を選択している場合は、「ボタン上」を選択してください。

なお、ライトとかダークとかありますが、メニュー画面の色はどちらも同様になります。上の写真のように、ナビゲーションメニューやサイドバーの表示で違いが出てきます。ライトは薄めの配色、ダークは濃い配色ですね。

このスライドイン表示ですが、写真のように、日本語表示か英語表示を選択することができます。

※モバイルメニュータイプの下に「スライドインメニューを日本語表示」とあるので、チェックを入れれば日本語、外せば英語表記となります。

〇設定してもスライドイン表示されない場合

なお、スライドイン表示については、wordpressの管理画面に書いてあるように、完全レスポンシブ機能がオンでは使用できないため、オフになっている必要があります。

完全レスポンシブ機能のオン・オフについては、「外観」⇒「カスタマイズ」⇒「レイアウト(全体・リスト)」に進んで、赤枠の「完全レスポンシブ表示を有効」というところで選択します。

スライドイン表示にする際は、チェックを外してください。もし、設定してもスライドイン表示されない場合は確認してください。

※なお、メニューボタンのアイコン、記号や文字の色の変更については、「外観」⇒「カスタマイズ」⇒「色」にてメニューボタン色、メニューボタン背景色の変更を行ってください。詳しくは以下。




シェアする

フォローする

この記事をお届けした
解放デビューの最新ニュース情報を、
いいねしてチェックしよう!
スポンサーリンク

スポンサーリンク