【AFFINGER5】スライドショーのデザイン・カスタマイズ設定方法を攻略

あき

AFFINGER5でのスライドショーの設定方法が分からない
AFFINGER5でのスライドショーのカスタマイズ方法分からない

こんな悩みを解決します。

ブログで人気パーツの「スライドショー」

ブログを見やすくするためや、デザイン性を重視したい時に使われることが多いです。

私のブログでもブログトップページの新着記事でスライドショーを使っています。

一見難しそうですが、この記事を読めば誰でも簡単に設定できますよ！

見やすいブログは、読者の滞在時間が長くなることに繋がるので、こだわりたいとこです。

AFFINGER5（アフィンガー5）では使い方を知るだけで、スライドショーを思い通りにカスタマイズすることが可能。

この記事を読んで、ブログのトップページや投稿記事にスライドショーを使っていきましょう！

本記事ではAFFINGER5のスライドショーのカスタマイズ方法を詳しく説明します。

スライドショーを設定するメリット

ブログでスライドショーを使うことは、サイトのデザイン性を高くするのに効果があります。また、デザイン性を高くすると、離脱率を低くすることにも繋がるので、ブログを読んでもらいやすくなります。

まずは、スライドショーを使うメリットを確認しましょう。

デザイン性UP

地味なサイトとデザイン性が高いのサイト、同じ情報ならばどちらのサイトが見たいですか？デザイン性が高いサイトですよね。

地味でレイアウトにこだわりのないサイトだと、見辛いと感じる読者さんもいます。すると、せっかくクリックしてもらったのに、記事は読んでもらえないなんてことも。

一方、デザイン性が高いサイトだとレイアウトにこだわっているので、読者は欲しい情報を探しやすくなります。

あき

見やすいとストレスも溜まらないね！

読者が快適に使ってもらえるように、ブログのデザイン性にこだわる際にスライドショーが役に立ちます。

興味を持たせる

たくさんの情報の中で動くものがあると気になります。人は無意識に動くものを目で追ってしまうものです。

例として2パターンの最新記事の紹介方法を載せました。

パターン１：最新記事（通常）

パターン２：最新記事（スライドショー）

2021/4/4

【初心者向け】AFFINGER5の購入方法とダウンロー...

2021/2/4

【初心者向け】WordPressのやるべき10個の初期...

2021/1/28

【保存版】iPhoneのメモアプリを使った効率のいいブ...

2020/12/26

【超基本】ブログでの稼ぎ方はたった3種類しかありません

2020/12/26

【副業ブログで稼げるのか？】月6桁なら今から始めても余...

このように最新記事一覧がスライドショーになってると目立ちます。あなたもパターン２の方が、興味を持ったのではないでしょうか？

記事内だけの話ではなく、トップページでも同じことが言えるでしょう。動くものがあるだけで、読者に興味を持ってもらうことができるのです。

しかし、使いすぎは鬱陶しい印象を与えるので注意が必要です。

サイト内滞在時間を増やせる

スライドショーを設定すると、新着記事等のアピールをすることができます。すると読者は、本来の目的とは違う記事を、開く可能性がUP！

たくさんの記事を見てもらうことは、サイト滞在時間を増やすことに繋がります。

サイト滞在時間はGoogleの評価指標の一つ。

【サイト滞在時間が長い → 良いサイト】とGoogleに判断され評価が上がるので、サイトが強くなります。

ブログで稼ぎたい・読んでもらいたいと考えてるのであれば、スライドショーをうまく使いましょう。

【AFFINGER5】スライドショーカスタマイズ方法

スライドショーのカスタマイズは記事投稿画面から設定することができます。

上記画像のように「タグ」→「記事一覧」→「カテゴリー一覧(スライドショー)」を選択してください。

「カテゴリー一覧(スライドショー)」をクリックすると次のコードが表示されます。

難しそうに見えますが、理解しやすいし簡単です。

まずはコードを理解していきましょう。

st-catgroup cat

カテゴリーIDを設定します。複数の場合は ","（半角）で区切りましょう。0の場合は新着記事が表示されます。

page

表示する記事の枚数を設定することができます。

order

日付順を設定できます。新しい順が ’desc’、古い順が 'asc' です。

orderby

どのような順序で並べるかを設定します。たくさん種類があるので紹介はしますが、私は「最新記事」で使ってるので 'id' しか使ってません。

child

子カテゴリーを表示させるかどうかを設定します。表示させるなら ’on’、表示させないなら 'off' です。

slide

スライドをさせるかどうか設定します。スライドさせるなら ’on’、スライドさせないなら 'off' です。

これを ’on’ にしたのが、今記事で紹介しているスライドショーです。

slides_to_show

スライドショーで表示させる記事の枚数を設定できます。（1〜3枚）

小さい画面の表示枚数が、大きい画面の表示枚数より多くする設定はできません。

サイドバーなどの狭い位置での3画面はレイアウトが崩れるので注意が必要です。

slide_data

投稿日を表示させるかどうか設定します。表示させるなら ’on’、表示させないなら 'off' です。

slide_more

’続きを読む’ ボタンに表示する文字を設定します。デフォルトは ’ReadMore’ に設定されてますが、'続きを読む' のように日本語に変更も可能です。

slide_center

スマホでの表示方法が、両端が見切れるデザインにするかどうかを設定します。両端を見切れさせるなら ’on’、させないなら 'off' です。

fullsize_type

スライドショーの大まかな表示方法を設定します。

あき

一通り設定して「プレビュー」から、スライドショーを確認してみましょう。

【AFFINGER5】スライドショー各場所設定方法

スライドショーはこの記事のように、記事内だけでなく様々な場所に設置することができます。上記画像を参考にどこに設置したいか考えてみましょう。

ここでスライドショーを適用した位置は次の４箇所です。

大まかな設定は同じですが、位置によってそれぞれ設定を変えた方が見やすくなるので、そのポイントも説明していきます。

「カテゴリー一覧(スライドショー)」のデフォルトから、どのように変更させたのかを変更点をまとめました。

ヘッダー画像エリア下のウィジェット

1. 「ダッシュボード」→「外観」→「ウィジェット」
2. 利用できるウィジェットの「テキスト」を「ヘッダー画像エリア下のウィジェット」に挿入
3. タイトルとコードを書いたら「保存」をクリック

デフォルトコードからの変更点は次の通りです。

トップページ

1. 「ダッシュボード」→「AFFINGER5管理」→「トップページ」
2. トップページに固定記事を挿入 or 挿入コンテンツ欄にコードを記入
3. 「保存」をクリック

固定ページの場合

1. 「固定ページ」→「挿入IDの固定ページ編集」
2. コードを挿入
3. 「更新」をクリック

シンプルなレイアウトにしたかったので、fullsize_typeを'text'に設定しています。文中を載せると統一感がなくなってしまうからです。

デフォルトコードからの変更点は次の通りです。

サイドバーウィジェット

1. 「ダッシュボード」→「外観」→「ウィジェット」
2. 利用できるウィジェットの「テキスト」を「サイドバーウィジェット」に挿入
3. タイトルとコードを書いたら「保存」をクリック

ここでは、「slides_to_show＝'1, 1, 1'」に設定しています。「slides_to_show='3, 3, 2'」であると次のように表示されてしまうからです。

あき

3枚表示はごちゃごちゃしてるね...。

デフォルトコードからの変更点は次の通りです。

フッター右用ウィジェット （3列目）

1. 「ダッシュボード」→「外観」→「ウィジェット」
2. 利用できるウィジェットの「テキスト」を「フッター右用ウィジェット」に挿入
3. タイトルとコードを書いたら「保存」をクリック

ここでは、「fullsize_type＝'card'」に設定しています。表示するエリアが小さいため、コンパクトにしました。

デフォルトコードからの変更点は次の通りです。

【AFFINGER5】スライドショーカスタマイズ設定まとめ

AFFINGER5でのスライドショーの詳しいカスタマイズ設定方法を解説しました。

ブログをおしゃれにすると、読者の目に止まって滞在時間が長くなります。設定も簡単なので、是非この記事を参考にしながらスライドショーを実装してください。

また、他に役に立つAFFINGERに関する記事は下記にまとめていますので、ご活用下さい。

AFFINGER記事一覧