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

ブログ内検索

ブログ作成

AFFINGER5のトップページをカスタマイズする方法

2019年10月10日

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

この記事では、WordPressのテーマ「AFFINGER5」でできるトップページのカスタマイズ方法をすべて解説していきたいと思います。

ちなみに、AFFINGER5を知らないという方は、下記の記事をご覧ください。

⇒「AFFINGER5の購入レビュー|どんなテンプレートなのか?特徴と機能を簡単に解説

AFFINGER5では、既存のWordPressのトップページ(デフォルト:新着記事を並べただけのページ)をカスタマイズして、サイト風な作りにアレンジすることができます。

今回は、AFFINGER5で設定可能なトップページのカスタマイズ方法をすべて解説していきたいと思います。

スポンサーリンク

AFFINGER5で設定可能なトップページのカスタマイズの種類

AFFINGER5で設定できるトップページのカスタマイズは、おおまかにまとめると以下のようなものがあります。

設定可能なトップページのカスタマイズ

  • トップページにコンテンツを挿入する
  • ヘッダーメニューをカスタマイズする
  • ヘッダー画像の下に特定のカテゴリ記事をスライド表示させる
  • トップページ内で表示される新着記事を非表示にする
  • トップページのレイアウトを1カラムにする
  • NEWS(お知らせ)の表示・非表示にする
  • トップページの背景でYouTubeの動画を流す

特に、トップページにコンテンツを挿入する方法を覚えてしまえば、既存のWordPressのテーマではできないようなトップページを作成することができるようになります。

その他、新着記事を非表示にする設定をすれば、ブログとは思えないデザインに作り変えることができます。

AFFINGER5のトップページカスタマイズ1:トップページにコンテンツを挿入する方法

トップページにコンテンツを挿入する方法は、以下の2つの方法があります。

①固定記事を挿入する方法
②挿入コンテンツに直接追加する方法

それぞれの方法を解説していきます。

①固定記事を挿入する方法

固定記事を作成して、トップページ内に挿入させる方法です。

孔雀
要するに、デフォルトのトップページを無効にして、新しく作成した固定記事をそのままトップページに表示させてしまうやり方だよ。

この固定記事は新しく作成してもいいですし、今まで作成した既存の固定記事を挿入させてもOKです。

固定記事は重複しないの?

※挿入された固定記事は、自動的にnoidexとなり、canonical(URLの正規化を行わない)が設定されます。なので、コンテンツの重複の心配はないです。

トップページ内に挿入するための固定記事の用意ができたら、[AFFINGER5管理]ページを表示させます。([AFFINGER5管理]→[AFFINGER5管理]をクリック)

固定記事を挿入する方法

左のメニューから[トップページ]をクリックします。

固定記事を挿入する方法

ページ上にある「トップページに固定記事を挿入」の空欄に、挿入したい固定記事のIDを入力します。

固定記事を挿入する方法

固定記事のIDって?

固定記事一覧ページで表示されるIDの数字です。

固定記事のIDの調べ方

固定記事IDを入力したら、[保存]、または[save]をクリックします。

これで、指定した固定記事がトップページに表示されるようになります。

②挿入コンテンツに直接追加する方法

これは、コンテンツを作成して、トップページ内に直接挿入させる方法です。

注意ポイント

※挿入コンテンツは、下書き保存ができません。[保存]、または[save]をクリックした時点でトップページに反映されてしまいます。なので、一般投稿記事で作成して、公開せずに下書き保存しておくといいです。
完成してからコピー&ペーストすることをおすすめします。
[AFFINGER5管理]ページを表示させます。([AFFINGER5管理]→[AFFINGER5管理]をクリック)

挿入コンテンツに直接追加する方法

左のメニューから[トップページ]をクリックします。

挿入コンテンツに直接追加する方法
[挿入コンテンツ]の空欄に、追加したいコンテンツを直接作成していきます。

挿入コンテンツは途中で下書き保存ができないので、一般投稿記事で作成しておいて、あとからコピー&ペーストすることをおすすめします。

挿入コンテンツに直接追加する方法

追加したいコンテンツの作成が完了したら、[保存]、または[save]をクリックします。

これで、追加したコンテンツがトップページに表示されるようになります。

AFFINGER5のトップページカスタマイズ2:ヘッダーメニューをカスタマイズする方法

ヘッダーメニューとは、ページ上部に表示されるメニュー部分ですね。

AFFINGER5のトップページカスタマイズ2:ヘッダーメニューをカスタマイズする方法

ヘッダーメニューでカスタマイズできるのは、以下の4つです。

①テキスト文字
②テキスト文字の中央寄せ
③メニューバーのカラー
④メニューバーの幅

ヘッダーメニューの作り方やカスタマイズ方法については、下記の記事に詳しく載せているのでそちらも見ていただければと思います。

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

AFFINGER5のトップページカスタマイズ3:ヘッダー画像の下に特定のカテゴリ記事をスライドショーで表示させる方法

これは、以下のようにヘッダー画像の下に記事をスライド表示させる方法です。

ヘッダー画像の下に特定のカテゴリ記事をスライド表示させる方法
[AFFINGER5管理]ページを表示させます。([AFFINGER5管理]→[AFFINGER5管理]をクリック)

ヘッダー画像の下に特定のカテゴリ記事をスライド表示させる方法

左のメニューから[ヘッダー]をクリックします。

ヘッダー画像の下に特定のカテゴリ記事をスライド表示させる方法
[記事スライドショー設定]の「ヘッダーに記事をスライドショーで表示する」にチェックを入れます。

下の項目で細かい設定ができるようになっています。

ヘッダー画像の下に特定のカテゴリ記事をスライド表示させる方法

表示するカテゴリIDを指定することで、特定のカテゴリ内にある記事だけをスライド表示させることもできます。

カテゴリIDって?

左メニューにある[投稿]→[カテゴリー]をクリックすることで、カテゴリIDを確認することができます。

カテゴリIDの調べ方

設定が完了したら、[保存]、または[save]をクリックします。

これで、トップページのヘッダー画像の下に特定のカテゴリ記事をスライド表示させることができます。

AFFINGER5のトップページカスタマイズ4:新着記事一覧を非表示にする方法

新着記事とは、以下の画像の赤枠部分に表示されるものです。

トップページ内で表示される新着記事を非表示にする方法

この新着記事を非表示にすることができます。

[AFFINGER5管理]ページを表示させます。([AFFINGER5管理]→[AFFINGER5管理]をクリック)

トップページ内で表示される新着記事を非表示にする方法

左のメニューから[トップページ]をクリックします。

トップページ内で表示される新着記事を非表示にする方法
[記事一覧]にある「トップページのコンテンツ内の新着記事一覧を非表示にする」にチェックをいれます。

トップページ内で表示される新着記事を非表示にする方法
[保存]、または[save]をクリックすると、トップページ内で表示される新着記事が非表示になります。

AFFINGER5のトップページカスタマイズ5:レイアウトを1カラムにする方法

1カラムとは、右側にあるサイドメニューを表示させないで1列表示にすることです。

[AFFINGER5管理]ページを表示させます。([AFFINGER5管理]→[AFFINGER5管理]をクリック)

トップページのレイアウトを1カラムにするカスタマイズ

左のメニューから[トップページ]をクリックします。

トップページのレイアウトを1カラムにするカスタマイズ
[トップページのレイアウト]の「トップページを1カラムにする」にチェックを入れます。

トップページのレイアウトを1カラムにするカスタマイズ
[保存]、または[save]をクリックすると、トップページのレイアウトを1カラムにすることができます。

AFFINGER5のトップページカスタマイズ6:NEWS(お知らせ)の表示・非表示にする方法

NEWS(お知らせ)とは、以下の画像の赤枠部分に表示されるものです。

NEWS(お知らせ)の表示・非表示にするカスタマイズ

このNEWS(お知らせ)は、表示・非表示の設定が可能です。

[AFFINGER5管理]ページを表示させます。([AFFINGER5管理]→[AFFINGER5管理]をクリック)

NEWS(お知らせ)の表示・非表示にするカスタマイズ

左のメニューから[トップページ]をクリックします。

NEWS(お知らせ)の表示・非表示にするカスタマイズ
[NEWS(お知らせ)の表示]の「お知らせをTOPページの一番上に表示する」にチェックを入れることで、NEWS(お知らせ)を表示させることができます。(※非表示にしたい場合には、チェックを外す)

NEWS(お知らせ)の表示・非表示にするカスタマイズ
[保存]、または[save]をクリックすると、NEWS(お知らせ)の表示・非表示の設定が可能になります。

AFFINGER5のトップページカスタマイズ7:トップページの背景でYouTubeの動画を流す方法

AFFINGER5では、ブログの背景でYouTubeの動画を再生させることが可能です。

例えば、以下のYouTube動画を自分のブログの背景で再生させる設定をしてみます。

[AFFINGER5管理]ページを表示させます。([AFFINGER5管理]→[AFFINGER5管理]をクリック)

トップページの背景でYouTubeの動画を流すカスタマイズ

左のメニューから[トップページ]をクリックします。

トップページの背景でYouTubeの動画を流すカスタマイズ
[YouTube背景]にある「背景に流すYouTube動画ID」を入力します。

あとは、「トップページ(PC)の背景でYouTubeを流す」にチェックを入れるだけです。

細かい設定(ループ再生や音声など)に関しては、オプション部分で設定可能です。

トップページの背景でYouTubeの動画を流すカスタマイズ

YouTube動画IDって?

YouTube動画のアドレスにある「watch?v=」のあとにくる文字列のことです。
この動画では、「rnSNZ6ZbXyQ」がYouTube動画IDになります。

YouTube動画IDの調べ方
[保存]、または[save]をクリックすると、以下のようにトップページの背景でYouTube動画が再生されます。

トップページの背景でYouTubeの動画を流すカスタマイズ

まとめ:AFFINGER5のトップページをカスタマイズする方法

今回は、WordPressのテーマ「AFFINGER5」でできるトップページのカスタマイズ方法をすべて解説してみました。

AFFINGER5では、ブログのトップページをサイト風にアレンジして、自由にカスタマイズすることができます。

挿入コンテンツを使えば、最新記事をカテゴリごとに分けてトップページに表示させたりすることもできるようになります。

自分風にアレンジして、世界に一つしかないブログのトップページに作り変えてみてください!

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

関連記事

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

人気おすすめ記事

  • この記事を書いた人

孔雀

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

-ブログ作成

© 2021 孔雀イズム