>> リニューアルや機能停止など 当サイトのお知らせはこちら →
PR

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

Cocoon・カスタマイズ
この記事は約3分で読めます。
     

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

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

 

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

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

 


 

カスタマイズサンプル

Before

[C] Facebookボックス

After

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

[C] Facebookボックス:カスタマイズサンプル

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

[C] Facebookボックス:カスタマイズサンプル

  • ボックスデザイン変更

[C] Facebookボックス:カスタマイズサンプル

 

カスタマイズ方法

簡単なCSS追記のみです。

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

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

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

 

ボックスデザイン

パターン1

[C] Facebookボックス:カスタマイズサンプル

背景色のみ変える

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

 

角を丸める

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

 

パターン2

[C] Facebookボックス:カスタマイズサンプル

背景をグラデーションに

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

 

 

パターン3

[C] Facebookボックス:カスタマイズサンプル

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

 

 

メッセージの非表示

[C] Facebookボックス

 

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

メッセージ

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

サブメッセージ

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

何かしら入力すれば、上記は表示されず入力した内容が表示されます。

 

 

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

[C] Facebookボックス:カスタマイズサンプル

 

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

[C] Facebookボックス:カスタマイズサンプル

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

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

 

 

カラーの変更

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

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

 

 

コメント

  1. たけぽん より:

    いつもカスタマイズの記事を拝見させて頂いています。
    初心者でとても助かっています。
    この記事のデザインもさっそく導入させて頂きました。
    ありがとうございます。
    ところで、[C] Facebookボックスの中のFacebookボタンとTwitterボタンの色を変更したい場合は、どのようにcssを書いたら良いのでしょうか?
    もしご存知でしたら教えて頂けますでしょうか?
    よろしくお願い致します。

    • 綾糸 より:

      たけぽんさん、はじめまして。

      [C] Facebookボックスウィジェットで利用しているフォローボタンはFacebook、Twitterそれぞれの公式で用意されているものを利用しているので、変更できないかと思います。

      ボタンの色を変えたいのであれば [C]SNSフォローボタンウィジェットなら可能ですが・・・。
      [C]SNSフォローボタンを使ったカスタマイズは、以下の記事をご覧ください。

      コピペで!CocoonのSNSフォローボタンデザインカスタマイズ

      • たけぽん より:

        綾糸さん、ご親切にありがとうございます。
        「Facebook、Twitterそれぞれの公式で用意されているものを利用している」←そうだったんですね。
        できないと分かれば、納得です。
        おかげさまでモヤモヤが消えました。
        これからも為になる記事を期待しています。
        本当にありがとうございました。

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