Cocoonカルーセル設定方法を初心者向けに解説

当サイトはアフィリエイト広告を利用しています

carousel

画像が横にスライドして、とてもおしゃれなサイトを

私も作りたいのだけど・・・

初心者だし、難しそう~

 

 

そんなあなたのお悩みを解決します。

こちらの記事内容は、

  • カルーセルとは
  • カルーセル設定方法

 

カルーセルとは?

カルーセル(carousel)とは、メリーゴーランドや、ベルトコンベアーなど、グルグルと回る物を言います。WEBデザインでは、横に自動でスクロールする画像の一覧をカルーセルと呼んでいます。

カルーセルは、目立つ位置に配置し、サイト訪問してくれた読者さん(ユーザー)の注目を集める効果ありますが、一方目障りと感じてしまう方もいらっしゃるので、表示場所を考慮してください。

カルーセル設定方法

Cocconでは既にカルーセルの設定が標準装備されていますので、とても簡単ですよ。

「ダッシュボード」→「Cocoon設定」→「カルーセル」をクリック

cocoon carousel

画面を半分ずつ解説していきますね。

カルーセルの表示設定

carousel 1

カルーセルの表示:表示したいページを選択します。デフォルトでは、印がついていません。

私はフロントページのみの設定としました。 各投稿ページに設定しても良いのですが、全てのページに表示すると、かなり目障りになるので、(個人的見解です)フロントページのみにしてあります。お好みで設定可能です。

スマートフォンで表示:チェックを入れ選択します。(表示したくない場合は、そのままにしてください)

表示内容:親カテゴリーにチェックマークを入れます。(子カテゴリ―も自動で表示されます)
表示したい1つのカテゴリ―のみを選ぶことも出来ます。

表示方法の設定

carousel 2

カルーセルの並び替え:ランダム・投稿日・更新日順の中から選択

最大表示数:12~120の間から選択 デフォルトは18

枠線の表示:画像に枠線を付けるか否かを選択

オートプレイ:自動で画像をスライドさせるか否かを選択

オートプレイインターバル:カルーセルを自動プレイさせる場合の間隔を設定

設定が終了したら、「変更をまとめて保存」を忘れずにクリックします。

まとめ

WordPress 「Cocoon」を使っている私達は、とてもラッキーだと思っています。

カルーセルを実装するとなると、HTML/CSS/jQueryを駆使して自前で作成する!? または、新たにプラグインを導入する事になります。

HTML/CSS/jQueryを駆使して自前で作成なんてとんでもない!チャレンジする前に諦めます

プラグインにしても、どこまで簡単操作になっているのか?

そのどちらもする必要がなく、ボタンを押すだけでカルーセルの設定が可能な「Cocoon」を作って下さった

「わいひらさん」に心から感謝ですね!

カルーセルを上手に使って、読者さん(ユーザー)にあなたのサイトをアピールしてくださいね。

応援しています。

最後までお読みいただき、ありがとうございました。

カルーセルよりも画像を固定させて表示したい方は、こちらの記事をおすすめします。
↓ ↓ ↓ ↓ ↓
Cocoonにおススメカードを簡単に設定する方法

このブログ記事のカルーセルで何かご不明な点、難しかった点がありましたら、どんな些細な事でも
お問いあわせからご一報ください。