Cocoonのインデックスカード（記事を一覧表示した時のデザイン）のカスタマイズ方法を解説します。
こんな見た目になります
全体的に色を変更しているのと、ハバーした時にふわっと浮き上がるアニメーションをつけました。
Cocoonのインデックスカードをカスタマイズする手順
コピペだけの簡単なカスタマイズです。
下のカスタマイズ用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; /* 好きな色 */
}
コメント
[…] 【Cocoon】インデックスカードのカスタマイズalice.yuhostyles.com2021.01.30 […]