Cocoonの関連記事一覧のカスタマイズ

こんな見た目になります。

縦型カード3列で、影をつけて立体的なデザインにしています。

ハバー時にはふわっと浮き上がるアニメーション付きです。

カスタマイズの手順

Cocoon設定の方法

まずは「Cocoon設定」→「投稿」を開きます。

下にスクロールすると「関連記事設定」という項目があるので、そこで色々設定します。

まずは「関連記事を表示する」にチェックが入っていることを確認します。

次に、表示タイプを設定します。

「縦型カード３列」にチェックを入れ、表示数を6件に設定し、この設定で保存します。

表示数は必ずしも6件である必要はないのですが、6件が1番きれいに見えると思います。

これでCocoonの設定は完了です。

カスタマイズ用コード

上記の設定が住んだら、以下のコードを「追加CSS」にコピペします。

/* 関連記事 */
.rect-vertical-card-3 .related-entry-card-wrap{
	width: 30%; /* カードの幅を心持ち狭く */
	padding: 0;
	border-radius: 3px; /* カードの角を丸く */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); /* 影の範囲や色 */
}
.rect-vertical-card-3 .related-entry-card-wrap:hover{ /* ハバー時の動き */
    transform: translateY(-4px);
    box-shadow: 0 10px 20px -5px rgba(0,0,0,.2);
}
.rect-vertical-card .related-entry-card-thumb img{/* 画像の上側の角を丸く */
	
    border-radius: 3px 3px 0 0; /* 画像の上側の角を丸く */
}
.rect-vertical-card .related-entry-card-title{
	margin: 0 10px; /* タイトルの周りの余白 */
}