WordPress モバイル

AFFINGER5(WING)スマホ用スライドメニューの設定方法をわかりやすく解説

投稿日:2018年4月14日 更新日:

AFFINGER4からAFFINGER5になりスマホやタブレットでスライド表示方式のメニューが使えるようになりました。ほかのサイトと大きく差別化できるユーザーインターフェイスに優れた機能なので、ぜひ活用したいところです。

この記事ではスマホ用スライドメニューに絞り、AFFINGER初心者の方でもかんたんに設定できるようていねいに解説します。

なおAFFINGERでのプライマリーメニューの設定がすでに済んでいることを前提とします。

 

スマホ用スライドメニューとは

スマホ用スライドメニューはスマートフォントップ(下画像の右)の最上部の三本線マークをタップすることで表示されるメニューです。

最上部の三本線マークを左右のどちらかに設定することが可能で、それに伴いスマホ用スライドメニューを左や右に表示することができます。

ここでその呼び名についてご注意いただきたいのですが、スマホ用スライドメニューとは左右のサイドにスライド方式で表示できる領域を指し、決してメニューそのものの名称ではありません。

厳密に記述すれば

スマホ用スライドメニューにはスマートフォン用メニューが表示される

となります。

下の画像で詳しく解説しましょう。

AFFINGER5ではスマホ用として二つのメニューが用意されています。

slidemenu

上の画像右から

スマートフォン用ミドルメニュー

スマートフォンのトップに表示されるメニューです。

スマートフォン用メニュー

最上段左の三本線マークをタップし、スマホ用スライドメニューに表示されるメニューです。

まずこの違いをしっかり認識しておいてください。

 

2018年07月13追記

三本線メニューマークとロゴの位置関係についてお問い合わせをいただきました。

そらよりブログは現在

[A]

slidemenu180713_02

となっています。

しかし以下のように三本線メニューマークの真横にご自身のロゴが表示される方もいらっしゃいます。

[B]

slidemenu180713_03

 

これはダッシュボード「外観」>「カスタマイズ」>「ロゴ画像」>「モバイル用ロゴ画像」の設定の差によるものです。

[A]の表示はつぎのように「モバイル用ロゴ(又はタイトル)を使用する」以下のチェックボボックスを外してあります。

この部分にチェックが入っていると[B]の表示となります。下の画像内の注意書きにあるように「スマホ追加メニュー(SNSリンクボタンのあるスペース)は表示されなくなります」。

slidemenu180713

ここでご注意いただきたいのはPC用に設定したロゴ画像がある程度大きくないと、チェックを入れない場合、スマホ用ではとても小さく表示されてしまう点です。そらよりブログでは

PC用ロゴ画像 横1114px
スマホ用ロゴ画像 横1114px

で挿入しています。

「PC用のロゴ画像を大きくしたくない」と「スマホ用ロゴ画像を使いたくない」はトレード・オフの関係にあります。

 

スマートフォン用メニューの設定方法

[1]スマホ用スライドメニューに表示されるスマートフォン用メニューの設定方法を解説します。

slidemenu04

まずダッシュボード/外観/メニューを表示します。

[2]「メニューを編集タブ」で「編集するメニューを選択」の内容に「スマートフォン用メニュー」の文言が含まれていることを確認してください。そらよりではデフォルトの「プライマリースティンガーヘッダー」メニューに含まれています。

[3]含まれていなければ同画面最下段の「スマートフォン用メニュー」にチェックを入れます。

[4]そして「位置の管理タブ」を選択・表示し、「スマートフォン用メニュー」に[2][3]で設定したメニューを選択します。

 

スマホ用スライドメニューのアイコンと追加メニュー

ダッシュボード/AFFINGER5管理/メニューの「スマホ用スライドメニュー」でアイコンと追加メニューが設定できます。

slidemenu01

 

【アイコンデザイン】

デフォルトでは「ノーマル」が設定されています。「クール」は三本線が細くなります。「カット」は三本線マークが斜めに切られたデザインになります。

【メニューの位置】

スマホ用スライドメニューの左右の位置に切り替えはここで行います。

【追加メニューのWebフォント】

ここも混乱しやすいポイントです。そらよりはスマホ用スライドメニュー内部に「追加メニュー」が表示されるのかとばかり思っていました。そうではなくスマートフォントップの三本線マークの右に表示されます。

とりあえずそらよりはTwitterアカウントにリンクするようにしました。

WebフォントはFontAwesomeのVer4.7.0であることに注意してください。各アイコンは以下のサイトで確認できます。

https://fontawesome.com/v4.7.0/icons/

そらよりはTwitterのアイコンを使用したいのでアイコン名であるfa-twitterを入力しました。

続いて「追加メニューに表示する文字」も入力しましょう。

 

スマホ用スライドメニューに最新の投稿一覧を

スマホ用スライドメニューのスマートフォン用メニューの下にウィジェットの操作で任意の要素を配置することができます。

そらよりは「05_STINGER最新の投稿一覧」ウィジェットを配置しました。

 

slidemenu02

ダッシュボード/外観/ウィジェットで「アコーディオンメニュー内下に表示」のラベルに「05_STINGER最新の投稿一覧」ウィジェットをドラッグして挿入します。

ここも混乱しやすい部分です。「スマホ用スライドメニュー」だとばかり思っていた領域が「アコーディオンメニュー」と定義されています。両者は同一のものと認識してかまわないようです。

2018年4月17日追記:現在、アイコン部分の背景が四角く切り取られています。申し訳ありませんが原因は不明です。気になる方はアイコンを四角いものに変更することをおススメします。

slidemenu07

 

スマホ用スライドメニューのカラーの設定

スマートフォントップとスライドメニューの各部のカラーの設定はダッシュボード/外観/カスタマイズの「[+]メニューのカラー設定」にある「スマートフォン」と「スマホ追加メニュー」の各項で行います。

 

slidemenu03

 

三本線マークのスクロール追尾

そらよりはスマホ用スライドメニューを表示するための三本線マークを画面のスクロールに併せて追尾する機能を設定しています。これによりオーディエンスがいつでもメニューにアクセスできるようになります。

slidemenu06

ダッシュボード/外観/カスタマイズの「[+]メニューのカラー設定」にある「スマートフォン」の項(「スマホ追加メニュー」のすぐ上)にある「表示パターンB(スクロール追尾)」にチェックを入れます。

 

これでスマホ用スライドメニューの設定が完了です。

 

スマートフォン用ミドルメニューの非表示

なおそらよりはスマートフォン用ミドルメニューを非表示にしています。使いやすくインパクトのあるスマホ用スライドメニューへとオーディエンスを誘導するためです。

slidemenu05

ダッシュボード/AFFINGER5管理/メニューの「スマホ用スライドメニュー」で下段にある「スマホ用ミドルメニューを表示する」の項のチェックを外します。

 

-WordPress, モバイル
-

Copyright© IT-SORAYORI , 2018 All Rights Reserved.