当ブログでは、Cocoonを初期状態からカスタマイズする方法(コピペ可)をまとめています。
Cocoonトップページ(フロントページ)のアイキャッチ画像(サムネイル)の角を丸める、エントリーカード全体の角を丸める、またアイキャッチ上にあるアイキャッチラベル(カテゴリーラベル)を非表示・カスタマイズする方法を紹介します。
エントリーカードのカスタマイズについて
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/entrycard-1.png)
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/entrycard-2.png)
ブログのトップページ(フロントページ)の記事一覧(エントリーカード)のカスタマイズ方法をまとめました。
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/Icon-Whale.png)
トップページ(フロントページ)のデザインは、【Cocoon設定】→【Cocoon設定】→【インデックス】で変更できるよ!
カスタマイズのCSSを追加する場所
カスタマイズでCSSコードを使用するときは、以下の場所にコードをコピペしてください。
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/Icon-Clownfish.png)
数値などは自由に変えてみてね!
【外観】→【カスタマイズ】→【追加CSS】に以下のコードを記述する。
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/add-css.png)
エントリーカードアイキャッチ画像(サムネイル)の角を丸める
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/entrycard-3.png)
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/entrycard-4.png)
エントリーカードアイキャッチ画像(サムネイル)の角を丸めるCSSは、以下の通りです。
/*エントリーカードアイキャッチ画像(サムネイル)の角を丸める*/
.card-thumb img{
border-radius: 10px; /*サムネイルの角を丸める*/
border: 1px solid #8195a2; /*サムネイルに囲い線をつける*/
}
「border-radius: 10px;」の数値を変えて、好みの丸さにしましょう。0pxにした場合は角がとんがります。
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/entrycard-12.png)
【注意!】人気記事一覧などのサムネイルの角も丸くなります。
エントリーカードホバー時の背景の色を変える
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/entrycard-5-1.png)
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/entrycard-6.png)
エントリーカードホバー時の背景の色を変えるCSSは、以下の通りです。
/*エントリーカードホバー時の背景の色を変える*/
.entry-card-wrap:hover{
background-color: #8195a2; /*背景の色*/
}
ホバー時のみでなく、通常状態からエントリーカードの背景色を変えたいときは「.entry-card-wrap」に「background-color」のCSSを記載します。
エントリーカード全体の角を丸める
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/entrycard-7.png)
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/entrycard-8.png)
エントリーカード全体の角を丸めるCSSは、以下の通りです。
/*エントリーカード全体の角を丸める*/
.entry-card-wrap{
border-radius: 10px; /*エントリーカード全体の角を丸める*/
}
見にくい色になってしまいましたが、ホバー時に変わる色の部分の角が丸くなっています。
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/Icon-Frog.png)
ホバーのときだけ角を丸めたいときは「.entry-card-wrap」じゃなくて、「.entry-card-wrap:hover」でOK?
.entry-card-wrap:hover{
border-radius: 10px; /*アイキャッチホバー時の角を丸める*/
}
上記のコードで角は丸まりますが、ホバー時に一瞬角の形が変わるモーションが入るので、ホバー前のデフォルト状態から角を丸めておく「.entry-card-wrap」を使うのがおすすめです。
アイキャッチラベル(カテゴリーラベル)を非表示にする
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/entrycard-10.png)
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/entrycard-11.png)
メインカラムの背景色を透明にする方法は、Cocoonフォーラムに解決策がありました。
Cocoonフォーラム:エントリーカードのアイキャッチ画像、カテゴリーの表示/非表示について
/*アイキャッチラベルを消す*/
.cat-label {
display: none;
}
アイキャッチラベル(カテゴリーラベル)をカスタマイズする
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/entrycard-9.png)
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/entrycard-10.png)
アイキャッチラベル(カテゴリーラベル)をカスタマイズするCSSは、以下の通りです。
/*アイキャッチラベル*/
.cat-label{
background-color: #8195a2; /*ラベルの色*/
transform:rotate(-8deg); /*ラベルの角度*/
border: none; /*ラベルに囲い線をつけない*/
}
角を丸くしたいときは「border-radius: ○px;」のCSSを追加すればOKです。
まとめ:Cocoonトップページ(フロントページ)のエントリーカードとカテゴリラベルをカスタマイズしてみよう!
ブログの印象が決まるトップページは重要ですよね。ぜひ色々カスタマイズしてみましょう。