AFFINGER7でヘッダー下にサムネイルスライドショーを表示する方法｜設定手順

こんにちは "osaboo"です。"@osaboo_Bot"

この記事で解決できる悩み

この記事では、これらのお悩みを解決します。

「まずはブログを始めたい！」という方は、『WordPressブログ完全ガイド』をご覧ください。
開設から運営・収益化までを初心者向けに画像付きでわかりやすく解説しています。

関連記事 AFFINGER7の基本設定を先に確認したい方は、こちらをご覧ください。

AFFINGER7のサムネイルスライドショーとは？

AFFINGER7のサムネイルスライドショーは、ヘッダー下に記事のサムネイルをスライド表示できる機能です。

AFFINGER公式マニュアル「サムネイルスライドショー」

カテゴリーを指定して表示する記事を絞り込んだり、画面サイズに応じて表示数を設定したりできます。

ブログのトップページにおすすめ記事や特定カテゴリーの記事を目立たせたいときに便利です。

関連記事 ヘッダーナビやヘッダー画像の設定方法は、こちらで詳しく解説しています。

AFFINGER7でサムネイルスライドショーを表示する方法

サムネイルスライドショーは、WordPress管理画面から設定します。

「サムネイルスライドショー」の設定画面を開く

WordPress管理画面から、「AFFINGER管理」→「サブエリア / おすすめ」を開きます。

設定画面にある「サムネイルスライドショー」の項目から、表示方法を設定できます。

表示するページを設定する

「サムネイルスライドショー」では、まず表示するページを選択します。

表示方法は以下の3つです。

• 無効
• フロントページ
• 全ページ

ヘッダー下にサムネイルスライドショーを表示する場合は、「フロントページ」または「全ページ」を選択します。

トップページだけに表示したい場合は「フロントページ」、サイト内のすべてのページに表示したい場合は「全ページ」を選択します。

表示するカテゴリーを設定する

次に、サムネイルスライドショーに表示する記事をカテゴリーで指定します。

「カテゴリID」に、表示したいカテゴリーのIDを入力します。

例えば、カテゴリーIDが「3」の場合は、

3

と入力します。

複数のカテゴリーを指定する場合は、半角カンマで区切って入力します。

3,5,8

カテゴリーIDを指定しない場合は「0」となり、すべての記事が表示対象になります。

なお、ここで指定するのはカテゴリーIDです。

• タグIDや記事IDではないので注意してください。

表示する記事数を設定する

「表示数」では、画面サイズごとに表示するサムネイルの数を設定できます。

入力する順番は、「PC・タブレット・スマホ」です。

例えば、

5,3,1

と入力すると、以下のように表示されます。

• PC：5件
• タブレット：3件
• スマホ：1件

画面サイズは、PCが960px以上、タブレットが959～600px、スマホが599px以下です。

PCでは最大5件程度が想定されているため、極端に多い数を指定すると表示が崩れる場合があります。

また、

1,2,3

のように、小さい画面ほど表示数を増やす設定はできません。

画像をフルサイズで表示する

「画像をフルサイズにする」を有効にすると、サムネイル画像を表示エリアに合わせてトリミングせず、そのまま表示できます。

通常のサムネイル表示では画像が表示エリアに合わせてトリミングされます。

画像をできるだけ元の状態で表示したい場合は、この設定を利用します。

サムネイルスライドショーの背景を設定する方法

サムネイルスライドショーの背景は、WordPressのカスタマイザーから変更できます。

「サブエリア」から背景を設定する

WordPress管理画面から、「外観」→「カスタマイズ」→「サブエリア」→「サムネイルスライドショー」を開きます。

ここでは、サムネイルスライドショーの文字色・背景色・背景画像などを設定できます。

サムネイルスライドショーのデザインをサイト全体の雰囲気に合わせたい場合は、ここから調整します。

関連記事 トップページに記事をカード型で表示する方法は、こちらで詳しく解説しています。

サムネイルスライドショーの表示を確認する

設定が完了したら、サイトを表示してサムネイルスライドショーを確認します。

設定したカテゴリーの記事が、ヘッダー下にサムネイル付きで表示されていれば設定完了です。

表示されない場合は、次の項目を確認してください。

表示設定を確認する

「AFFINGER管理」→「サブエリア / おすすめ」→「サムネイルスライドショー」を開き、表示設定が「無効」になっていないか確認します。

トップページだけに表示する場合は「フロントページ」、サイト全体に表示する場合は「全ページ」を選択します。

カテゴリーIDを確認する

「カテゴリID」に入力した番号が、表示したいカテゴリーのIDと一致しているか確認します。

複数のカテゴリーを指定している場合は、カテゴリーIDを半角カンマで区切って入力します。

表示する記事を確認する

指定したカテゴリーに記事が登録されているか確認します。

また、記事にアイキャッチ画像が設定されているかも確認しておきましょう。

AFFINGER7のサムネイルスライドショー設定まとめ

AFFINGER7のサムネイルスライドショーは、「AFFINGER管理」→「サブエリア / おすすめ」から設定できます。

表示するページやカテゴリー、表示数を設定するだけで、ヘッダー下に記事のサムネイルをスライド表示できます。

背景のデザインは、「外観」→「カスタマイズ」→「サブエリア」→「サムネイルスライドショー」から変更できます。

関連記事 ヘッダーメニューやスマホメニューの設定方法は、こちらをご覧ください。

カテゴリーIDの確認方法

サムネイルスライドショーに表示するカテゴリーを指定する場合は、カテゴリーIDを確認して入力します。

WordPress管理画面から、「投稿」→「カテゴリー」を開きます。

カテゴリー一覧の「ID」欄を確認すると、それぞれのカテゴリーのIDを確認できます。

確認したカテゴリーIDを、「AFFINGER管理」→「サブエリア / おすすめ」→「サムネイルスライドショー」の「カテゴリID」に入力します。

複数のカテゴリーを指定する場合は、カテゴリーIDを半角カンマで区切って入力します。

例えば → 5,3,1

これで、指定したカテゴリーの記事をサムネイルスライドショーに表示できます。

サムネイルスライドショーが表示されない場合

表示されない場合は、以下の項目を確認してください。

表示ページの設定を確認する

「AFFINGER管理」→「サブエリア / おすすめ」→「サムネイルスライドショー」

を開き、表示設定を確認します。

トップページに表示する場合は「フロントページ」、サイト全体に表示する場合は「全ページ」を選択します。

カテゴリーIDを確認する

「カテゴリID」に入力した数字が、表示したいカテゴリーのIDと一致しているか確認します。

複数のカテゴリーを指定する場合は、半角カンマで区切ります。

4,5,6

カテゴリーIDを指定しない場合は「0」となり、すべての記事が表示対象になります。

表示数を確認する

「表示数」は、PC → タブレット → スマホ の順番で指定します。

例えば、5,3,1 と入力した場合は、PCで5件、タブレットで3件、スマホで1件が表示されます。

AFFINGER公式では、PCの表示数は最大5程度が想定されています。極端に大きな数値を設定すると、表示が見づらくなったりレイアウトが崩れたりする場合があります。

アイキャッチ画像を確認する

表示対象の記事にアイキャッチ画像が設定されているかも確認します。

サムネイルスライドショーは記事のサムネイル画像を表示するため、アイキャッチ画像を設定しておくと確認しやすくなります。

関連記事 アイキャッチ画像の設定方法については、以下の記事で詳しく解説しています。

まとめ！AFFINGER7でヘッダー下にサムネイルスライドショーを表示する方法｜設定手順

AFFINGER7のサムネイルスライドショーは、「AFFINGER管理」→「サブエリア / おすすめ」→「サムネイルスライドショー」から設定できます。

表示するページやカテゴリー、表示数などを設定すると、ヘッダー下に記事のサムネイルをスライド表示できます。

カテゴリーを指定する場合は、WordPressの「投稿」→「カテゴリー」にある「ID」を確認して入力します。

また、サムネイルスライドショーの文字色や背景は、「外観」→「カスタマイズ」→「サブエリア」→「サムネイルスライドショー」から設定できます。

AFFINGER7でヘッダー下におすすめ記事や特定カテゴリーの記事を表示したい場合は、サムネイルスライドショーを活用してみてください。