【AFFINGER5】アフィンガー5でスライドショーを自由自在に設定する方法

サラリーマン

・アフィンガー5のスライドショー設定ってどうやるの？

・思い通りのスライドショー設定ができない

このようなお悩みにお答えします。

アフィンガー5には、スライドショーの設定が標準で搭載されています。

スライドショーを設定することで、回遊率を向上させたりページ滞在時間を伸ばす効果が期待できます。

またスライドショーには、「新着記事」や「特定のカテゴリー記事」を指定できたりと自由自在にカスタマイズ可能。

本記事では、スライドショーの設定方法、カスタマイズをお伝えしていきます。

記事を読み終わるころには、思い通りのスライドショーが設定できるようになりますのでぜひ最後までご覧ください。

本記事の内容

本記事を書いた人

ねこたろす

アフィンガー5を利用して4カ月ほど。アフィンガー5のカスタマイズに関する記事を10記事以上書いています。

ちなみに、まだアフィンガー5を導入するか迷っている方は、こちらの記事を参考にしてみて下さいね！

アフィンガー5のスライドショーとは

アフィンガー5のスライドショーとは、以下のように複数の記事をスライドショーのように表示できる機能です。

スライドショーを設定することで、以下の効果が期待できます。

複数の記事をスライドショー設定しておくことで、回遊率の向上が期待できます。

回遊率が高いほど、多くの記事が読まれることになり、SEOでも高評価が期待できますよね。

またスライドショーには、視覚的に読者に訴える効果もあります。

人間は受け取る情報のうち、約90%を視覚から得ていることが分かっています。

視覚器官からは、全体の87％もの多くの情報を得ていることが分かっています。（中略）

ドキュメントで伝達される情報も、そのほとんどが視覚から入ってきます。つまり、色や形やイメージといったビジュアル表現からさまざまな情報を得ています。（中略）

ドキュメントによる円滑なコミュニケーションを図るには、情報のビジュアル化を大いに活用すべきです。

引用元：株式会社コドス

ねこたろす

全体の約90%を占める視覚情報の中でも、色や形といったビジュアルが重要ということですね！

スライドショーでは、このようなビジュアル情報を読者に伝えることが可能です。

アフィンガー5のスライドショー設定方法

アフィンガー5では、スライドショーを以下の場所に設置することが多いです。

設置場所ごとに、詳しく解説していきますね！

アフィンガー5のスライドショー設定
①ヘッダー

ヘッダーに設置する場合、以下のようなイメージになります。

ねこたろす

トップページの最上部に表示されるのでインパクト大！

具体的な設定方法は、以下の通り。

以下の項目で細かいカスタマイズが可能です。

ちなみに、カテゴリＩＤは、投稿→カテゴリで確認できます。

ねこたろす

自分好みにカスタマイズしよう！

表示する記事数や、見せ方を変えたい場合には以下の流れで設定できます。

以下のようなショートコードが表示されますが、色々なカスタマイズが可能です。

次からカスタマイズ項目を解説していきますね！

アフィンガー5のスライドショー　カスタマイズ項目

アフィンガー５のスライドショーでは、様々なカスタマイズが可能です。

ねこたろす

以下、カスタマイズ項目をひとつずつ解説していきますね！

スライドショーカスタマイズ項目
①cat="〇〇"

表示するカテゴリを選択できます。

上記のカテゴリＩＤを記入すれば完了です。

スライドショーカスタマイズ項目
②page="〇"

表示する記事数を指定できます。

ねこたろす

5記事ぐらいがちょうどいいですよ！

スライドショーカスタマイズ項目
③order="〇"

記事の並び順を指定できます。

スライドショーカスタマイズ項目
④orderby="〇"

並べるルールを指定できます。

例えば、以下のような感じ。

スライドショーカスタマイズ項目
⑤child="〇"

子カテゴリーを表示させるかを選択できます。

スライドショーカスタマイズ項目
⑥slide="〇"

スライドさせるかを選択できます。

ねこたろす

スライドショーならonにしておく必要があります。

スライドショーカスタマイズ項目
⑦slide_to_show="〇,△,✕"

表示する列数を指定できます。

ねこたろす

簡単にいうと、〇＝PC、△＝タブレット、✕＝スマホの表示列数

スライドショーカスタマイズ項目
⑧slide_date="〇"

日付表示の有無を指定できます。

スライドショーカスタマイズ項目
⑨slide_more="〇"

個別記事へ飛ぶための、「ボタンの表示名」を指定できます。

標準だと「ReadMore」となっていますが、「記事を見る」などにカスタマイズ可能です。

スライドショーカスタマイズ項目
⑩slide_center="〇"

スマホでの表示を選択できます。

ねこたろす

標準ではonになっています。

スライドショーカスタマイズ項目
⑪fullsize_type="〇"

アイキャッチ画像の表示を指定できます。

ねこたろす

めっちゃカスタマイズ項目あるな！

アフィンガー5のスライドショー設定
②トップページ上下

スライドショーの設置位置として、トップページ上部はこんな感じ。

設定方法は以下の通りです。

ねこたろす

トップページ下部にも表示できるよ！

アフィンガー5のスライドショー設定
③サイドバー

サイドバーへ設定するとこんな感じ。

設定方法は以下の通りです。

ねこたろす

表示が小さいので、slide_to_show="1,1,1"がおすすめです。

アフィンガー5のスライドショー設定時の注意点

アフィンガー5のスライドショー機能は、カスタマイズが豊富で回遊率を高めることが可能です。

一方で、スライドショー設定時には注意点もあります。

それは、表示速度が遅くなる可能性があること。

実際、試しにトップページ上部にスライドショーを設定したところ、スピードは76→71になりました・・・。

アイキャッチ画像はフルサイズを読み込むため、画像が重いと表示速度に影響が出るためです。

画像劣化がしにくいというメリットもありますが、表示速度はSEOにおいて重要な評価項目のひとつ。

ちなみにアフィンガー5は、表示速度をはじめとしたSEO対策機能が標準で搭載されています。

以下の記事にまとめていますので参考にどうぞ。

まとめ：アフィンガー5のスライドショー設定は簡単

本記事の内容をまとめます。

スライドショーの効果

スライドショーの設定場所

スライドショーを設定することで、回覧率の向上や視覚的な訴求が可能となります。

ねこたろす

また、表示カテゴリや記事数・順番など多くの項目でカスタマイズもできる！

スライドショーをうまく活用して、自分だけのブログデザインを手に入れましょう！

それでは！

アフィンガー5のカスタマイズ関連記事