【超簡単！】Cocoonのヘッダー下にスライドショーを設置する方法

ブログのヘッダー下に設置されるスライドショーってかっこいいですよね？

「自分のブログにも設置したい」と思っても、やり方が分からない方も多いと思います。

そこで今回は『Cocoonのヘッダー下にスライドショーを設置する方法』を解説していきます。

Cocoonなら『カルーセル』機能を使うことで簡単に設置できますので、ぜひ参考にしてみてください。

Cocoonのヘッダー下にスライドショーを設置する方法

動画でも解説していますので、合わせて参考にしてください。

Cocoonでスライドショーを設置するカルーセル機能は『Cocoon設定 ⇒ カルーセル』で設定します。

いくつか設定項目がありますので、以下で詳しく解説していきます。

カルーセルの表示

『カルーセルの表示』では、カルーセルを表示させるか？ また表示させるならどのページに表示させるか？を選択します。

以下の７つから選択できます。

個人的なオススメは以下の２つのいずれかです。

なぜなら、投稿ページにスライドショーを表示させると、検索から訪問した読者がすぐに別ページに移ってしまう可能性があるからです。

検索からたどり着いた記事の上に、他の記事への誘導があると、つい気になってしまいますよね？

ですから、投稿ページにスライドショーを設置するのは、あまりオススメできません。

表示内容

『表示内容』では、どんな記事をスライドショーに表示させるか？を、以下の３つから選択します。

一般的なブログなら、力を入れているカテゴリーやタグを複数選択するのが良いと思います。

速報性の高い内容を扱っているなら、期間を短めにして人気記事を選択するのも良いでしょう。

また、Cocoonのカルーセル機能では個別に記事を選ぶことができませんが、スライドショーに表示させたい記事だけに特定のタグを入れて設定すれば、それも可能になります。

カルーセルの並び替え

『カルーセルの並び替え』では、カルーセルの表示順を以下の３つから選択できます。

『降順』というのは、新しい順番です。

つまり『投稿順』『更新順』を選択すると、新しい順番にカルーセルに表示されます。

この表示順はお好みで選択してみてください。

最大表示数

Cocoonのカルーセル機能では、画面のサイズで同時に表示される枚数が変わります。

自分で同時に表示される枚数を決めることはできません。

パソコンの画面では6枚で、画面のサイズが小さくなるごとに1枚ずつ減っていき、スマホでは同時に2枚表示されます。

そして『最大表示数』では、カルーセルに設定する枚数を入力します。

例えば、最大表示枚数を18にすると、パソコンの画面では6枚ずつ3回に分けてスライド表示されるということです。

ですから、基本的には6の倍数の数字で設定しておくと良いです。

ただし、設定した数以上の記事がない場合は、記事数分しか表示されませんので、お気を付けください。

枠線の表示

『枠線の表示』にチェックを入れると、カルーセルのカードに枠を付けることができます。

【チェックを入れた場合】

【チェックを外した場合】

違いが分かりにくいですが、チェックを入れたほうがカードの枠線がハッキリ表示されます。

こちらはお好みで選択してください。

オートプレイ

『オートプレイ』にチェックを入れると、カルーセルが自動でスライドします。

多くのブログでスライドショーは自動で動いていますので、こちらは基本的にはチェックを入れておいたほうが良いでしょう。

オートプレイインターバル

『オートプレイ』にチェックを入れている場合、こちらの『オートプレイインターバル』で設定した秒数ごとにカルーセルがスライドしていきます。

デフォルトでは5秒になっていますので、変更するなら実際の表示を確認しながら行ってみてください。

まとめ

今回は『Cocoonのヘッダー下にスライドショーを設置する方法』として、『カルーセル』機能について解説してきました。

スライドショーはブログの見た目を華やかにしてくれますが、本来は読者の回遊率を上げて、より多くの記事を読んでもらうのが目的です。

スライドショーを設置するとブログの表示速度が遅くなり、読者によっては邪魔に感じてしまう方もいます。

ですから、カルーセルを設置したら、それで満足せずに効果があったかどうか検証することも忘れないでくださいね。