
こんな悩みに答えます。
本記事の内容
- カテゴリー(記事内)にスライドショーを表示させる方法
- カテゴリー(記事内)以外にスライドショーを表示させる方法
- スライドショーの中の日付を見やすくする方法
AFFINGER5(アフィンガー5)でのスライドショーは、1つのエリアに複数の記事をまとめることができ、視覚的に目立たせることができる機能です。

それでは、早速始めていきます。
[toc]
アフィンガー5のカテゴリー(記事内)にスライドショーを表示させる方法
カテゴリー(記事内)にスライドショーを表示させる方法
カテゴリー記事内にスライドショーを表示させる方法について、解説します。
まず、スライドショーを入れたい記事の編集画面を開きます。
「スライドショー」の追加方法
ツールバーの「①タグ → ②記事一覧/カード → ③カテゴリ一覧(スライドショー)」をクリックします。
すると下記のコードが表示されます。(こちらが「スライドショー」を表示するコードです)
スライドショーのコード
各ショートコード
「cat=""」 ⇨ カテゴリーIDを入力します
「page=""」 ⇨ スライドショーに表示させたい記事数を入力します
「order=""」 ⇨ 記事の並び順のショートコード
「orderby=""」 ⇨ 何順で並べるかのショートコード(タイトル,日付など)
「child=""」 ⇨ 「on」にすると子カテゴリーが表示できます
「slide=""」 ⇨ スライドのショートコード。「on」はスライド,「off」は無し
「slides_to_show="〇〇,〇〇,〇〇"」 ⇨ 表示させる記事の列数
「slide_date=""」 ⇨ 日付を表示。「on」だと日付が表示。未入力は非表示
「slide_more="ReadMore"」 ⇨ 「続きを読む」の文言を変更

アフィンガー5カテゴリー(記事内)以外にスライドショーを表示させる方法
カテゴリー(記事内)以外にスライドショーを表示させる方法
次に、カテゴリー(記事内)以外に「スライドショー」を表示させる方法について、解説します。

- ヘッダー
- サイドバーメニュー
- フッター

AFFINGER5のスライドショーの表示方法①:
ヘッダー
「AFFINGER5管理 → ヘッダー」をクリックします。
「AFFINGER5管理 → ヘッダー」
上記のキャプチャの通り、「ヘッダーに記事をスライドショーで表示する」にチェックを入れます。
最後に「save」をクリックすれば、ヘッダーにスライドショーが表示されます。

AFFINGER5のスライドショーの表示方法②:
サイドメニュー
「サイドバーメニュー」にカルーセルの設定は「①外観 → ②ウィジェット」からできます。
「外観 → ウィジェット → サイドバーウィジェット」
ウィジェットの「サイドバーウィジェット」に「00_STINGERカスタムHTML」を追加して、この中に以下の「カテゴリ一覧(スライドショー)」のコードを入れます。
カテゴリ一覧(スライドショー)
最後に「保存」をクリックして完了です。
AFFINGER5のスライドショーの表示方法③:
フッター
フッターも同じように「①外観 → ②ウィジェット」から編集できます。
フッターの2列目に「カルーセル」を追加したい場合は、「フッター右用ウィジェット(2列目)」に「00_STINGERカスタムHTML」を追加して「カテゴリ一覧(スライドショー)」のコードを入力します。
最後に「保存」をクリックすれば完了です。

なお、アフィンガー5の「フッターのカスタマイズ方法」について、以下記事に一覧にしてまとめていますので、参考にしてみてください。
-
-
AFFINGER5フッターのカスタマイズ方法まとめ
こんな悩みに答えようと思います 本記事の内容 AFFINGER5でフッターにメニューを追加する方法 AFFINGER5でフッターの背景色を変更する方法 AFF ...
続きを見る
スライドショーの中の日付を見やすくする方法
最後に、スラードショー内の日付をみやすくする設定を解説します。(キャプチャの赤ワクで囲った箇所です。)

CSSを編集するので、編集前にはバックアップをしておいてください。
バックアップのやり方は以下で詳しく紹介しています。
>>UpdraftPlusプラグインを使ってバックアップする方法
まず『外観 → 追加CSS』を開き、以下ソースコードを追加します。
/* 日付に影をつけるCSS */
.post-slide-date {
background-color: #205a97;
border-radius: 6px;
padding: 3px;
}
「追加CSS」画面
上記のように、CSSを追加できましたら、「公開」ボタンをクリックして完了です。

まとめ:AFFINGER5(アフィンガー5)のスライドショー
ここまで、AFFINGER5(アフィンガー5)のスライドショー追加方法について、紹介しました。
AFFINGER5でのスライドショーの設定方法について、理解できましたでしょうか?
AFFINGER5(アフィンガー5)では、スライドショーがボタン1つで作ることができ、プログラミングの知識がなくても簡単に作ることができます。
また、AFFINGER5(アフィンガー5)を使用してみての感想については、以下記事でまとめていますので、導入を検討されている方は参考にしてみてください。
-
-
AFFINGER6(アフィンガー)を使ってみての感想【メリット・デメリットを紹介】
こんな悩みに答えます。 本記事の内容 AFFINGER6とは?【前提情報】 AFFINGER6(アフィンガー6)を使ってみてのデメリット・メリット AFFIN ...
続きを見る
今回は以上です。
ここまで読んでいただき、ありがとうございました!