Cocoonの記事一覧エントリーカードのデザインカスタマイズ

Cocoon・カスタマイズ

2020.03.032024.01.25

この記事は約2分で読めます。

Cocoonの記事一覧エントリーカードをカスタマイズしてみます。

カスタマイズ方法
Before
カスタマイズ

カスタマイズ方法

簡単なCSS追記のみです。

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

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

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

Before

カスタマイズ

画像の角を丸める

CSS

.ect-entry-card img{border-radius:8px;}

オンマウスで画像を傾ける

CSS

/*オンマウスで傾ける*/
.ect-entry-card img {
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.ect-entry-card img:hover {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}

カードに色・枠を付ける

CSS

.entry-card-wrap {
background-color: #afc5dc; /*背景色*/
border: solid 1px #333; /*枠線形状・色*/
}

角を丸めるには、上記の {}内に以下を追記

border-radius:8px; /*角丸め（pxまたは%で指定）*/

オンマウスで背景色、ふわっと立体的に浮き上がる。

※画像なので動作しません

CSS

/************************
/ エントリーカード
/************************/
.entry-card-wrap:hover { /*マウスオン時*/
background-color: #afc5dc; /*背景色*/
-webkit-transform: translateY(-3px);
-ms-transform: translateY(-3px);
transform: translateY(-3px);
box-shadow: 0 0 10px #3d5069; /*影の色*/
}