【Cocoon】インデックスカード(記事一覧)のカスタマイズ

Cocoonインデックスカードカスタマイズカスタマイズ
この記事は約2分で読めます。

Cocoonのインデックスカード(記事を一覧表示した時のデザイン)のカスタマイズ方法を解説します。

こんな見た目になります

Cocoonインデックスカードカスタマイズ

全体的に色を変更しているのと、ハバーした時にふわっと浮き上がるアニメーションをつけました。

Cocoonのインデックスカードをカスタマイズする手順

コピペだけの簡単なカスタマイズです。

下のカスタマイズ用CSSコードを「追加CSS」にコピペして、カラーコードの部分を好きな色に置き換えます。

追加CSS
追加CSS

また、カスタマイズコードは項目ごとに細かく分けて記載しているので、必要に合わせてピックアップして使ってみてください。

カスタマイズ用コード

ハバー時にふわっと浮き上がるアニメーション

/* Hover Animation */
.a-wrap{
	color: inherit;
}
.a-wrap:hover{
	background:none;
	transform: translateY(-4px);
    box-shadow: 0 10px 20px -5px rgba(0,0,0,.2);
	color: inherit;
}

カテゴリーラベルの色を変更

/* Category label */
.eye-catch .cat-label,.cat-label{
	background-color: #7fbfff;
    border-radius: 50px;
    padding: 0 10px;
	border: none;
}
.cat-link{
	background-color: #7fbfff;
}

タイトルの色を変更

/* エントリーカードタイトル */
.entry-card-title, .related-entry-card-title {
	color: #ef97e8; /* 好きな色 */
}

コメント

  1. […] 【Cocoon】インデックスカードのカスタマイズalice.yuhostyles.com2021.01.30 […]

タイトルとURLをコピーしました