Cocoonの使い方やカスタマイズとオリジナルスキン

コピペで簡単!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;
}

 

カラーの変更

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

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

 

 

コメント

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