ランキングに参加中です♪
応援クリックをいただけると とても嬉しいです♪
↓↓↓
人気ブログランキングへ

ブログ作成

AFFINGER5のメニュー部分の作成とカスタマイズ方法について解説

こんにちは、専業アフィリエイターの孔雀です。

この記事では、AFFINGER5のメニュー部分の作成とカスタマイズ方法について解説してみたいと思います。

この記事は、主に以下のような人をターゲットに書いています。

この記事を読むべき人

  • AFFINGER5のメニュー部分の作成とカスタマイズ方法について知りたい人
  • AFFINGER5のメニュー部分のテキスト文字をカスタマイズする方法について知りたい人
  • AFFINGER5のメニューの横幅と中央寄せのカスタマイズ方法について知りたい人

この記事を読むことで、AFFINGER5のヘッターとフッター部分のメニューの作成方法とカスタマイズ方法がわかります。

スポンサーリンク

AFFINGER5のヘッターとフッター部分のメニューの作成方法

AFFINGER5ののヘッターとフッター部分のメニューとは、各記事の上部と下部に配置するグローバルメニューのことです。

このブログでいうと、以下の部分ですね。

<ヘッター部分のメニュー>

ページ上部のメニュー。

AFFINGER5のヘッターとフッター部分のメニューの作成方法

<フッター部分のメニュー>

ページ下部のメニュー。

AFFINGER5のヘッターとフッター部分のメニューの作成方法

ヘッター部分のメニュー作成方法

外観」⇒「メニュー」をクリックします。

AFFINGER5のヘッターとフッター部分のメニューの作成方法

メニュー名のところに、わかりやすい名前を入力して、「メニューを作成」をクリックします。

AFFINGER5のヘッターとフッター部分のメニューの作成方法

メニューに追加できるのは、投稿記事、固定記事、カテゴリページです。

例えば、カテゴリページをメニューに追加してみます。

左の「メニュー項目を追加」にあるカテゴリをクリックすると、今まで作成したすべてのカテゴリページが表示されます。

その中からメニューに追加したいものにチェックを入れて、「メニューに追加」をクリックします。

AFFINGER5のヘッターとフッター部分のメニューの作成方法

すると、右にある「メニュー構造」に追加したカテゴリページが表示されます。

このように、カテゴリページだけでなく投稿記事、固定記事も同じようなやり方で追加させることが可能です。

追加されているのを確認したら、「メニューを保存」をクリックします。

AFFINGER5のヘッターとフッター部分のメニューの作成方法

次に、作成したメニューをヘッター部分に配置する設定をします。

下の「メニュー設定」にある「ヘッダー用メニュー」にチェックを入れて、「メニューを保存」をクリックします。

AFFINGER5のヘッターとフッター部分のメニューの作成方法

これで、ヘッター部分のメニューがページ上部に表示されるようになります。

フッター部分のメニュー作成方法

もう一度説明すると、フッターとはページ下部に配置される部分です。

フッター部分のメニューの作成方法も基本的にヘッター部分の作成方法と同じです。

下の「メニュー設定」にある「フッター用メニュー」にチェックを入れて、「メニューを保存」をクリックすれば、フッター部分に表示されるようになります。

ヘッター部分とフッター部分に同じメニューを表示させたい場合は、1つのメニューを作成しておいて、「メニュー設定」の「ヘッター用メニュー」と「フッター用メニュー」の両方にチェックをすれば、わざわざ2つ作成する必要はありません。

AFFINGER5のヘッターとフッター部分のメニューの作成方法
スポンサーリンク



AFFINGER5のメニュー部分のテキスト文字をカスタマイズする方法

これは、メニュー部分に表示されるテキスト文字を変更したい場合のカスタマイズ方法です。

例えば、「TOP」と表示されるメニューを「トップページ」というテキスト文字に変えてみます。

TOP」の横にある▲アイコンをクリックします。

AFFINGER5のメニュー部分のテキスト文字をカスタマイズする方法

ナビゲーションラベルに「トップページ」と入力して、「メニューを保存」をクリックします。

AFFINGER5のメニュー部分のテキスト文字をカスタマイズする方法

すると、「TOP」と表示されていたメニューが「トップページ」というテキスト文字に変更されて表示されるようになります。

AFFINGER5のメニュー部分のテキスト文字をカスタマイズする方法

これで、ネット上に公開されているメニュー部分のテキストリンクの文字も変更されているはずです。

AFFINGER5のメニューのカラー、横幅、中央寄せのカスタマイズ方法

次に、メニューの色、横幅、中央寄せのを変更するカスタマイズ方法です。

基本的に、メニューの色はTOPページのデザインで設定した色に反映されますが、メニューの部分だけ色を変更することが可能です。

これらのカスタマイズは、以下の手順でできます。

外観」⇒「カスタマイズ」をクリックします。

AFFINGER5のメニューのカラー、横幅、中央寄せのカスタマイズ方法

左に表示される「メニュー」の「メニューのカラー設定」をクリックします。

AFFINGER5のメニューのカラー、横幅、中央寄せのカスタマイズ方法

PCヘッダーメニュー」をクリックします。

AFFINGER5のメニューのカラー、横幅、中央寄せのカスタマイズ方法

すると、各部位の色の選択、横幅、中央寄せのカスタマイズ画面が表示されます。

AFFINGER5のメニューのカラー、横幅、中央寄せのカスタマイズ方法

このページでの操作は、右のプレビューで即座に変更された部分を確認することができます。(※ここでの操作は実際には反映されていません。)

設定が完了したら、上にある「公開」をクリックすることで反映されるようになります。

まとめ

今回は、AFFINGER5のメニュー部分の作成とカスタマイズ方法について解説してみました。

AFFINGER5のメニューのカスタマイズは、メニューの配置とカラー、横幅、中央寄せ、スマホでのメニュー配置などができます。

AFFINGER5の、その他のカスタマイズ方法については下記の記事をご覧ください。

関連記事

最後までお読みいただき、ありがとうございました♪ 応援クリックをいただけると励みになります♪
人気ブログランキングへ
  • この記事を書いた人

孔雀

2004年にアフィリ業界に参入。 2017年から脱サラし、専業アフィリエイターに転職。 ほぼ独学でSEO、マーケティングを学び、2018年6月にアフィリエイトのみで月収50万円を達成。 誰にも縛られない自由な生活を求めて日々精進中。 最終目標は、何もせずに収入が入ってくる不労所得を作り出すこと。

-ブログ作成

Copyright© 孔雀イズム , 2020 All Rights Reserved.