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

AFFINGER5 WordPress

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

投稿日:

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

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

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

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

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

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

スポンサーリンク

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

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

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

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

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

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

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

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

  • 固定記事を挿入する方法
  • 挿入コンテンツに直接追加する方法
  • それぞれの方法を解説していきます。

    固定記事を挿入する方法

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

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

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

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

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

    固定記事を挿入する方法

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

    固定記事を挿入する方法

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

    固定記事を挿入する方法

    固定記事のIDって?

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

    固定記事のIDの調べ方

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

    これで、指定した固定記事がトップページに挿入されます。

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

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

    注意ポイント

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

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

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

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

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

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

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

    これで、追加したコンテンツがトップページに挿入されます。

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

    このブログのトップページでも設定していますが、以下のようにヘッダー画像の下に記事をスライド表示させる方法です。

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

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

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

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

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

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

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

    カテゴリIDって?

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

    カテゴリIDの調べ方

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    AFFINGER5のトップページカスタマイズ6:トップページの背景で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の動画を流すカスタマイズ

    まとめ

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

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

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

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

    関連記事

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

    -AFFINGER5, WordPress

    Copyright© アフィリエイトブログの始め方-月収100万円稼ぐまでの道のり , 2019 All Rights Reserved.

    %d人のブロガーが「いいね」をつけました。