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年12月1日追記:
アイコン部分の背景が四角く切り取られるケースがあります。原因は後述の「スライドメニューバー背景色」と連動していることによるものです。「スライドメニュー内背景色」と同一の色を使用すると消えます。

slidemenu07

 

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

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

 

slidemenu03

 

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

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

slidemenu06

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

181201追記:
AFFINGER5(WING)ver20181120で関連サイト「想うがままに mysorayori」を開設して間もなく、登録したGoogleサーチコンソールからモバイルユーザビリティについて「クリック可能な要素同士が近すぎる」という理由で修正を求めるメールが届きました。スマホで確認すると三本線とロゴマークが透過となり常時追尾したままの状態で表示されています。記事が見にくくなるだけでなく、アドセンス広告と重なった場合、規約に触れる可能性もあります。そこで上記の「表示パターンB(スクロール追尾)」のチェックを外し再評価を依頼したところ、2日後に「改善」された旨の連絡がありました。その後、再度「表示パターンB(スクロール追尾)」にチェックを入れ「追尾」を有効にしたところ今度は不具合の発生は見られませんでした。原因は不明ですが、もしも同様のケースでお困りの方は、チェックの有効無効を繰り返すことで改善されるものと思われます。

 

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

 

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

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

slidemenu05

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

 

 

WING(AFFINGER5)はそらよりブログ、IT-SORAYORI、mysorayoriなど運営する5つのブログで活用しています。カスタマイズのバリエーションが多く、自分好みのデザインが実現できる、とても使いやすいテーマです。決して安価なものではありませんが、本格的に取り組みたいという方にはおすすめです。

最新版の詳しい情報をこちら(スポンサーリンク)から、ぜひどうぞ。

YouTubeの紹介動画も!

 

スポンサーリンク

スポンサーリンク

スポンサーリンク

お役立ち記事

jose-ros-photo-1307491-unsp 1
renet01 2
181115serverplan3 3
171106twittertsuchi2 4
pdfedit 5
Twitterスパムアイキャッチ 6
photo_gallery10 7
spotify_1807 8
ipodアイキャッチ 9
プリンター250 10
Evernote新機能01 11
無線LAN04-2 12
zenfone_filedelete46 13
kensaku05 14
spotify_sf_size01 15

-WordPress, モバイル
-

Copyright© IT-SORAYORI , 2019 All Rights Reserved.