こんな悩みに答えます。
本記事の内容
- カテゴリー（記事内）にスライドショーを表示させる方法
- カテゴリー（記事内）以外にスライドショーを表示させる方法
- スライドショーの中の日付を見やすくする方法
AFFINGER5（アフィンガー５）でのスライドショーは、１つのエリアに複数の記事をまとめることができ、視覚的に目立たせることができる機能です。
それでは、早速始めていきます。
[toc]
アフィンガー５のカテゴリー（記事内）にスライドショーを表示させる方法
カテゴリー（記事内）にスライドショーを表示させる方法
カテゴリー記事内にスライドショーを表示させる方法について、解説します。
まず、スライドショーを入れたい記事の編集画面を開きます。
「スライドショー」の追加方法
ツールバーの「①タグ → ②記事一覧/カード → ③カテゴリ一覧（スライドショー）」をクリックします。
すると下記のコードが表示されます。（こちらが「スライドショー」を表示するコードです）
スライドショーのコード
各ショートコード
「cat=""」 ⇨ カテゴリーIDを入力します
「page=""」 ⇨ スライドショーに表示させたい記事数を入力します
「order=""」 ⇨ 記事の並び順のショートコード
「orderby=""」 ⇨ 何順で並べるかのショートコード（タイトル,日付など）
「child=""」 ⇨ 「on」にすると子カテゴリーが表示できます
「slide=""」 ⇨ スライドのショートコード。「on」はスライド,「off」は無し
「slides_to_show="〇〇,〇〇,〇〇"」 ⇨ 表示させる記事の列数
「slide_date=""」 ⇨ 日付を表示。「on」だと日付が表示。未入力は非表示
「slide_more="ReadMore"」 ⇨ 「続きを読む」の文言を変更
アフィンガー５カテゴリー（記事内）以外にスライドショーを表示させる方法
カテゴリー（記事内）以外にスライドショーを表示させる方法
次に、カテゴリー（記事内）以外に「スライドショー」を表示させる方法について、解説します。
- ヘッダー
- サイドバーメニュー
- フッター
AFFINGER5のスライドショーの表示方法①：
ヘッダー
「AFFINGER5管理 → ヘッダー」をクリックします。
「AFFINGER5管理 → ヘッダー」
上記のキャプチャの通り、「ヘッダーに記事をスライドショーで表示する」にチェックを入れます。
最後に「save」をクリックすれば、ヘッダーにスライドショーが表示されます。
AFFINGER5のスライドショーの表示方法②：
サイドメニュー
「サイドバーメニュー」にカルーセルの設定は「①外観 → ②ウィジェット」からできます。
「外観 → ウィジェット → サイドバーウィジェット」
ウィジェットの「サイドバーウィジェット」に「00_STINGERカスタムHTML」を追加して、この中に以下の「カテゴリ一覧（スライドショー）」のコードを入れます。
カテゴリ一覧（スライドショー）
最後に「保存」をクリックして完了です。
AFFINGER5のスライドショーの表示方法③：
フッター
フッターも同じように「①外観 → ②ウィジェット」から編集できます。
フッターの２列目に「カルーセル」を追加したい場合は、「フッター右用ウィジェット（２列目）」に「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（アフィンガー５）のスライドショー
ここまで、AFFINGER5（アフィンガー５）のスライドショー追加方法について、紹介しました。
AFFINGER5でのスライドショーの設定方法について、理解できましたでしょうか？
AFFINGER5（アフィンガー５）では、スライドショーがボタン１つで作ることができ、プログラミングの知識がなくても簡単に作ることができます。
また、AFFINGER5（アフィンガー５）を使用してみての感想については、以下記事でまとめていますので、導入を検討されている方は参考にしてみてください。
-
-
AFFINGER6（アフィンガー）を使ってみての感想【メリット・デメリットを紹介】
こんな悩みに答えます。 本記事の内容 AFFINGER6とは？【前提情報】 AFFINGER6（アフィンガー6）を使ってみてのデメリット・メリット AFFIN ...
続きを見る
今回は以上です。
ここまで読んでいただき、ありがとうございました！