カスタマイズ

【基本中の基本】AFFINGER4でヘッダー用メニューを作成する方法

投稿日:2016年10月10日 更新日:

メニューを作る

AFFINGER4のテンプレートを適応させたばかりの状態では、ヘッダーのメニューが1つしかなくてちょっと寂しい状態です。このままではユーザーがどこの記事を読んだら良いのかわからなくて迷ってしまうでしょうね。。

そこでこのヘッダーメニューを追加していきましょう。その方法は超簡単ですよ!

メニューに追加するページを作る

固定ページを追加

メニューに追加するのは投稿ページでも固定ページでも良いのですが、基本的には固定ページを用意してあげるのが良いでしょう。

固定ページは投稿ページの上司みたいな感じですから、この上司をメニューには配置してあげるのが自然です。そうするとサイト構造がよくわかるようになり、ユーザビリティ的にもSEO的にも強くなるはずです!

メニュー 作り方

なので、サイトの中でも絶対に見て欲しい記事を固定ページとしてまず用意します。「◯◯とは」「◯◯ランキング」「◯◯の購入方法」といった重要記事ですね。

固定ページは管理画面上部の「+ 新規」というボタンから追加できます。僕は例として、「AFFINGER4カスタマイズ」「商品ランキング」「お問い合わせフォーム」の3つの固定ページを用意しました!

このように固定ページが用意できたら、それらをメニューとして配置してきます。

メニューに追加する

メニューを追加

固定ページが用意できたら、それらをメニューに追加していきましょう!

管理画面上部の「カスタマイズ」をクリックし、「メニュー」>「メニュー追加」と進みます。

そうすると固定ページをメニューにどんどん追加していけますので、自分の好きな順番で配置しましょう。また、ここでメニューの名前も決められますので、名前の変更も同時にやっておきましょう。

ヘッダー用にチェックを!

ヘッダー用メニューに設定

メニューカスタマイズを一通り終えたら、最後に「ヘッダー用メニュー」にチェックを入れておきましょう。

そうすればメニューがヘッダーに追加されるようになり、カスタマイズは完了です!

AFFINGER4のメニュー完成!

メニュー完成

お疲れ様です。これでAFFINGER4にメニューを配置できました。

ただし、まだCSSのカスタマイズを行っていないのでかなり簡素ではあります。見た目をガッツリいじりたいなら、ここからCSSカスタマイズへと移っていきましょう!

この記事をシェアしませんか?

おすすめ記事一覧

cropped-cropped-cropped-af3-3.png 1
超優秀!AFFINGER4の注目すべき機能8つ&購入者特典3つ

AFFINGER4の特徴と機能 当サイトはAFFINGER4の見本サイトです。AFFINGER4にはどのようなサイトを作ることができるのかを視覚的に分かりやすく示すために作られたサイトですね。 なお「 ...

ランキング 2
猿でも出来る!AFFINGER4の「商品ランキング」作成方法

AFFINGER4の独自機能といえば「誰でも簡単に商品ランキングが作れること」ですよね! AFFINGER4ならHTML/CSSをほとんど知らなくてもちゃんとランキング作成ができるようになっています。 ...

-カスタマイズ

Copyright© AFFINGER4の見本サイト , 2018 AllRights Reserved Powered by AFFINGER4.