AFFINGER5でスライドショー形式で記事を表示させる方法

AFFINGER5で使えるスライドショーは主に3つあります。

それぞれのスライドショーの表示イメージや設定について紹介します。

AFFINGER5でスライドショーで記事を表示させる方法

AFFINGER5で使えるスライドショーは、

です。

「記事スライドショー」と「画像スライドショー」は、表示させる場所は「ヘッダー」と決まっていて変更できません。

「画像スライドショー」は画像のみでリンクも記事も表示できませんが、スライドショー形式なのでここで紹介しておきます。

一方、「ショートコードスライドショー」は、カテゴリーを指定して表示させるスライドショーです。ショートコードなので好きな場所に配置できます。

記事スライドショー

「記事スライドショー」と「画像スライドショー」は、どちらもヘッダーに表示させるものなので、一度に一つしか表示できません。

記事スライドショーを設定している時は、画像スライドショー（ヘッダー画像）は表示できないようになっています。

それぞれの設定と表示イメージを紹介していきます。

記事スライドショーの設定

記事スライドショーの設定は、「AFFINGER5 管理」＞「ヘッダー」＞「記事スライドショー設定」で行います。

設定では「スライドショーの表示方法」や「表示するカテゴリID」などを指定できます。

「横並びにする（※表示方法がスライド時のみ）」設定は、「スライドショーの表示方法」をフェードイン・アウト以外に設定すると有効になります。

スライドショーで表示する記事が横並びになります。

記事スライドショーの表示イメージ

ヘッダー部分に大きく表示されます。

「スライドショーの表示方法」でフェードイン・アウト以外（右から左・左から右）を選択して、「横並びにする（※表示方法がスライド時のみ）」設定にチェックをいれると、ヘッダーの両端に記事が横並びに表示されます。

画像スライドショー

画像イメージだけのスライドショーです。リンクなどをつけることはできません。

記事スライドショーを設定している時は、画像スライドショー（ヘッダー画像）は設定できません。

画像スライドショーの設定

画像スライドショーの設定は、「AFFINGER5 管理」＞「ヘッダー」＞「画像スライドショー設定」で行います。

設定では「スライドショーの表示方法」などを指定できます。

画像スライドショーでも横並びにすることができ、「横並びにする（※表示方法がスライド時のみ）」設定は、「スライドショーの表示方法」をフェードイン・アウト以外に設定すると有効になり、ヘッダー画像を横並びにできます。

ヘッダーで表示する画像の追加が必要

画像スライドショーでは、スライドショーで表示する画像の追加が必要です。

画像の追加は、「外観」＞「カスタマイズ」＞「ヘッダー画像」で行います。

「新規画像を追加」で表示させたい画像を追加します。

画像スライドショーの表示イメージ

画像スライドショーの表示では、ヘッダー部分に画像が大きく表示されます。

ショートコードスライドショー

シートコードを使って、指定したカテゴリーの一覧をスライドショーで表示させることができます。

ショートコードスライドショーの設定

ショートコードについているパラメータに値を設定できます。

パラメータの一つである「page」に大きな数字を指定すると、それだけ記事を読み込むため動作が遅くなります。

• cat：カテゴリーID（数値）
• page：数字（5くらい）
• child：on/off
• slide：on/off
• slides_to_show：3,3,2（左から画面が大、中、小の時の記事表示数）
• slide_more：more（もっと見るボタンのテキスト）
• fullsize_type：card/text（画像のみ、画像＋テキスト表示）

ショートコードスライドショーの表示イメージ

以下、サンプルショートコードです。「カテゴリID指定」した記事を5つ表示でき、自動でスライドさせることができます。

記事に遷移するためのリンクは「more」と表示され、各項目の下に表示され、パソコンやタブレットで見た場合は、記事が3列、スマホで見た場合は2列で表示されるようになっています。

カテゴリーIDを指定した時の見た目は下記のようになります。

【まとめ】AFFINGER5でスライドショーで記事を表示させる方法

AFFINGER5で使えるスライドショーは主に3つあります。

指定した記事の一覧をスライドショーで表示させる機能は、「AFFINGER5EX版限定機能」で通常版にはついていません。