AFFINGER

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

2020-05-22

affinger-menu-bar

 

悩む人
メニューバーの設定方法が分からない
AFFINGER5でのメニューバーのカスタマイズ方法分からない
あきブログのメニューバー真似したい

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

 

本記事の内容

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

 

ブログの構成要素のうちの一つ「メニューバー」

 

どんなサイト情報があるのかを一瞬で伝える役割があります。

 

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

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

 

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

 

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

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

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

 

メニューバーの役割

メニューバー

メニューバーとは、ヘッダーの下側に設置されたサイトを案内する領域のことです。

 

スペースは狭いですが、メニューバーがあることによって読者にどんなサイトなのかを一瞬で伝えれます。

メニューバーによって収益がUPしたり、サイト滞在時間が増えるので設定は必須です。

 

メニューバーについては下の記事に詳しくまとめてあります。

メニューバーの作成のコンセプトが決まってない方は参考にしてください。

 

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

AFFINGERメニューバー

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

 

メニュー

メニュー設定

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

このページではメニューバーについての項目を設定できます。

 

  • メニューバーの表示項目設定
  • メニューバーの設置位置

 

メニューバーの表示項目設定

はじめに「新しいメニューを作成しましょう。」をクリックしてください。

メニュー名にタイトルを入れて、好きな項目を追加します。

メニュー項目追加

メニュー項目には4パターンがあります。

  • 投稿
  • 固定ページ
  • カスタムリンク
  • カテゴリー

 

固定ページや書いた記事、カテゴリーなどは設定しやすいように組み込まれています。

それら以外にメニューバーに載せたいものがあれば「カスタムリンク」を使って、好みのメニューバーを設定しましょう。

 

設定したら「ナビゲーションメニュー」にメニューバーに表示させたい名称を設定してください。

 

ドラッグすることで順番や、メニューをドロップダウンに設定することも可能です。

ドロップダウンメニューのイメージは写真を参考にしてください。

ドロップダウンメニュー

 

最後に「メニューを保存」で有効化しましょう。

 

メニューバーの位置設定

メニューバーの位置設定はたくさんありますが、一般的に以下の項目の設置を検討しましょう。

  • ヘッダー用メニュー(or ヘッダー用メニュー(横列))
  • サイド用メニュー
  • スマートフォン用スライドメニュー

 

スマホスライドメニュー

スマートフォン用スライドメニューとは、写真のようなスマートフォン用のメニューです。

スマートフォンでは表示面積がパソコンに比べて狭いです。

なのでスライドメニューを設置した方がユーザビリティが高くなります。

 

AFFINGERでのスマートフォンメニューの設定方法は、こちらの記事でまとめています。

スマートフォンメニューを設定したい方は参考にしてください。

 

カスタマイズ

ブログメニューバー設定

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

ここではメニューバーの色や表示サイズを設定できます。

 

自分のサイトに合わせたカラーを設定しましょう。

 

あきブログのメニューバー設定

akiblog

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

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

 

「あきブログ」のメニューバーはユーザビリティを考慮した結果、カテゴリーを設置しています。

 

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

  • HOME(カスタムリンク)
  • ブログ(カテゴリー)
  • デザイン(カテゴリー)
  • アフィリエイト(カテゴリー)
  • Twitter(カテゴリー)
  • AFFINGER(カテゴリー)

 

ドロップダウンメニュー(第2層)は現在使っておりません。

理由は記事数が少ないので分ける必要性がないからです。

記事数が少ないうちはカテゴリーを細かく分けてしまうと、質素な印象を与えてしまうのでオススメしません。

 

今後記事が80〜100記事を超えた辺りから、カテゴリーを更に分けようと考えています。

 

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

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

 

メニュー

あきブログメニューバー

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

このページでは何をメニューバーに表示するか、どこに設置するかを決めています。

 

メニューの位置設定は以下の2つです。

  • ヘッダー用メニュー
  • スマートフォン用スライドメニュー

 

私はメニュー構造を一つしか作ってませんが、設定位置ごとにメニュー項目を変えることができます。

 

カスタマイズ

あきブログメニューバー設定

WordPress管理画面より「外観」→「カスタマイズ」です。

ここではメニューバーの色の設定や、細かい装飾を設定できます。

 

各色変化させるとどこが変わるのかはご自身で確認してみてください。

あきしゅん
いろいろ色を試してみると楽しいよ!

 

設定をこだわってるのは以下のメニューです。

  • 第一階層メニューを太字にする(サイドメニュー連動)
  • メニューをセンター寄せにする
  • メニューの横幅を100%にする
  • メニューの幅

 

第一階層メニューを太字をすることで強調し、見やすくしています。

 

メニューをセンター寄せにしてます。

メニュー項目が5個以上あるなら、バランスを意識するとセンター寄せにした方がいいです。

 

メニューの横幅を100%にしてます。

これもバランスを意識しているからチェックしてます。

 

メニューの幅もバランスよくするために設定してます。

これに関してはメニュー項目が6つ以上の方は調整することをオススメします。

 

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

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

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

 

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

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

 

読者目線で作成を第一とし、自分好みのメニューバーを作ってブログを楽しみましょう。

 

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

AFFINGER記事一覧

 

 

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

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

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

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

 

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

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

 

こんな方にオススメ

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

 

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

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

 

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

AFFINGER5の購入はこちら

 

-AFFINGER

©️ 2020 あきブログ