アフィンガー5

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

2021年5月15日

疑問

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」を指定することで「画像」のみ、または「画像」+「タイトル」の表示ができます。

以下、サンプルショートコードです。

[st-catgroup cat="カテゴリID指定" page="5" order="desc" orderby="id" child="on" slide="on" slide_more="more"]

この指定では、「カテゴリID指定」した記事を「5」だけ表示でき、自動スライドさせます。

もっとみるためのリンクは「more」と表示され、画面が大きい(PCなど)場合と中くらいの場合は、記事が3列で表示され、画面が小さくなると2列表示になります。

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

上のサンプルショートコードにカテゴリーIDを指定すると下記のような表示になります。

アフィンガー5

2021/5/22

AFFINGER5のヘッダーコンテンツ設定の編集場所と表示イメージ

AFFINGER5の「ヘッダー」設定の一つに「ヘッダーコンテンツ設定」があります。 「ヘッダーコンテンツ設定」は自分でHTMLを編集してヘッダー部分にコンテンツを表示できる便利な機能です。 疑問 「ヘッダーコンテンツ設定」の編集場所や表示した時のイメージが知りたい! コンテンツの編集場所やサイト上でどのように表示されるかを紹介します。 Contents「ヘッダーコンテンツ設定」編集場所「ヘッダーコンテンツ設定」表示イメージ何を追加すればよい?均等横並び【まとめ】AFFINGER5のヘッダーコンテンツ設定 ...

more

アフィンガー5

2021/5/19

AFFINGER5に必要な初期設定【16項目】と設定方法

疑問 AFFINGER5を購入してインストールしたけど、できることが多すぎて何からはじめればいいのか分からない! AFFINGER5はできることが多いので、慣れないうちは設定だけでもかなりの時間を使ってしまいます。 「記事を書く時間」がなくなってしまわないように、インストール後に設定したほうがよい16項目を紹介します。 ContentsAFFIGER5をインストールしたらやること2つAFFIGER5をインストールしたら設定すべき16項目【1】アイキャッチ画像の設定【2】記事の更新日付の表示【3】スマホでの ...

more

アフィンガー5

2021/5/16

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

疑問 AFFINGER5で記事をスライドショーで表示させる方法を知りたい! AFFINGER5で使えるスライドショーは主に3つあります。 それぞれのスライドショーの表示イメージや設定について紹介します。 ContentsAFFINGER5でスライドショーで記事を表示させる方法記事スライドショー記事スライドショーの設定記事スライドショーの表示イメージ画像スライドショー画像スライドショーの設定画像スライドショーの表示イメージショートコードスライドショーショートコードスライドショーの設定ショートコードスライドシ ...

more

アフィンガー5

2021/7/16

AFFINGER5でfavicon(ファビコン)を設定する方法

疑問 AFFINGER5でfavicon(ファビコン)を設定できない!設定する場所はどこ? AFFINGER5では、favicon(ファビコン)という言葉を使っていないのでどこで設定していいか分からないかもしれません。 AFFINGER5でfavicon(ファビコン)を設定する方法を紹介します。 ContentsAFFINGER5でfavicon(ファビコン)を設定する方法favicon(ファビコン)のサイズfavicon(ファビコン)は重要なの? AFFINGER5でfavicon(ファビコン)を設定す ...

more

アフィンガー5

2021/5/13

AFFINGER5でhタグを変更したけど変わらない場合|見た目を変更する方法

疑問 AFFINGER5で「hタグを変更したけど変わらない!」けどどうすればよい?hタグの見た目を変更したい! ユーザーにページの項目を分かりやすく伝えるためや、SEO対策にもhタグは重要です。 AFFINGER5で「hタグを変更したけど見た目が変わらない場合」や「変更をどこで設定すればよいか」について紹介します。 Contentshタグを変更したけど変わらない場合hタグを変更できるようにする手順hタグの見た目を変更する方法h2・h3タグの基本スタイルh4・h5タグの基本スタイル左ボーダーラインだけのデザ ...

more

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

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

  • 記事スライドショー
  • 画像スライドショー
  • ショートコードスライドショー

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

-アフィンガー5
-,