AFFINGER

AFFINGER5(アフィンガー5)カスタマイズ設定【スライドメニュー編】

2020-05-24

affinger-slide-menu

 

悩む人
スライドメニューって何?
AFFINGER5でのスライドメニューのカスタマイズ方法分からない
あきブログのスライドメニュー真似したい

こんな悩みを解決します。

 

本記事の内容

  • スライドメニューについて
  • AFFINGER5のスライドメニューカスタマイズ方法
  • あきブログのスライドメニュー紹介

 

ブログの構成要素のうちの一つ「スマホ用スライドメニュー」

 

パソコンより表示画面が狭いスマホで、カテゴリー等を配置して使いやすくする機能の一つです。

その結果ユーザビリティを向上させることに役立ちます。

 

AFFINGER5では使い方さえ理解すれば、いろんなスライドメニューのデザインを思い通りに作ることができます。

あきしゅん
この記事を読めばあなたも、思い通りにスライドメニューが作れちゃいます。

 

本記事ではAFFINGER5のスライドメニュー設定を詳しく説明します。

なおパソコンでこの記事を見てる方は、スマホでデザインを確認しながら読むと理解しやすいです。

 

この記事で紹介するカスタマイズ設定を丸パクリしてもらって構いません。

またこのブログ記事を読んで、同じスライドメニュー構成にしたという方がいれば、Twitterから一言いただけると嬉しいです。

一言いただけたらブログ見にいって宣伝させてもらいます!

 

スライドメニューとは

ブログデザイン役割

スライドメニューとはスマホ用のメニューです。

上画像のようにスマホ画面左上の三本線をタップすると、メニューが表示されるようになっています。

 

三本線は左上でも右上でも設定が可能で、設定場所によりメニューが左や右に飛び出します。

 

スライドメニューがあることで、パソコンより狭い表示サイズのスマホで、情報を整理することができます。

読者はメニューからいつでも検索できるため、結果ユーザビリティを向上させることに役立ちます。

 

スマホで情報検索をする今の時代、使いこなしたい機能の一つです。

 

スライドメニュー注意事項

ブログデザイン注意

スライドメニューはどうしてもスマホ画面の大きさのせいで、表示面積は小さいです。

なので情報を載せすぎると見づらくなってしまいます。

 

読者ファーストでスライドメニューを作りましょう。

 

スライドメニューの作成においての注意事項をまとめました。

  • 広告を載せない
  • 縦に情報を詰めすぎない

 

広告を載せない

ブログ収益を上げるために、アドセンスやアフィリエイト広告を載せたくなるでしょう。

しかし、広告をスライドメニューに載せるべきではありません。

 

理由は読者が求めてる情報ではないからです。

 

ただえさえ狭い領域しかないスライドメニュー。

その中に広告を載せたら場所をとってしまいます。

 

読者は広告をクリックするために、スライドメニューを開きません。

カテゴリーや固定ページ等の他記事を探すために、スライドメニューを開きます。

 

読者ファーストを意識し、スライドメニューに広告を載せないようにしましょう。

 

縦に情報を詰めすぎない

スライドメニューに縦に情報を詰めすぎて、スクロールしないと全詳細が見えないは避けましょう。

 

スライドメニューはパソコン表示でいう、メニューバーとサイドバー、フッターのいいとこ取りをしてるポジションです。

メニューバー、サイドバー、フッターの中から読者がよく使うであろうメニューのみを入れましょう。

 

何か記事をスライドバーに設定する場合は、特に注意が必要です。

アイキャッチ(ブログカード表示)が大きく面積をとってしまうと、縦に長いスライドメニューになってしまうからです。

 

見やすいスライドメニューにするために、縦に情報を詰めすぎないように気をつけてください。

 

【AFFINGER5】スライドメニューカスタマイズ方法

AFFINGERスライドメニュー

AFFINGER5のスライドメニューに関する設定方法を説明していきます。

 

AFFINGER5管理

スライドメニュー設定

WordPress管理画面より「AFFINGER5管理」→「メニュー」→「スマホ用スライドメニュー」です。

テーマ管理ではスライドメニューの有無や、スライドメニュー用のアイコンのタイプ・位置を設定することができます。

 

ウィジェット

スライドメニューウィジェット

WordPress管理画面より「外観」→「ウィジェット」です。

スライドメニュー関連の設定は赤枠の「スライドメニュー内上に表示」「スライドメニュー内下に表示」です。

 

メニュー設定で「スマートフォン用スライドメニュー」を設定している場合は、その上下にウィジェットで設定したものを表示させることができます。

 

メニュー

スライドメニュー

WordPress管理画面より「外観」→「メニュー」です。

作成したメニューをスライドメニューに表示させたい場合は、「スマートフォン用スライドメニュー」にチェックを入れましょう。

 

カスタマイズ

スライドメニューカスタム

WordPress管理画面より「外観」→「カスタマイズ」→「メニューのカラー設定」→「スマホスライドメニュー」です。

ここではスライドメニューの色について設定できます。

 

あきブログのスライドメニュー設定

akiblog

あきブログのスライドメニュー設定を全て公開します。

(今後設定を多少変える可能性がありますが、大きく変わる予定はありません)

 

「あきブログ」のスライドメニューは、メニューバーやサイドバー、フッターの中からよく使う項目を設定してます。

あきしゅん
全てスライドメニューに表示すると、情報を詰めすぎることになるので厳選してるよ。

 

現在スライドメニューに表示してる項目は次の通りです。

  • メニューバーの各項目
  • 固定ページ全て

 

いずれ、アフィリエイト収益が安定し始めたら「お問い合わせ」ページをスライドメニューに加えます。

理由はASP会社が私のブログに、案件を提案してくれる可能性が増えると思うからです。

 

詳しく設定を見ていきます。

 

AFFINGER5管理

あきブログスライドメニュー設定

私はアイコンの設定を次のように設定しています。

  • アイコンデザイン → ノーマル
  • アイコン下に「MENU」「CLOSE」を追加する
  • メニューの位置 → 左

 

同じ設定にすると、色以外は同じ設定になります。

 

好みに合わせてカスタマイズしてみてください。

 

ウィジェット

あきブログスライドメニュー上ウィジェット

「スライドメニュー内上に表示」にはテキスト「メニュー」のみを表示させてます。

メニュー項目を目立たせるためです。

 

あきブログスライドメニュー下ウィジェット

「スライドメニュー内下に表示」には固定ページを挿入しています。

「固定ページ」ウィジェットを挿入するだけで、上記のように設定することができます。

 

メニュー

あきブログスライドメニュー

「スマートフォン用スライドメニュー」にチェックを入れてるメニューを表示させることができます。

 

カスタマイズ

あきブログスライドメニューカスタム

スライドメニューの色関連について次の項目を設定できます。

  • スライドメニューアイコンボタンの色
  • スライドメニューバーの背景画像や色
  • スライドメニュー内の色

 

あきブログは青をベースにしているので、上記画像の色に設定しています。

またスライドメニュー内の色は、トップページと被らないように薄く色を挿入しています。

 

【AFFINGER5】スライドメニューカスタマイズ設定まとめ

AFFINGER5でのスライドメニューの詳しい設定方法を解説しました。

また、私の「あきブログ」のスライドメニューの設定をご紹介しました。

 

デザイン性が高いAFFINGERで、自分好みのスライドメニューをカスタマイズしてみてください。

また、私のスライドメニューカスタマイズ設定も参考にしてみてください。

 

読者が使いやすいのを第一優先とし、自分好みのスライドメニューを作ってブログを楽しみましょう。

 

また、他に役に立つAFFINGERに関する記事は下記にまとめていますので、ご活用下さい。

AFFINGER記事一覧

 

 

この記事を読んでるという方はAFFINGERを既に使っている方だと思います。

以下の文章は WordPressテーマ「AFFINGER」を購入しようと思っている方向けです

AFFINGERならスライドメニューを簡単にカスタマイズできます。

実は私がWordPressでブログを初めて1週間の初心者時代から、このスライドメニューのデザインはほとんど変わっていません。

 

初心者でもAFFINGERなら、あなたが作りたいスライドメニューを簡単に作ることができます。

こちらの記事を読めばAFFINGERがいかにデザインカスタマイズ性が高いか評判を確認することができます。

 

こんな方にオススメ

  • 今のテーマでデザインに納得してない方
  • ブログ初心者でテーマ選びに迷ってる方
  • CSSの知識がないけどブログデザインに力入れたい方

 

これらに当てはまる方は是非早いうちに、AFFINGER導入を考えてみてください。

記事を数十本書いてからのテーマ変更は時間がかかったり、記事が修正不可能だったり大変なことだらけです。

 

効率よく、そして楽しくブログを運営していくために少し初期投資してみませんか?

AFFINGER5の購入はこちら

 

-AFFINGER

©️ 2020 あきブログ