こんにちは、ごー（@goo2929）です！
AFFINGER5でおしゃれな記事スライドショー（スライダー）を設置したい…。トップページとか記事の中とかいろいろな場所に設置する方法を教えて！
このような悩みを解決します。
最初に結論から言うと、この記事を読めば下記のような記事スライドショーを自由自在に扱えるようになります。
カスタマイズ方法も紹介するので、一緒におしゃれなスライドショーを作ってみましょう！
本記事で分かること
最新情報
-
【おすすめ特典あり】AFFINGER5の徹底レビュー&購入方法！
続きを見る
記事スライドショーにはどんな効果があるの？
最初にサクッと記事スライドショー（スライダー）を使うべき”理由”について認識しておきましょう！
その理由は主に3つです。
- たくさんの情報を与えられる
- 見た目がおしゃれ
- →結果、回遊率がアップする
たとえば下記をご覧ください。
記事スライドショーの最大のメリットはこのように設置するだけでユーザーに対して複数の記事を紹介できることです。
もしもユーザーがブログ内でたくさんの記事を読み、そして記事の内容に満足すればあなたのファンになってブックマークまでしてくれるかもしれません。
さらにAFFINGERのスライドショーはおしゃれなのでユーザーは気持ちよくあなたのサイトを回遊できますね。
記事スライドショーを設置する4つの方法を紹介！
それでは早速記事スライドショー（スライダー）の設置方法を見ていきましょう。
設置するのは以下の4か所です。
※クリックすればそれぞれの設置方法にジャンプします。
画像を使って分かりやすく解説しますね。
記事スライドショーをヘッダー（トップページ）に表示する方法
完成後イメージは↓こんな感じです。
トップページに大きく表示されるインパクトのあるスライドショーですね！
設置方法はめちゃくちゃ簡単です。
①「AFFINGER管理」→「ヘッダー」に移動する
②少し下にスクロールして「記事スライドショー設定」をする
細かい設定はありますが、基本的には下記のように設定すればOKです。
「表示するカテゴリID」の項目はあなたの表示したいカテゴリIDを入力しましょう！
IDはWordpress管理画面の「投稿」→「カテゴリー」で確認できます。
これで完了です。
めちゃくちゃ簡単ですね！
記事スライドショーをトップページ上部に設置する方法
完成後のイメージは下記のとおりです。
それでは設置方法を見てみましょう！
「AFFINGER管理」→「トップページ」に移動
この後紹介するコードを「挿入コンテンツ」の項目に貼り付けてください。
入力するコードは下記をコピペでOKです。
[st-catgroup cat="カテゴリーID" page="7" order="desc" orderby="id" child="on" slide="on" slides_to_show="3,3,2" slide_date="" slide_more="続きを読む" fullsize_type="text"]
赤字の部分だけあなたの表示したいカテゴリーIDを入力しましょう！
ちなみにカテゴリーIDを入力しない場合には自動的に新着記事が表示されます。
後程このコードの中身を少し変えて記事スライドショーをカスタマイズする方法をご紹介します！
※ここをクリックすればカスタマイズ方法の解説までジャンプします。
記事スライドショーをウィジェットを使って自由に表示する方法
ここまできたらあとは応用するだけです。
例としてフッターに記事スライドショーを表示してみました。
やり方を解説します。
「外観」→「ウィジェット」に移動する
ウィジェットに移動後、「00_STINGERカスタムHTML」を設置したい項目へドラッグ＆ドロップします。
あとは先ほどと同じ下記コードを貼り付けるだけです！
[st-catgroup cat="カテゴリーID" page="7" order="desc" orderby="id" child="on" slide="on" slides_to_show="3,3,2" slide_date="" slide_more="続きを読む" fullsize_type="text"]
これで好きな場所に記事スライドショーを設置できるようになりましたね。
※ここをクリックすればカスタマイズ方法の解説までジャンプします。
記事スライドショーを記事内に表示させる方法（ブロックエディタ）
最後にブロックエディタを使って記事内にスライドショーを表示させる方法を解説します。
参考は下記のとおりです。
ブロックエディタだとこれが本当に簡単で、先ほど紹介した下記コードを記事に貼り付けるだけでOKなんです。
[st-catgroup cat="カテゴリーID" page="7" order="desc" orderby="id" child="on" slide="on" slides_to_show="3,3,2" slide_date="" slide_more="続きを読む" fullsize_type="text"]
それでは次にこのコードを編集してあなた好みの記事スライドショーを作ってみましょう！
記事スライドショーをカスタマイズする方法を解説！
それでは記事スライドショーをカスタマイズしていきましょう。あなたのサイトに合ったおしゃれな記事スライドショーを作るためにはこの工程がカギなのでぜひチャレンジしてみてください。
本記事では下記のコードを紹介しました。
[st-catgroup cat="カテゴリーID" page="7" order="desc" orderby="id" child="on" slide="on" slides_to_show="3,3,2" slide_date="" slide_more="続きを読む" fullsize_type="text"]
このコードの構成を詳しく見てみましょう。
見出しテキスト
- 「cat=""」：表示するカテゴリーID（未入力で新着記事）
- 「page=""」：スライドさせる記事数
- 「order=""」：日付順（新しいものから順は"desc"、古いものから順は"desc"）
- 「orderby=""」：並び方法（投稿IDは"id"、ランダムは"rand"など）
- 「child=""」：子カテゴリID
- 「slide=""」：スライドさせるか選択（onかoff）
- 「slides_to_show="3,3,2"」：画面を見た時の表示数（1番初めの3のみ変更する）
- 「slide_date=""」：日付を表示させるか選択（onかoff）
- 「slide_more=""」：カード下に表示する文字（"Read more"や”続きを読む”など）
- 「fullsize_type=""」：画像のみ表示（”card”）、画像とテキスト表示（"text"）を選ぶ。空欄の場合はすべて表示。
上記を応用すると下記のように画像が並ぶ記事スライドショーを作ることもできます。
この表示のコードはこんな感じです。（変更部分のみ赤字）
[st-catgroup cat="カテゴリーID" page="7" order="desc" orderby="rand" child="on" slide="on" slides_to_show="6,3,2" slide_date="" slide_more="" fullsize_type="card"]
このようにコード内を少し編集するだけで全く違う記事スライドショーとなります。
特に「fullsize_type=""」の部分は記事スライドショーの見た目を変える大切な項目なので、色々試してあなたに合った表示をさせましょう。
ユーザーに何を届けたいのかを考えるのが1番大切です！
おしゃれな記事スライドショーの設置方法｜まとめ
本記事のまとめ
本記事の内容をマスターすれば記事スライドショーを自由自在に作成することができます。
ブログによって最適な表示は異なるので、あなたに合った記事スライドショーを試行錯誤しましょう。
覚えればかなり作業効率が良くなるので、ぜひ本記事をブックマークして繰り返し練習してみてください。
今回は以上です。