【Cocoon】エントリーカードとカテゴリーラベルをカスタマイズする方法

ヒビラボでは、Cocoonをカスタマイズする方法やCSSコード（コピペ可）をまとめています。

Cocoonトップページ（フロントページ）のアイキャッチ画像（サムネイル）の角を丸める、エントリーカード全体の角を丸める、またアイキャッチ上にあるアイキャッチラベル（カテゴリーラベル）を非表示・カスタマイズする方法を紹介します。

この記事でわかること

エントリーカードのカスタマイズについて

ブログのトップページ（フロントページ）の記事一覧（エントリーカード）のカスタマイズ方法をまとめました。

トップページ（フロントページ）のデザインは、【Cocoon設定】→【Cocoon設定】→【インデックス】で変更できるよ！

カスタマイズでCSSコードを使用するときは、以下の場所にコードをコピペしてください。

数値などは自由に変えてみてね！

CSSを追加する場所

【外観】→【カスタマイズ】→【追加CSS】に以下のコードを記述する。

エントリーカードアイキャッチ画像（サムネイル）の角を丸めるCSSは、以下の通りです。

/*エントリーカードアイキャッチ画像（サムネイル）の角を丸める*/
.card-thumb img{
  border-radius: 10px; /*サムネイルの角を丸める*/
  border: 1px solid #8195a2; /*サムネイルに囲い線をつける*/
}

「border-radius: 10px;」の数値を変えて、好みの丸さにしましょう。0pxにした場合は角がとんがります。

【注意！】人気記事一覧などのサムネイルの角も丸くなります。

エントリーカードホバー時の背景の色を変えるCSSは、以下の通りです。

/*エントリーカードホバー時の背景の色を変える*/
.entry-card-wrap:hover{
  background-color: #8195a2; /*背景の色*/
}

ホバー時のみでなく、通常状態からエントリーカードの背景色を変えたいときは「.entry-card-wrap」に「background-color」のCSSを記載します。

エントリーカード全体の角を丸めるCSSは、以下の通りです。

/*エントリーカード全体の角を丸める*/
.entry-card-wrap{
  border-radius: 10px; /*エントリーカード全体の角を丸める*/
}

見にくい色になってしまいましたが、ホバー時に変わる色の部分の角が丸くなっています。

ホバーのときだけ角を丸めたいときは「.entry-card-wrap」じゃなくて、「.entry-card-wrap:hover」でOK？

.entry-card-wrap:hover{
  border-radius: 10px; /*アイキャッチホバー時の角を丸める*/
}

上記のコードで角は丸まりますが、ホバー時に一瞬角の形が変わるモーションが入るので、ホバー前のデフォルト状態から角を丸めておく「.entry-card-wrap」を使うのがおすすめです。

メインカラムの背景色を透明にする方法は、Cocoonフォーラムに解決策がありました。

/*アイキャッチラベルを消す*/
.cat-label {
  display: none;　
}

アイキャッチラベル（カテゴリーラベル）をカスタマイズするCSSは、以下の通りです。

/*アイキャッチラベル*/
.cat-label{
  background-color: #8195a2; /*ラベルの色*/
  transform:rotate(-8deg); /*ラベルの角度*/
  border: none; /*ラベルに囲い線をつけない*/
}

角を丸くしたいときは「border-radius: ○px;」のCSSを追加すればOKです。

ブログの印象が決まるトップページは重要ですよね。ぜひ色々カスタマイズしてみましょう。