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

縦型カード3列で、影をつけて立体的なデザインにしています。
ハバー時にはふわっと浮き上がるアニメーション付きです。
カスタマイズの手順
- 「Cocoon設定」→「投稿」から「縦型カード3列」に指定
- 追加CSSにコードをコピペ
Cocoon設定の方法
まずは「Cocoon設定」→「投稿」を開きます。

下にスクロールすると「関連記事設定」という項目があるので、そこで色々設定します。
まずは「関連記事を表示する」にチェックが入っていることを確認します。

次に、表示タイプを設定します。
「縦型カード3列」にチェックを入れ、表示数を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; /* タイトルの周りの余白 */
}