こんにちは、専業アフィリエイターの孔雀です。
この記事では、WordPressのテーマ「AFFINGER5」でできるトップページのカスタマイズ方法をすべて解説していきたいと思います。
ちなみに、AFFINGER5を知らないという方は、下記の記事をご覧ください。
⇒「AFFINGER5の購入レビュー｜どんなテンプレートなのか？特徴と機能を簡単に解説」 こんにちは、専業アフィリエイターの孔雀です。 この記事では、2019年7月から当ブログで導入したWordPressのテンプレート「AFFINGER5（WING）」の特徴と機能について解説していきたいと ...
AFFINGER5の購入レビュー｜どんなテンプレートなのか？特徴と機能を簡単に解説
AFFINGER5では、既存のWordPressのトップページ（デフォルト：新着記事を並べただけのページ）をカスタマイズして、サイト風な作りにアレンジすることができます。
今回は、AFFINGER5で設定可能なトップページのカスタマイズ方法をすべて解説していきたいと思います。
目次
- 1 AFFINGER5で設定可能なトップページのカスタマイズの種類
- 2 AFFINGER5のトップページカスタマイズ1：トップページにコンテンツを挿入する方法
- 3 AFFINGER5のトップページカスタマイズ2：ヘッダーメニューをカスタマイズする方法
- 4 AFFINGER5のトップページカスタマイズ3：ヘッダー画像の下に特定のカテゴリ記事をスライドショーで表示させる方法
- 5 AFFINGER5のトップページカスタマイズ4：新着記事一覧を非表示にする方法
- 6 AFFINGER5のトップページカスタマイズ5：レイアウトを1カラムにする方法
- 7 AFFINGER5のトップページカスタマイズ6：NEWS（お知らせ）の表示・非表示にする方法
- 8 AFFINGER5のトップページカスタマイズ7：トップページの背景でYouTubeの動画を流す方法
- 9 まとめ：AFFINGER5のトップページをカスタマイズする方法
AFFINGER5で設定可能なトップページのカスタマイズの種類
AFFINGER5で設定できるトップページのカスタマイズは、おおまかにまとめると以下のようなものがあります。
設定可能なトップページのカスタマイズ
- トップページにコンテンツを挿入する
- ヘッダーメニューをカスタマイズする
- ヘッダー画像の下に特定のカテゴリ記事をスライド表示させる
- トップページ内で表示される新着記事を非表示にする
- トップページのレイアウトを1カラムにする
- NEWS（お知らせ）の表示・非表示にする
- トップページの背景でYouTubeの動画を流す
特に、トップページにコンテンツを挿入する方法を覚えてしまえば、既存のWordPressのテーマではできないようなトップページを作成することができるようになります。
その他、新着記事を非表示にする設定をすれば、ブログとは思えないデザインに作り変えることができます。
AFFINGER5のトップページカスタマイズ1：トップページにコンテンツを挿入する方法
トップページにコンテンツを挿入する方法は、以下の2つの方法があります。
②挿入コンテンツに直接追加する方法
それぞれの方法を解説していきます。
①固定記事を挿入する方法
固定記事を作成して、トップページ内に挿入させる方法です。
この固定記事は新しく作成してもいいですし、今まで作成した既存の固定記事を挿入させてもOKです。
固定記事は重複しないの？
トップページ内に挿入するための固定記事の用意ができたら、[AFFINGER5管理]ページを表示させます。（[AFFINGER5管理]→[AFFINGER5管理]をクリック）
左のメニューから[トップページ]をクリックします。
ページ上にある「トップページに固定記事を挿入」の空欄に、挿入したい固定記事のIDを入力します。
固定記事のIDって？
固定記事IDを入力したら、[保存]、または[save]をクリックします。
これで、指定した固定記事がトップページに表示されるようになります。
②挿入コンテンツに直接追加する方法
これは、コンテンツを作成して、トップページ内に直接挿入させる方法です。
注意ポイント
完成してからコピー＆ペーストすることをおすすめします。
左のメニューから[トップページ]をクリックします。
挿入コンテンツは途中で下書き保存ができないので、一般投稿記事で作成しておいて、あとからコピー＆ペーストすることをおすすめします。
追加したいコンテンツの作成が完了したら、[保存]、または[save]をクリックします。
これで、追加したコンテンツがトップページに表示されるようになります。
AFFINGER5のトップページカスタマイズ2：ヘッダーメニューをカスタマイズする方法
ヘッダーメニューとは、ページ上部に表示されるメニュー部分ですね。
ヘッダーメニューでカスタマイズできるのは、以下の4つです。
②テキスト文字の中央寄せ
③メニューバーのカラー
④メニューバーの幅
ヘッダーメニューの作り方やカスタマイズ方法については、下記の記事に詳しく載せているのでそちらも見ていただければと思います。
⇒「AFFINGER5のメニュー部分の作成とカスタマイズ方法について解説」 こんにちは、専業アフィリエイターの孔雀です。 この記事では、AFFINGER5のメニュー部分の作成とカスタマイズ方法について解説してみたいと思います。 関連リンク ⇒「AFFINGER5の購入レビュー ...
AFFINGER5のメニュー部分の作成とカスタマイズ方法について解説
AFFINGER5のトップページカスタマイズ3：ヘッダー画像の下に特定のカテゴリ記事をスライドショーで表示させる方法
これは、以下のようにヘッダー画像の下に記事をスライド表示させる方法です。
左のメニューから[ヘッダー]をクリックします。
下の項目で細かい設定ができるようになっています。
表示するカテゴリIDを指定することで、特定のカテゴリ内にある記事だけをスライド表示させることもできます。
カテゴリIDって？
設定が完了したら、[保存]、または[save]をクリックします。
これで、トップページのヘッダー画像の下に特定のカテゴリ記事をスライド表示させることができます。
AFFINGER5のトップページカスタマイズ4：新着記事一覧を非表示にする方法
新着記事とは、以下の画像の赤枠部分に表示されるものです。
この新着記事を非表示にすることができます。
[AFFINGER5管理]ページを表示させます。（[AFFINGER5管理]→[AFFINGER5管理]をクリック）左のメニューから[トップページ]をクリックします。
AFFINGER5のトップページカスタマイズ5：レイアウトを1カラムにする方法
1カラムとは、右側にあるサイドメニューを表示させないで1列表示にすることです。
[AFFINGER5管理]ページを表示させます。（[AFFINGER5管理]→[AFFINGER5管理]をクリック）左のメニューから[トップページ]をクリックします。
AFFINGER5のトップページカスタマイズ6：NEWS（お知らせ）の表示・非表示にする方法
NEWS（お知らせ）とは、以下の画像の赤枠部分に表示されるものです。
このNEWS（お知らせ）は、表示・非表示の設定が可能です。
[AFFINGER5管理]ページを表示させます。（[AFFINGER5管理]→[AFFINGER5管理]をクリック）左のメニューから[トップページ]をクリックします。
AFFINGER5のトップページカスタマイズ7：トップページの背景でYouTubeの動画を流す方法
AFFINGER5では、ブログの背景でYouTubeの動画を再生させることが可能です。
例えば、以下のYouTube動画を自分のブログの背景で再生させる設定をしてみます。
左のメニューから[トップページ]をクリックします。
あとは、「トップページ（PC）の背景でYouTubeを流す」にチェックを入れるだけです。
細かい設定（ループ再生や音声など）に関しては、オプション部分で設定可能です。
YouTube動画IDって？
この動画では、「rnSNZ6ZbXyQ」がYouTube動画IDになります。
まとめ：AFFINGER5のトップページをカスタマイズする方法
今回は、WordPressのテーマ「AFFINGER5」でできるトップページのカスタマイズ方法をすべて解説してみました。
AFFINGER5では、ブログのトップページをサイト風にアレンジして、自由にカスタマイズすることができます。
挿入コンテンツを使えば、最新記事をカテゴリごとに分けてトップページに表示させたりすることもできるようになります。
自分風にアレンジして、世界に一つしかないブログのトップページに作り変えてみてください！
AFFINGER5の、その他のカスタマイズ方法については下記の記事をご覧ください。
