【Cocoonカスタマイズ】「新着記事」などの大きなサムネイル表示でカードに線を入れる方法

はじめに
完成イメージ
実装手順
- ショートコードの場合
- ブロックの場合
さいごに

はじめに

「新着記事」などの通常リストでは、上下の区切り線やカードの枠線を表示する設定が可能です。

しかし、大きなサムネイル表示を選択した場合には、これらの線を表示する設定が用意されていません。

そこで、大きなサムネイル表示でも通常リストと同じように、上下の区切り線やカードの枠線を表示させるカスタマイズ方法を紹介します。

この記事では、この方法について説明します。

完成イメージ

カードの上下に区切り線を入れる

カードに枠線を表示する

実装手順

ショートコードの場合

ショートコードにclassを追加します。

[new_list type="large_thumb" class="border_partition"]

項目	class
カードの上下に区切り線を入れる	border-partition
カードに枠線を表示する	border-square

ブロックの場合

高度な設定→追加CSSクラスに各クラスを入力します。

さいごに

「新着記事」などショートコードの大きなサムネイル表示でも、デザインに合わせた自由な装飾が可能になります。
通常の設定では手が届かない細かいデザイン調整も、クラスを一つ追加するだけで解決できます。
サイトの雰囲気に合わせて「区切り線」や「枠線」を使い分け、より読みやすく美しいレイアウトを目指してみてください。