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

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

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

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

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

 

 

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

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

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

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

厳密に記述すれば

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

となります。

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

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

slidemenu

上の画像右から

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

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

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

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

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

 

スポンサーリンク

 

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

[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

 

スポンサーリンク

ドメイン1個無料プレゼント中(新規または移管/更新料も永久無料に)2018年5月31日(木)18:00まで

 

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

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

slidemenu06

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

 

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

 

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

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

slidemenu05

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

 

ピックアップ記事(一部広告)


ランクアップに応援ください
にほんブログ村 ライフスタイルブログ 暮らしを楽しむへ 人気ブログランキング

人気の記事

gretel 1

  NHK Eテレの「グレーテルのかまど」(毎週月曜 午後10時放送)をご存じですか。瀬戸康史扮するヘンゼルが、しゃべる「魔法のかまど」(声:キムラ緑子)にさまざまなスイーツの作り方を教えて ...

パーティ開け11 2

  ポテチの袋、いつもどうやって開けてますか? 友達やパートナーとシェアして食べるとき、普通に開けたら、開封口の向きが気になって、ちょっと不便ですよね。横から手を入れるのも汚れて面倒。 つい ...

Twitterスパムアイキャッチ 3

  【1】Twitterの障害をチェック 検索できない、ツイートできない、プロフィールを編集できないなど、なんらかの不具合を感じたら、まずTwitterに障害が発生していないか、チェックして ...

photo_gallery10 4

  スマホのカメラが優秀で、いろいろ撮影しては外部ストレージのSDカードに保存しています。内部に保存したらメモリーがもったいないですからね。 また、たとえばこのブログ用の写真などはパソコンに ...

ipodアイキャッチ 5

2016年10月6日更新 iPodが同期できないとお悩みの方へ。WindowsのiTunesでVer.12.5.1.21を確認したところ、とっても簡単になっていたのでその方法をシェアします。 従来のタ ...

kensaku05 6

  とにかくGoogleが好きで、少しぐらいなら私の秘密を打ち明けてもよくってよ、と思ってるぐらいですから、当然検索エンジンも「既定」にGoogleを設定しております。しかし、これが突然Ya ...

掃除機ヘッド掃除アイコン 7

  今年も大掃除のシーズンがやってきました。お掃除道具が大活躍の季節ですね。でも、ちょっと待ってください。あなたのお家の掃除機、しっかり働ける準備はできていますか。 もしも吸い込み口のあるヘ ...

無線LAN04-2 8

  2階建てや3階建ての木造住宅で無線LANを使っている方。電波が途切れがちでいらいらしませんか。そらよりもじつはつい最近まで気がおかしくなりそうなほど頭にきていました。いや、それは大げさだ ...

EGT260DX05 9

  まずお断りしておきます。この草刈機にまったく罪はございません。すべてこのドシロートが誤った使い方をした結果、自ら不具合を招いただけなのであります。 結論から先に申し上げておきましょう。草 ...

sheet13 10

  フローリング用の定番お掃除道具といえばクイックルワイパー(c)ですよね。一時期、格安類似品を使っていましたが、取り回しが悪かったり、スティックが折れたり、不具合ばかりですぐ戻ったことがあ ...

hub02 11

  ネットワーク接続がすぐ途切れてしまうわが家の無線LANの不具合については、こちらの記事 2階3階建て木造住宅の無線LANルーター親機子機は「垂直配置」で間違いなし! で、すでに解決済のは ...

ikea_driver02 12

  2017年2月6日追記 「通りすがりの者」さんから次のご指摘をちょうだいしました。 イケアの家具に使われているプラスねじは「ポジドライブ」というイギリスの規格なので、日本のJIS規格のプ ...

パスワード作成 13

  パスワードがいくつもあって管理できない、と昔から言われ続けていますが、いっこうに改善される気配がありません。 でもパスワードを使う場面はますます増えています。 もしもご自分のパスワードの ...

pdfedit 14

無料で配布されているPDFビューア「Acrobat Reader(旧Adobe Reader)」はPDF文書の表示、検索、印刷、テキストやフォームの入力、注釈機能の使用が可能です。 しかし画像を挿入・ ...

-AFFINGER, WordPress, セレクトワード, モバイル&PC
-

Copy Protected by Chetan's WP-Copyprotect.

Copyright© そらより , 2018 All Rights Reserved.