疑問
AFFINGER5で記事をスライドショーで表示させる方法を知りたい!
AFFINGER5で使えるスライドショーは主に3つあります。
それぞれのスライドショーの表示イメージや設定について紹介します。
【目次】
AFFINGER5でスライドショーで記事を表示させる方法
AFFINGER5で使えるスライドショーは、
- 記事スライドショー
- 画像スライドショー(画像のみ)
- ショートコードスライドショー
です。
「記事スライドショー」と「画像スライドショー」は、表示させる場所は「ヘッダー」と決まっていて変更できません。
「画像スライドショー」は画像のみでリンクも記事も表示できませんが、スライドショー形式なのでここで紹介しておきます。
一方、「ショートコードスライドショー」は、カテゴリーを指定して表示させるスライドショーです。ショートコードなので好きな場所に配置できます。
記事スライドショー
「記事スライドショー」と「画像スライドショー」は、どちらもヘッダーに表示させるものなので、一度に一つしか表示できません。
記事スライドショーを設定している時は、画像スライドショー(ヘッダー画像)は表示できないようになっています。
それぞれの設定と表示イメージを紹介していきます。
記事スライドショーの設定
記事スライドショーの設定は、「AFFINGER5 管理」>「ヘッダー」>「記事スライドショー設定」で行います。
設定では「スライドショーの表示方法」や「表示するカテゴリID」などを指定できます。
「横並びにする(※表示方法がスライド時のみ)」設定は、「スライドショーの表示方法」をフェードイン・アウト以外に設定すると有効になります。
スライドショーで表示する記事が横並びになります。
記事スライドショーの表示イメージ
ヘッダー部分に大きく表示されます。
「スライドショーの表示方法」でフェードイン・アウト以外(右から左・左から右)を選択して、「横並びにする(※表示方法がスライド時のみ)」設定にチェックをいれると、ヘッダーの両端に記事が横並びに表示されます。
画像スライドショー
画像イメージだけのスライドショーです。リンクなどをつけることはできません。
記事スライドショーを設定している時は、画像スライドショー(ヘッダー画像)は設定できません。
画像スライドショーの設定
画像スライドショーの設定は、「AFFINGER5 管理」>「ヘッダー」>「画像スライドショー設定」で行います。
設定では「スライドショーの表示方法」などを指定できます。
画像スライドショーでも横並びにすることができ、「横並びにする(※表示方法がスライド時のみ)」設定は、「スライドショーの表示方法」をフェードイン・アウト以外に設定すると有効になり、ヘッダー画像を横並びにできます。
ヘッダーで表示する画像の追加が必要
画像スライドショーでは、スライドショーで表示する画像の追加が必要です。
画像の追加は、「外観」>「カスタマイズ」>「ヘッダー画像」で行います。
「新規画像を追加」で表示させたい画像を追加します。
メモ
「カスタマイズ」でできる「ヘッダー画像」の設定は、アクセスした時に設定した画像の中からランダムで1つ表示する機能です。これをスライドショー形式にしたい場合は、「画像スライドショー」の設定が必要です
画像スライドショーの表示イメージ
画像スライドショーの表示では、ヘッダー部分に画像が大きく表示されます。
ショートコードスライドショー
シートコードを使って、指定したカテゴリーの一覧をスライドショーで表示させることができます。
メモ
指定した記事の一覧をスライドショーで表示させる機能は、「AFFINGER5EX版限定機能」で、通常版にはついていません。
ショートコードスライドショーの設定
ショートコードについているパラメータに値を設定できます。
パラメータの一つである「page」に大きな数字を指定すると、それだけ記事を読み込むため動作が遅くなります。
ショートコードに指定できる内容
[st-catgroup cat="カテゴリID指定" page="読み込み数" order="desc" orderby="id" child="子カテゴリーの読み込み" slide="自動スライドショーのオンオフ" slides_to_show="列数の指定" slide_more="続きを読む" slide_center="off" fullsize_type="表示方法"]
- cat:カテゴリーID(数値)
- page:数字(5くらい)
- child:on/off
- slide:on/off
- slides_to_show:3,3,2(左から画面が大、中、小の時の記事表示数)
- slide_more:more(もっと見るボタンのテキスト)
- fullsize_type:card/text(画像のみ、画像+テキスト表示)
メモ
「fullsize_type」は、指定しなければ「画像」+「タイトル」+「テキスト」+「もっと見るボタン」が表示されます。
「card」または「text」を指定することで「画像」のみ、または「画像」+「タイトル」の表示ができます。
ショートコードスライドショーの表示イメージ
以下、サンプルショートコードです。「カテゴリID指定」した記事を5つ表示でき、自動でスライドさせることができます。
記事に遷移するためのリンクは「more」と表示され、各項目の下に表示され、パソコンやタブレットで見た場合は、記事が3列、スマホで見た場合は2列で表示されるようになっています。
カテゴリーIDを指定した時の見た目は下記のようになります。
【まとめ】AFFINGER5でスライドショーで記事を表示させる方法
AFFINGER5で使えるスライドショーは主に3つあります。
- 記事スライドショー
- 画像スライドショー
- ショートコードスライドショー
指定した記事の一覧をスライドショーで表示させる機能は、「AFFINGER5EX版限定機能」で通常版にはついていません。