【Cocoon】 カルーセル(記事スライド)を表示する方法

Cocoonには、記事を自動でスライド表示する「カルーセル」を簡単に表示することができます。

この記事では、Cocoonの「カルーセルを表示する方法」「カルーセルのカスタムCSS」についてご紹介します

 

カルーセルを表示する方法

カルーセルの表示から「表示しない」以外を選択

「Cocoon設定」→「カルーセル」を押します。

最初はカルーセルの表示が「表示しない」になっています。

カルーセルの表示から「表示しない」以外を選択するとカルーセルが表示されます。

種類とカルーセルが表示されるページの一覧です。

カルーセルの表示設定

カルーセルが表示されるようになったので、次は表示設定についてです。

表示内容

人気記事

選択した期間で集計された人気記事も含めて表示されます。

カテゴリー

チェックしたカテゴリーの記事が表示されます。

何もチェックしない場合は、カルーセルが表示されません。

スクショでは「エンジニア」「ブログ」「プログラミング」の3つのカテゴリーを選択しています。

タグ

チェックしたカテゴリーの記事が表示されます。

何もチェックしない場合は、チェックされたカテゴリーの記事が表示されます。

カルーセルの並び変え

ランダム・投稿日（降順）・更新日（降順）から選択します。

 

最大表示数

カルーセルに表示する最大表示数を設定できます。（デフォルト：18、最小：12、最大：120）

枠線の表示

チェックするとカルーセルのカード枠線がつきます。

 

オートプレイ

チェックするとカルーセルが自動的に回転します。

 

オートプレイインターバル

カルーセルが自動で回転する間隔を設定できます。

設定した秒数が経つと自動的に回転します。

 

カルーセルのCSSのカスタマイズ

カルーセルを表示するだけでもかなり見た目がオシャレなブログになりますが

もっとオシャレにしたい！という方はご覧ください。

カルーセルを下記のように立体的なカードにしてみましょう。

 

「外観」→「カスタマイズ」→「追加CSS」に下記のCSSを追記するとカルーセルのデザインが変わります。

線の太さ・色やタイトルのフォントサイズなどはお好みで変更してください。

/* カルーセル */
/* カードタイプに変更 */
.carousel-entry-card-wrap {
  box-shadow: 0 2px 4px rgb(0 0 0 / 25%);
  border-radius: 3px;
}
/* タイトルのフォントサイズ・太さを変更 */
.carousel-entry-card-title {
  font-size: 11px;
  font-weight: 600;
}