【Cocoon】カルーセルを使って記事をスライドして表示させる方法

Cocoonを使って記事をスライドさせて表示させたいけど、どうすれば表示できるの？

[カルーセル]の設定をすると簡単に表示できます。

この記事ではCocoonを使って記事をスライドさせて表示させる方法を紹介していきます。

カルーセルとは

カルーセルとは記事をスライド式で表示させるものです。

↓画像でいう赤枠部分です

左右にある[<][>]をクリックすると、記事がスライドします。

ここからはトップ画面に表示させることを例に紹介していきます。

表示する手順は以下の通りです。

1.[Cocoon設定]から[カルーセル]をクリック

2.[カルーセルの表示]で表示したいページを選択します

3.[表示内容]で表示したい内容のチェックボックスにチェックをつけます

ここから画像付きでカルーセルの表示方法を紹介していきます。

1.[Cocoon設定]から[カルーセル]をクリック

2.[カルーセルの表示]で表示したいページを選択します

今回はトップ画面で表示したいので[カルーセルの表示]でフロントページに表示を選択します

3.[表示内容]で表示したい内容のチェックボックスにチェックをつけます

特定のカテゴリーやタグだけ表示したい場合は[表示内容]にチェックをします。

カルーセルの表示ができたところで次はカルーセルの設定項目について解説していきます。

↓カルーセルの設定項目です

カルーセル内のカードの並び替えができます。

カルーセルに表示するカードの数を設定できます。

最大表示数12に設定した場合

1度に6カード表示 / 2スライド　

↑最大表示数はこのような感じになります。

カルーセル内のカードに枠線をつけることができます。

枠線ありと枠線なしの見た目の違いは以下の通りです。

カルーセル左右にある[<][>]をクリックしなくても記事がスライドするようになります。

自動的にスライドする時間を設定できます。

5秒に設定すると、5秒おきにスライドするようになります。

トップ画面を例にカルーセルを使って記事をスライドして表示させる方法を紹介していきました。

トップ画面以外でも表示したいときは[カルーセルの表示]を設定するとできるので、試してみてください。

これからブログを始める人に

ブログを始めるときのレンタルサーバーはConoHa WINGがおすすめです。

このブログではConoHa WINGを利用していますが、使い勝手もよく、使いやすいサーバーです。

1番安い登録では月額643円(ベーシック/36カ月)で利用できます。

ConoHa WINGでブログを始めましょう。