こんにちは "osaboo"
です。"@osaboo_Bot"
AFFINGER6でヘッダー画像の下にサムネイルスライドショーを表示する設定手順を、初心者向けに解説します。
AFFINGER6のサムネイルスライドショーって、どうやって設定するの？
それではご覧ください。
サムネイルスライドショーとは？
サムネイルスライドショーとは、投稿記事のアイキャッチ画像（サムネイル）を横並びのスライド形式で表示できるAFFINGER6の機能です。
トップページのヘッダー画像の下に表示することで、最新記事やおすすめ記事を視覚的にアピールできます。
テキストリンクだけの記事一覧と比べて…
- サイト全体が整って見える
- 更新感が伝わりやすい
- 記事への導線を作りやすい
といったメリットがあります。
また、AFFINGER6のサムネイルスライドショーは、プラグイン不要・テーマ標準機能で利用できます。
難しいコード編集も必要ないため、初心者の方でも管理画面から設定するだけで導入可能です。
「トップページを少しだけ華やかにしたい」「まずは見た目を整えたい」という場合にも、取り入れやすい機能といえるでしょう。
サムネイルスライドショーの表示例（どこに表示される？）
AFFINGER6のサムネイルスライドショーは、ヘッダー画像のすぐ下に表示されます。
ナビゲーションメニューやヘッダー画像の直下に配置されるため、トップページを開いたときに目に入りやすいのが特徴です。
表示位置のイメージとしては、以下のような流れになります。
- ヘッダー画像
- グローバルナビ
- サムネイルスライドショー
- 記事一覧（コンテンツエリア）
この位置にスライドショーを配置することで、訪問直後のユーザーに対して 「まず見てほしい記事」や「最新記事」 を自然に案内できます。
また、スライド内には各記事のサムネイル画像が表示されるため、文字だけの一覧よりも直感的に内容が伝わり、クリックされやすくなるのもポイントです。
設定が反映されると、トップページでは以下のサンプルのように表示されます。
サムネイルスライドショーの設定手順（AFFINGER管理画面）
AFFINGER6のサムネイルスライドショーは、AFFINGER管理画面から設定します。
特別なプラグインやコード編集は不要で、チェックを入れていくだけで有効化できます。
ここでは、ヘッダー画像の下にサムネイルスライドショーを表示する基本的な手順を解説します。
サムネイルスライドショーの設定画面を開く
Menu 『WordPress管理＞ダッシュボード＞AFFINGER管理＞ヘッダー下 / おすすめ（タブ）』をクリックします。
▶︎ 管理画面がわかりにくい場合はクリックしてください。
同じ画面を下にスクロールすると、次の設定項目が表示されます。
「ヘッダー下・おすすめ」タブ内に、サムネイルスライドショーに関する設定項目が用意されています。
サムネイルスライドショーを有効化する
設定画面を下にスクロールすると、「サムネイルスライドショー」 という項目が表示されます。
サムネイルスライドショーの表示機能を有効化します。初期設定では「無効」が選択されているため、「フロントページ」または「全ページ」のいずれかを選択します。
カテゴリーを指定する
サムネイルスライドショーで表示したいカテゴリーを限定することができます。
サムネイルスライドショーに表示するカテゴリを指定します。
四角の入力欄に カテゴリID を入力します。
複数のカテゴリを指定する場合は、半角カンマ（,）で区切って入力します。
例：カテゴリIDが、1と3と5の場合、四角の枠内に『 1,3,5 』と入力します。 （全ての入力は必ず半角）
カテゴリーIDの確認方法
Menu 『WordPress管理＞ダッシュボード＞投稿＞カテゴリー』をクリックします。
以下の画面で赤枠部の半角数字を確認
- 全てのカテゴリーを表示させる場合『0』を入力します。▶︎ 新着記事を表示させたい場合には有効です。
各デバイスでの表示数を指定する
各デバイスの一画面に表示されるサムネイル画像の数を指定します。
サムネイルスライドショーを表示するデバイス毎の表示数を指定します。四角の枠内に『パソコン,タブレット,スマホ』の順に半角カンマで区切って表示数を入力します。
例：「パソコンの表示数：5」「タブレットの表示数：3 」「スマホの表示数：1」の場合、四角の枠内に『 5,3,1 』と入力します。（全ての入力は必ず半角）
取得記事数・表示順序・表示スタイルを指定する
サムネイルスライドショーを表示する記事数を指定します。次に、表示順序の条件と付加する表示要素を選択します。最後に表示スタイルを好みに合わせて指定します。
ヘッダー画像の下に表示されているか確認する
設定が終わったら、画面下部の 「Save」 ボタンをクリックして保存します。
サムネイルスライドショーを使うときの注意点
サムネイルスライドショーは便利な機能ですが、使い方によっては逆効果になることもあります。
導入前に、以下のポイントを押さえておきましょう。
表示する記事数は多すぎないようにする
スライドに表示する記事数が多すぎると…
- 読み込みが重くなる
- どの記事を見せたいのか分かりづらくなる
といったデメリットがあります。
トップページに表示する場合は、3〜5記事程度 を目安に設定するのがおすすめです。
アイキャッチ画像のサイズ・雰囲気を揃える
サムネイルスライドショーは画像が目立つ分、アイキャッチ画像のサイズやテイストがバラバラだと、サイト全体が雑然とした印象になりがちです。
- 画像サイズを統一する
- 文字入れの有無を揃える
- 色味や雰囲気を意識する
といった点を意識するだけでも、見た目がかなり整います。
アイキャッチ画像については、こちらの記事で詳しくご紹介しています。あわせてご覧ください。
-
-
WordPressブログのアイキャッチ画像の作り方｜初心者でもできるおすすめサイズと編集ツール | osaboo.site
WordPressブログのアイキャッチ画像の作り方を初心者向けに解説。おすすめサイズ・無料編集ツール・貼り付け方法まで、デザイン初心者でもすぐに使える実践手順を紹介します。
続きを見る
まとめ！AFFINGER6でヘッダー下にサムネイルスライドショーを表示する方法｜設定手順を初心者向けに解説
AFFINGER6のサムネイルスライドショーを使えば、ヘッダー画像の下に記事サムネイルをスライド表示でき、トップページの見た目や導線を簡単に強化できます。
設定はAFFINGER管理画面からチェックを入れるだけで完了し、プラグインやコード編集も不要なので、初心者の方でも安心です。
「トップページが少し物足りない」「記事への導線を増やしたい」と感じている場合は、まずは表示件数を少なめに設定して、サムネイルスライドショーを試してみてください。
この記事がお役に立てば嬉しいです。
「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。＼^^／
