Cocoon記事一覧ページのカードをカスタマイズ

Cocoonのトップページやアーカイブ、カテゴリーページでの記事一覧カードを以下のサンプルのようにカスタマイズする方法です。

カスタマイズサンプル

• アイキャッチ画像の角を丸める
• 枠の角を丸める
• カード枠をアンダーラインのみにする
• 記事タイトルデザインを変える

大きなカードでのサンプル

縦型カードでのサンプル

タイトルデザイン変更サンプル

前提

今回のカスタマイズの前提では、Cocoon設定を以下のように設定して下さい。

Cocoon設定→インデックスタブ

カスタマイズ方法

簡単なCSS追記のみです。

CSS追記は以下のいずれかから行って下さい。

外観→カスタマイズ→追加CSS

外観→テーマエディター→style.css

アイキャッチ画像の角を丸める

Before

After

CSS

以下のCSSを追記します。

/*記事一覧アイキャッチ画像の角丸め*/.ect-entry-card img{border-radius: 10px;}

カード枠の変更

カードの枠は、Cocoon設定でも表示できます。

Before

デフォルトは以下のように1pxの四角い枠です。

After

パターンA（角丸囲み）

.e-card{border: 1px solid #ccc; /*枠線の太さ、形状、色*/border-radius: 10px;padding: 8px;} /*角の丸み*/

※枠線の太さ、形状、色や、角の丸みはお好みに変更して下さい。

borderの設定方法は以下にまとめていますのでご参考に。

パターンB（アンダーライン）

.e-card{border-bottom: 2px solid #839b5c;}

記事タイトルデザイン

記事タイトルのクラス名は「.entry-card-content h2」でデザイン編集可能ですが、スマホでの見え方を確認しながら行って下さい。

上図のカスタマイズはスマホでアウトでした・・。

.entry-card-content h2{
 /*任意のデザイン*/}

カラーの変更

お好きなカラー設定には以下もご利用下さい。

マカロンビビッドパステル伝統色和色セーフ色名赤桃青紫黄橙緑茶黒

注意点

カード枠の設定を「e-card」というクラス名で行いますが、こちらのクラス名は、カード型で表示するCocoon独自のウィジェットにも使われている為、以下のウィジェットをお使いの場合は対応をお願いします。

(C)新着記事の対応

Cocoon独自の「新着記事ウィジェット」も同様にカスタマイズされます。

/*新着記事ウィジェットの枠を消す*/.new-entry-card{border:none;}

(C)人気記事の対応

Cocoon独自の「人気記事ウィジェット」も同様にカスタマイズされます。