【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設定の画面

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

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

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

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

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

Meta Sliderプラグインを使う

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

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

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

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

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

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

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

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

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

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

Cocoonの使い方

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

  • WordPressの初期設定
  • Cocoonのダウンロードとインストール
  • Cocoonの初期設定
  • 記事の書き方
  • カテゴリー・タグ・固定ページの作成
  • 外観・デザインの整え方
  • 収益化

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

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

上記記事でまとめています

  • 吹き出し
  • フォント・文字サイズ
  • サイドバー
  • ファビコン(サイトアイコン)
  • ヘッダー
  • グローバルナビメニュー(ヘッダーメニュー)
  • Twitterシェア時に表示する画像の設定
  • 本文の幅・サイドバーの幅
  • トップページの表示形式
  • パンくずリスト
  • 行間と段落の間隔
  • 表(テーブル)
  • 目次
  • SNSシェアボタン・フォローボタン
  • Twitterの設置・連携
  • アイキャッチ画像
  • ブログカード
  • ヘッダー周りのアピール設定
  • フッター
  • モバイル(スマホ)表示メニュー
  • ボックスメニュー
  • 見出し
  • オリジナル画像の設定

コメント