【Cocoon】スライドショーを設定する方法まとめ

WordPressテーマCocoonを使っているけど…

本記事では、そういった要望にお応えしていきます。

ひとことで「スライドショー」といっても設置する位置やスライドショー自体の形状の違いで呼び方ややり方が変わってきます。

ですので、この記事は

を順序よく明らかにしていきたいと思います。

トップページにスライドショーを表示する

トップページにスライドショーを設置する方法は２つあります。

Cocoon設定のカルーセルは小さい記事カードが並んで、数秒でくるくるとまわってくヤツ。

Meta Sliderプラグインのスライドショーは画面横幅いっぱい使って画像を表示するヤツです。

順番に見てみましょう。

Cocoon設定のカルーセルで設定する

小さ目の記事カードがくるくる回るイメージのスライドショーがカルーセルです。

カルーセルはCocoonの機能として最初から入っています。Cocoon設定→カルーセルから表示させる設定をしましょう。

難しい設定内容は特にないので、カルーセルという名前だけ知ってしまえばあとは簡単にできますね。

詳しくはCocoon公式のページにやり方が画像付きで詳しくありますので、そちらをご覧ください。
Cocoon公式ヘッダー下にお勧め記事カルーセルを表示する方法

Meta Sliderプラグインを使う

Meta Sliderというプラグインを使用するとちょっと派手なサイトでよく見るタイプの横幅いっぱいの画像がスライドするスライドショーが作れます。

Meta Sliderは優秀なプラグインなので、トップページだけでなく投稿ページにも使用することができます。

詳細の設定方法は次の記事に画像付きでありますので、参考にしてみてください。
外部リンクWordPress Cocoonでトップページ上部にスライドショーを表示する

続いて記事内にスライドショーを設置する方法です。

記事内の画像をスライドショーで表示する

旅行系の記事だったりレビュー記事で大量に画像を使うとき、スライドショーが欲しくなりますよね。

この項では、記事内にスライドショーを設置する方法を2種類紹介していきます。

順番に見ていくことにしましょう。

Cocoon設定の画像で設定する

Cocoon設定の画像で、とある設定をすることで記事内の画像をスライドショーとして表示することができます。

下にざっくりですがやり方を書いておきます。大事なところは、画像にメディアファイルのリンクをすることです。

関連する記事がCocoonの公式ページにありますので、そちらも参考にしていただけるといいかと思います。
Cocoon公式Cocoonの画像拡大効果（Lightbox）ライブラリ各々お勧めの使いどころ

Meta Sliderプラグインを使う

トップページのスライドショーでもおすすめのMetaSliderプラグインですが、記事内のスライダーとしても使えます。

やり方を説明している記事は探すとたくさんでてきます。参考として１つリンクを貼っておきますので、試したい方は下の記事から確認してみてください。

外部リンク記事の中の画像スライダーにはMetaSliderプラグインがいい感じ

スライドショーを設定する方法まとめ

本記事では、【Cocoon】スライドショーを設定する方法まとめ

ということで、Cocoonを使っている人向けにスライドショーの設置方法をまとめてきました。

トップページや記事にスライドショーがあると見栄えがする。というメリットはあるものの、逆に動きがあると気が散ることにもなります。

また、カルーセルやプラグインを使用することによってサイトスピードは遅くなる傾向にあります。

スライドショーのメリットとデメリットをしっかりお考えになったうえで設置することをおすすめします。

Cocoonの「困った」を解決する記事

Cocoonの使い方

当ブログで一番読んでいただきたいのはCocoonの使い方の記事です。以下の点を参考書のように体系的にまとめているので、まずはここから読み始めるのをおすすめします。

外観・デザインをカスタマイズ

特に本記事のようにブログの見た目をカスタマイズするのに使える記事は下記でまとめています。ブログをあなたらしくするためには必見です。
あわせて読みたい【Cocoon】デザインを整える簡単おすすめカスタマイズまとめ