AFFINGER

【AFFINGER6】ヘッダーメニューの設定方法|これで完璧です

【AFFINGER6】ヘッダーメニューの設定方法|これで完璧です
AFFINGER6(アフィンガー6)のヘッダーメニュー設定方法を教えて!

本日はこんなお悩みにお答えします。

 

この記事ではAFFINGER6(アフィンガー6)のヘッダーメニュー(横列)の設定方法や細かいカスタマイズ方法を解説しています。

 

✔本記事を書いた人

profile

ucozi(@ucozi_ikeda

この記事を書いている私は、ヨガスクールで宣伝部長として働いています。

仕事を通じて得た情報をもとに、信頼性の高い記事をお届けしています。

>> さらに詳しいプロフィールはこちら

 

ヘッダーメニューの設定方法

今回、設定するのはヘッダー部分のメニューです。

完成系はこんな感じ。

ヘッダーメニューの設定方法

 

手順は大きく分けると4つです。

  1. メニューに入れる項目を入れる
  2. 固定ページを作成する
  3. ヘッダーメニューを設定する
  4. 微調整を行う

順番に解説していきます。

 

手順①:メニューに入れる項目を決める

AFFINGER での作業を始める前に、メニューに含める項目を決めましょう。

これが決まってないと先に進めません。

絶対のルールとかはないので、好きな項目を設定したらいいのですが、おすすめは以下の3つを入れておくこと。

  • トップもしくはホーム
  • プロフィール
  • お問い合わせ

あとは、参考にするサイト見つけて研究し、お好みの項目を追加してください。

 

本サイトでは「ヨガインストラクターのためのブログの始め方」を紹介しているので、サンプルサイトでは、こんな感じで設定してみます。

  • Home
  • Profile
  • Works
  • Blog
  • Menu
  • Contact

サンプルでは横文字にしてますが、こちらはお好みで。

 

手順②:固定ページを作成する

固定ページを作成する

メニュー項目を決めたら、必要な「固定ページ」を作成します。

いつもブログ記事を書く「投稿」ではないので、お間違いなく。

「Home」はトップページなので、作成する固定ページは「Home」以外の5ページ分です。

 

固定ページは、ブログ記事などを表示する「投稿」と異なり、独立したページを作る時に使用します。

プロフィールやサイトマップ、お問い合わせなどなどに便利です。

うこじ

 

例:Profile を作成してみよう

サンプルでは「Profile」を作成してみましょう。

実際には残りの4ページも作成してください。

WordPressにログインして、「固定ページ」から「新規追加」をクリックします。

「固定ページ」から「新規追加」をクリック

 

「タイトル」と「本文」にそれぞれ入力していきます。

  • タイトル:Profile
  • 本文:お好みで

 

入力を終えたら「公開」ボタンを押して完了します。

「タイトル」と「本文」にそれぞれ入力していきます

 

「本文」にあたる自己紹介文の書き方については、以下の記事で詳しく解説しています。

≫ ヨガインストラクターのプロフィールの書き方|新米イントラにおすすめ

 

 

ちなみに、「プレビュー」ボタンを押すと、公開前にレイアウトなどを確認できます。

 

以上で「Profile」ページは完成です。

同じ手順で残りの4ページも作成しましょう。

 

全て準備できたら、AFFINGER のメニュー設定に進みます。
うこじ

 

手順③:ヘッダーメニュー設定を行う

WordPressにログインし、「外観」から「メニュー」をクリック。

「外観」から「メニュー」をクリック

 

「メニュー名」に任意の名称を入力。ここではそのまま「ヘッダーメニュー」としておきます。

「メニュー名」に任意の名称を入力

 

この項目は、管理用です。外に表示されることはないので、お好みで。
うこじ

 

「メニュー設定」から、下記にチェックし、「メニューを作成」をクリック。

  • ヘッダーメニュー(横列)
  • スマホスライドメニュー

 

メニューが作成ができたら、次にメニューに表示する項目を設定していきます。
うこじ

 

メニュー内容を設定する

左側にある「メニュー項目を追加」からヘッダーメニューに追加したいページを選んでいきます。

各項目を説明すると、以下のとおり。

 

  • 固定ページ
    ⇒ すでにある固定ページ

  • 投稿
    ⇒ すでにある投稿ページ

  • カスタムリンク
    ⇒ 何でもリンク可能

  • カテゴリー
    ⇒ すでにあるカテゴリーページ

 

「固定ページ」から、先程作成したページにチェックしていきましょう。

チェックできたら「メニューに追加」をクリックします。

「固定ページ」から、先程作成したページにチェックしていきましょう

 

メニューの順番はドラック&ドロップで入れ替えできます。

メニューの順番はドラック&ドロップで入れ替え

 

次に「カスタムリンク」の「ホーム」を「Home」に変更します。

右の「▼」をクリックして開き、「ナビゲーションラベル」を「Home」に変更。

入力したら「メニューを保存」をクリックして変更完了です。

 

例:メニューにアイコンを表示する

メニューにアイコンを表示することもできます。

完成形はこんな感じ。

メニューにアイコンを表示する

 

手順は以下の3ステップです。

  1. 「FontAwesome」からアイコンを探す
  2.   コードをコピーする
  3. 「ナビゲーションラベル」に貼り付け

試しに「ホーム」の横にお家マークを表示してみたいと思います。

 

FontAwesomeにアクセス

まず、FontAwesome のサイトへ行きます。

ちなみに、AFFINGER6では最新バージョンの Font Awesome5 が推奨されていますが、メールアドレスの登録などが必要になってしまったので、今回は登録不要な Font Awesome 4 を利用して設定します。

» FontAwesome(Ver4.7) にアクセスする

FontAwesome(Ver4.7) にアクセスする

 

検索窓に「home」と入力。おうちアイコンが出てくるのでクリック。

検索窓に「home」と入力。おうちアイコンが出てくるのでクリック

 

<i>コードをコピー

<i class=....で始まるコードがあるので、コピーします。

<i class=....で始まるコードがあるので、コピーします。

 

ナビゲーションラベルに貼り付け

AFFINGER のメニューの設定画面に戻ります。

「ナビゲーションラベル」に先程コピーしたコードを貼り付けます。

最後に「メニューを保存」をクリックして完成です。

「ナビゲーションラベル」に先程コピーしたコードを貼り付け

 

このままだと、まだ表示はされません。

「AFFINGER 管理」から「AFFINGER 管理」を選択 ⇒「その他」を選択、「FontAwesomeIcons4.7.0の読み込み」にチェックをしたら「Save」をクリックして完了です。

「AFFINGER 管理」から「AFFINGER 管理」を選択

 

無事、メニューにアイコンが追加されているはずです。
うこじ

 

手順④:微調整を行う

最後に背景色や文字色、レイアウトなどを調整していきましょう。

 

例:背景色や文字色を変更する

背景色や文字色はカスタマイズ画面で変更します。

まずはPCのヘッダーメニューの色を変更していきましょう。

「外観」から「カスタマイズ」を選択、「各メニュー設定」⇒「PCヘッダーメニュー」へと進みます。

「外観」から「カスタマイズ」を選択
「各メニュー設定」
「PCヘッダーメニュー」へと進みます

 

あとはサイトのデザインを見ながら、任意の色に変えるだけです。

あとはサイトのデザインを見ながら、任意の色に変えるだけ

 

スマホのヘッダーメニューの色を変えるときには、「各メニュー設定」⇒「スマホメニュー(スマホヘッダー)」で変更します。

カラーの設定方法はPCヘッダーの時と同じです。

 

例:レイアウトを変更する

レイアウトを変更する場合も、同じ設定画面で行います。

レイアウトを変更する場合も、同じ設定画面で行います

 

サンプルでは、下記を設定しました。

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

 

以上でメニューの設定が完了です。
おつかれさまでした!
うこじ

 

まとめ

今回はヘッダーメニューの設定方法について解説しました。

AFFIGNERの設定方法全般について知りたい方は、以下の記事もおすすめです。

≫【初心者向け】ホームページ・ブログの始め方<完全ガイド>

 

本日は以上です。

この記事がどなたかのお役に立てたらうれしいです。

最後までお読みいただき、ありがとうございました。

 

\本ブログでも使用しています/

AFFINGER バナー

 

  • この記事を書いた人
ucozi

ucozi(うこじ)

ヨガスクールの中の人。WEB集客のほか、ヨガ情報サイトの企画・立ち上げやWEBライター養成講座などのコース開発を行ってます。 本ブログは「ヨガインストラクターのためのブログの始め方」をメインテーマに、ヨガ関連情報を発信しています。

-AFFINGER
-,

Copyright © ucozi.com , All Rights Reserved.