【AFFINGER5】スライドショーの設定方法を紹介！

質問者

AFFINGER5でスライドショーを使いたいけどよくわからない

様々な人がトップページなどに最新記事やカテゴリーのスライドショーの設定していると思います！

スライドショーはヘッダーに大きく設定する方法と記事内にコードを入力して設定する2つの方法があります！

どちらもAFFINGER5ではスライドショーの設定が1クリックでできます！

そこで今回は両方の最新記事とカテゴリーのそれぞれのスライドショーの設定方法を紹介します！

他のカスタマイズ方法はこちらの記事で紹介しています！

こんな方におすすめ

トップページのヘッダーにスライドショーを表示したい
トップページのヘッダー以外の場所にスライドショーを表示したい
記事中にスライドショーを表示したい

ヘッダーにスライドショーを表示する方法
コートを使用してスライドショーを表示する方法
スライドショーのコードの意味
【AFFINGER5】スライドショーの設定方法を紹介のまとめ

ヘッダーにスライドショーを表示する方法

AFFINGER5　スライドショー12

ヘッダーに設定できるスライドショーとはこのようなトップページに表示されるスライドショーのことをさします！

大きく表示されるのでとてもインパクトがありますよね！

では、この表示の設定方法について説明していきます！

AFFINGER5　スライドショー13

AFFINGER5管理をクリックします。
「ヘッダー」をクリックして記事スライドショー設定を見てください。
一番上にあるヘッダーに記事をスライドショーで表示するにチェックを入れます。

これで設定完了です！

設定を変えなければ新着記事がスライドショーで表示されます。

もし一定のカテゴリーを表示させたい場合は表示するカテゴリIDという欄に表示させたいカテゴリのIDを入力しましょう！

AFFINGER5　スライドショー14

カテゴリIDは「投稿」→「カテゴリ」で確認することが出来ます！

AFFINGER5　スライドショー3

カテゴリリンクを非表示や投稿日を非表示にするなど細かいカスタマイズも同じページで出来るので是非いじってみてください！

コートを使用してスライドショーを表示する方法

記事中、トップページどちらでもやり方は同じです。

AFFINGER5　スライドショー

まず、編集画面を開いたら「タグ」→「記事一覧」→「カテゴリ一覧(スライドショー)」をクリックします。

AFFINGER5　スライドショー

すると、このようなコードが表示されます。

初めてこれを見たときはよくわからず困惑したため、この後はこのコードについて紹介します。

注意ポイント

WordPressのエディターがGutenbergになっている場合は、Classic Editorというプラグインを有効化しておきましょう。

スライドショーのコードの意味

まずはスライドショーのコードの意味を紹介していきます。

これが良くわからず設定を諦めてしまう方がいると思うので簡単に解説していきます。

st-catgroup cat=""

表示させたいカテゴリIDを設定します。

カテゴリ一覧

カテゴリ一覧を表示させたい場合はまずカテゴリIDを確認します。

カテゴリーの設定方法はこちらの記事に書いてあります！

: 【AFFINGER5】ヘッダーメニュー（グローバルメニュー）の設置方法を紹介！

続きを見る

AFFINGER5　スライドショー3

「投稿」→「カテゴリー」をクリックします。

すると、このようなページがでてくるため、表示したいカテゴリーのIDをst-catgroup cat=""に入力します。

例

AFFINGER5のカテゴリーをスライドショーにしたい場合はst-catgroup cat="21"

page=""

表示させたい記事数を設定します。

5記事表示したい場合はpage="5"とします。

order=""

記事の並び順を降順（新しい順）か昇順（古い順）にするかを設定します。

降順→desc
昇順→asc

と入力します。

orderby=""

何順で記事を並べるかを紹介します。

none：順序をつけない
id：投稿IDで並び替える
title：タイトルで並び替える
date：日付で並び替える
modified：更新日で並び替える
rand：ランダムで並び替える

基本的には設定を変えずに"id"にままでいいと思います！

child=""

子カテゴリーも表示させるかを"ON"か"OFF"で設定します。

基本的には"ON"のままで大丈夫です。

slide=""

スライドにするかしないかを選択します。

この記事を見に来た人はスライドショーにしたいと思うので"on"でいいと思います。

下にONとOFFの違いを表示しておきます。

slide="on"

2020/9/25

AirPods Pro（エアーポッズプロ）をレビュー！充電用のアダプタが同封されてないので注意！

2019年10月30日に発売された「AirPods Pro（エアーポッズプロ）を購入しました！ワイヤレスイヤホン&ノイズキャンセリングを今まで使ったことがない人間がAirPods Proを使うとどんな風に感じるのかをレビューします！もくじAirPods Pro（エアーポッズプロ）の外観AirPods Pro（エアーポッズプロ）のサイズと重量附属品注意！充電用のアダプタが同封されてないAirPods Proの充電方法Lightning－USB-Aケーブルを使用USB‐C規格のアダプ ...

【ColorPick Eyedropper】 Webサイトで使われている色を調べる方法

2020/9/21

Webサイトで使われている色を調べる方法【ColorPick Eyedropper】

質問者気になるサイトの色使いを参考にしたいけど、何の色を使っているかわからない今回はWebサイトで使われている色を確認することが出来るColorPick Eyedropperの使い方を紹介していきます！もくじWebサイトで使われている色を調べる方法ColorPick Eyedropperのインストール方法ColorPick Eyedropperが表示されない場合ColorPick Eyedropperの使用方法Webサイトで使われている色を調べる方法【ColorPick E ...

2020/8/8

【WordPress】TinyMCE Advancedでテーブルの背景色を変更する方法！

ビジュアルエディターの拡張機能としてよく使われるTinyMCE Advanced。 TinyMCE Advancedを使うと表（テーブル）が簡単に設置することが出来ます。今回は表（テーブル）の背景色を変更する方法を紹介します！もくじTinyMCE Advancedでテーブルを表示する方法表の挿入方法テーブルの背景色の変更行の背景色の変更セルの背景色の変更【WordPress】TinyMCE Advancedでテーブルの背景色を変更する方法のまとめ TinyMCE Advan ...

2020/8/30

今は様々なインフルエンサーと呼ばれるブロガーさんがいます。そのブロガーさんたちがどんなWordPressのテーマを使用しているか気になりませんか？今回はこちらの記事で紹介しているWPSNIFFERを使用して有名ブロガーが使用しているテーマを調べてみました！もくじマクリン｜マクリン今日はヒトデ祭りだぞ！｜ヒトデクロネのブログ講座｜クロネTsuzuki Blog｜Tsuzukiかえるのしっぽ｜びびZOOLOG｜ズーキーNOJI BLOG｜NOJI副業コンパス｜ク ...

2020/9/25

AFFINGER5を半年使ってみた感想レビュー｜メリット&デメリットを紹介！

AFFINGER5を使ってブログを始めて半年がたちました。そこで今回はこれからAFFINGER5を購入しようかどうか迷っている方に向けて、メリットとデメリットをそれぞれ3つずつ紹介してきます！ AFFINGER5購入サイトもくじAFFINGER5のメリットAFFINGER5のメリット　カスタマイズの自由度が高いAFFINGER5のメリット　Googleアドセンスの設置が楽AFFINGER5のメリット　多彩なタグAFFINGER5のデメリットAFFINGER5の ...