コピペで簡単！Cocoonのブログカードをカスタマイズ

Cocoon・カスタマイズ

2020.05.192024.01.25

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

Cocoonのブログカードをカスタマイズしてみます。

Cocoonにはブログカード用の装飾コード（囲みブログカードラベル）もたくさんありますが、基本的な枠のデザインカスタマイズになります。

囲みラベルを使用しているものも、使用しないものも同様のデザインになります。

初期表示サンプル
カスタマイズ方法
CSSを記述
- サンプル
カラーの変更

初期表示サンプル

ホバー時

カスタマイズ方法

簡単なCSS追記のみです。

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

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

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

CSSを記述

以下のCSSから 不要な部分は削除して ご利用下さい。

サンプル

ホバー時

/************************
/ ブログカード
/************************/
.blogcard {border-color: #ccc;} /*枠線の色*/
.blogcard-wrap:hover { /*ホバー時*/
box-shadow: 0 4px 20px #a5a5a5; /*影の色*/
-webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
}
/*タイトル*/
.blogcard-title{
font-size:16px; /*文字サイズ*/
border-bottom: 2px solid #616B07; /*タイトル下にアンダーライン*/
}
/*記事抜粋文*/
.blogcard-snippet{display:none;} /*表示しない*/

/* 【合わせて読みたい】表示 */
.blogcard::before {
content: "合わせて読みたい"; /*表示する文字*/
position: absolute;
width: 120px; /*幅*/
height: 22px; /*高さ*/
text-align: center; /*文字を中央に*/
color: #fff; /*文字色*/
font-size: 13px; /*文字サイズ*/
background: #616B07; /*背景色*/
font-weight: bolder; /*太字*/
bottom: 0;
right: 0;
}