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

CocoonスライドショーCocoon

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

  • トップページにスライドショーを設置したい
  • 記事内にスライドショーを設置したい

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

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

ですので、この記事は

  • あなたの思っているスライドショーはなんなのか?
  • そいつはどうやれば設置できるのか?

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

目次からあなたのやりたい項目にジャンプして、読み進めていただければと思います

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

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

  • Cocoon設定のカルーセルで設定する
  • Meta Sliderプラグインを使う

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

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

順番に見てみましょう。

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

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

▼カルーセル▼

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

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

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

Meta Sliderプラグインを使う

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

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

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

以上がトップページにスライドショーを設定する方法になります

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

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

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

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

  • Cocoonにもともとある機能
  • Meta Sliderプラグインを使用する方法

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

Cocoon設定の画像で設定する

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

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

ざっくりやり方
  1. Cocoon設定画像
  2. 画像の拡大効果よりSpotlightを選択し変更をまとめて保存
    • ここまででCocoon設定終了、次から投稿画面でやること
  3. 投稿画面で画像ブロックを使って画像を挿入する
  4. 挿入した画像を選択し、リンクでメディアファイルを指定
  5. プレビューや公開後のページで画像をクリックする
    • すると画像拡大し、右上にスライドショーボタンもある
▼Cocoon設定→画像より▼

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

ぜひあなたのブログで試してみてください

Meta Sliderプラグインを使う

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

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

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

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

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

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

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

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

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

Cocoon関連記事

本記事以外にもCocoonに関する記事を書いています。そちらもどうぞご覧になってください。

Cocoon歴1ヶ月くらいの人向け

【Cocoon】ブログをツイッターと連携する具体的な手順
【Cocoon】ボタンの使い方が余裕でわかるようになる【ブロックエディタ】
【Cocoon】スライドショーを設定する方法まとめ
【Cocoon】アイキャッチ画像サイズを統一して揃える設定方法
【Cocoon】アフィリエイト広告の貼り方を始めから丁寧に【解説】
【Cocoon】アドセンス広告の貼り方を始めから丁寧に【解説】
Cocoonスキン一覧まとめ!カスタマイズなしでもおしゃれに決まる
【Cocoonスキン】おすすめ4選!とにかくブログをいい感じにしたい
【Cocoon】固定ページを一覧表示させる方法【ヘッダー/フッターほか】
【Cocoon】記事の書き方!投稿画面の使い方を画像たっぷり丁寧に解説【初心者向け】
【Cocoon】パンくずリストを投稿/カテゴリー/固定の各ページに設置する方法
Cocoonブロック一覧!全機能まとめ【初心者向け】
【Cocoon】お問い合わせフォームの設置方法を初心者向けに画像たっぷりで説明する
【Cocoon】目次が表示されない⁉作り方完全解説
【Cocoon】投稿画面ツールバー機能一覧|文字色・ルビほか【初心者向け】
【Cocoon】サイドバーの基本的な使い方【初心者向け】
【Cocoon】吹き出しの基本的な使い方/右に変更など【初心者向け】

Cocoon歴半年くらいの人向け

【Cocoon】おすすめカードでトップページ等をカスタマイズしよう!
【Cocoon】ショートコードの使い方!便利さをマジで知ってもらいたい
【Cocoon】Twitter(ツイッター)埋め込みは秒でできる
【Cocoon】テーブル/表を作成する方法を丁寧に解説(ブロックエディタ)
【Cocoon】行間と段落の間隔を調整する方法【初心者向け】細部にこだわろう
【Cocoon】トップページがボタン1つでサイト型にできるようになった【衝撃】
【Cocoon】カスタマイズまとめ!初心者でもわかりやすく解説
【Cocoon】リスト(箇条書き)をボックスに入れる超簡単な方法【カスタマイズ不要】
【Cocoon】ブログカードの基本的な使い方【初心者向け】
【Cocoon】サイドバーで目次をスクロール追従させる方法【初心者向け】

Cocoon歴がもっと長い人向け

【Cocoon】サイドバーカスタマイズ!カテゴリーのボックスメニューは意外と難しくない
【Cocoon】ブログカードカスタマイズ「続きを読む」を入れる/タイトルのみにする!
【Cocoon】目次カスタマイズ‼見やすくシンプルおしゃれにしよう【CSSコピペでOK】
【Cocoon】スマホ表示簡単カスタマイズ‼ハンバーガーメニューを固定追従させる

コメント