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

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

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

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

 


 

初期表示サンプル

ホバー時

 

カスタマイズ方法

簡単な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;
}

 

カラーの変更

お好きなカラー設定には以下もご利用下さい。

マカロンビビッドパステル伝統色和色セーフ色名

 

 

綾糸: 綾糸 主婦 1990年代、汎用機時代のエンジニア 趣味で長くやっていたweb制作は、未だにエディタでの手コーティング 現在は自宅でゆるりとweb制作やライターをしています