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;
}