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管理/メニューの「スマホ用スライドメニュー」で下段にある「スマホ用ミドルメニューを表示する」の項のチェックを外します。

 

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


ランクアップに応援ください
にほんブログ村 ライフスタイルブログ 暮らしを楽しむへ 人気ブログランキング
  • この記事を書いた人
  • 最新記事

sorayori

昭和半ば生まれのおじさんです。妻と娘と猫と金魚と東京・吉祥寺にひっそり暮らしています。息子夫婦に孫娘ちゃんもいます。くらしとデジタルとこころにうるおいをお届けしたいと思っています。

人気の記事

1

最近ココナッツオイルがブームとかで、我が家にも常備されるようになりました。朝食のパンやサラダだけでなく、コーヒーに溶いて飲むというようなことをしています。たおやかな甘さが口の中に広がり、南国パラダイス ...

horeizaiinhair 2

  本格的な夏がもうすぐやってきます。みなさん暑さ対策、熱中症予防はどのように工夫していますか。 うちの娘ちゃんによると、ポニーテールが結べるくらいの髪の長さがあれば、かんたんでとってもよい ...

12本体アップ 3

  いったいどれほどの方に役立てていただけるかまったく自信がございませんが、ニッチな話題が好きなそらよりは今回噴霧器のレビューを書くのであります。(2016年5月8日追記 「使用後の洗浄」に ...

hanazo 4

「花ぞ」の花は梅 東進の「全国統一中学生テストTVCM」で、先生が板書をしながら生徒に注意をうながします。 「この、花ぞの花は梅だからな」 すると一人の生徒が手を挙げ質問します。 「なぜ桜じゃなくて梅 ...

rakuchinpack01 5

  キッチン用保存容器の条件とは お料理上手の条件は段取り上手。手にヨリをかけて作ったせっかくのご馳走も冷めたり、伸びたりしては台無しです。美味しいものを美味しいうちにテーブルに並べるには、 ...

leplus01 6

  いままで900円台のイヤフォンを使っていた輩が、音がどうのこうのと申し上げるのは誠に恐縮なのですが、いやハイレゾイヤフォンの音の良さったらすごかったです。   スポンサーリンク ...

aircon_kojihikomi 7

  もう20年近く使ってきたエアコンが、この夏動かなくなりました。エアコンの買い替えはシーズンが替わる11月、それも水曜日が安いと耳に挟んだので、このたびちょい古な2016春夏モデルを購入し ...

EGT260DX01 8

50対1を守らないとどうなるか? 新規に購入した草刈機の最初の使用時に、間違って25対1の混合燃料を入れてしまいました。因果関係は不明ですが、エンジンが掛かりません。 こうした状況について推測できる範 ...

パスワード作成 9

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

pdfedit 10

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

スプレー容器 11

春夏秋冬、汗っかきさんにとって気を緩めてよい季節なんてありませんよね。朝夕と昼の温度差が激しかったりしようものなら、うっかり服装のチョイスをまちがえ、外出先で大汗をかくということしばしばです。 そんな ...

sentakki_door03 12

  歳の瀬に朝から困ったことが起きました。洗濯機のドアが開かなくなってしまったのです。 2008年に購入したPanasonicのドラム式洗濯機NA-VR1200Lという機種です。購入してから ...

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

Copy Protected by Chetan's WP-Copyprotect.

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