コピペで！CocoonのFacebookボックスのデザインカスタマイズ

Cocoonの便利なオリジナルウィジェット「[C] Facebookボックス」の色をサイトに合わせてカスタマイズする方法についてです。

簡単なCSSの追記のみなので、一瞬で終わります。

 

Facebookボックス　という名前ですが、

TwitterフォローボタンとLINEの友達追加ボタンも表示出来ます。

 

カスタマイズサンプル

Before

After

• ボックスカラーを変える
• 角を丸める

• ボックス背景をグラデーションに
• 文字色を変える

• ボックスデザイン変更

 

カスタマイズ方法

簡単なCSS追記のみです。

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

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

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

 

ボックスデザイン

パターン１

背景色のみ変える

.fb-like-box{
background-color:#839b5c; /*ボックス背景色*/
}

 

角を丸める

.fb-like-box{
background-color:#839b5c;
border-radius: 10px; /*ボックス自体の角を丸める*/
}
.fb-like-box img{
border-radius: 10px; /*アイキャッチ画像の角を丸める*/
}

 

パターン２

背景をグラデーションに

.fb-like-box{
background: radial-gradient(#edcccc, #eb8686);
}

 

 

パターン３

.fb-like-box{
background: #95ccff; /*背景色*/
box-shadow: 0px 0px 0px 5px #95ccff;
border: dashed 2px #fff; /*破線*/
}
.fb-like-sub-message{
color:#333;
}

 

 

メッセージの非表示

 

「メッセージ」と「サブメッセージ」は何も入力しなくてもデフォルトで以下のように表示されます。

メッセージ

「この記事が気に入ったらいいね！しよう」

サブメッセージ

「最新情報をお届けします。」

 

 

サブメッセージ部分を非表示にしたい場合

 

.fb-like-sub-message{
display:none;
}

メッセージ（この記事が気に入ったら・・）も表示しない場合は

fb-like-message　で同様に設定すればOKです。

 

 

カラーの変更

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

マカロンビビッドパステル伝統色和色セーフ色名赤桃青紫黄橙緑茶黒