CocoonのFacebookウィジェットの使い方とプチカスタマイズ

Facebookウィジェットとは、記事下などに表示して「いいね!」ボタンを表示できるCocoonのオリジナルウィジェットで以下の2種類あります。

  • [C]Facebookバルーン
  • [C]Facebookボックス

 

これらの設定方法カスタマイズ方法についてです。


 

カスタマイズ方法

簡単なCSS追記のみです。

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

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

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

Facebookバルーンウィジェット

設定

ウィジェット一覧から「[C]Facebookバルーンウィジェット」を好きな場所に追加します。

基本的に設定は不要!
タイトル

入力しても表示されないので、何も入力しなくてOKです。

メッセージ

デフォルトは上図の通り。変更したい場合を除き、そのままでOKです。

FacebookページURL

プロフィールページに設定されるものになるので未入力でOKです。

 

プロフィール設定については以下です。

 

カスタマイズサンプル

Before

 

After

  • アイキャッチの角を丸める
  • 文字サイズを変更する

 

CSS

/************************************
** Facebookバルーンウィジェット
************************************/.fb-like-balloon-thumb img{
border-radius:10px;
}
.fb-like-balloon-body{font-size:14px;}

 

 

Facebookボックスウィジェット

設定

ウィジェット一覧から「[C]Facebookボックスウィジェット」を好きな場所に追加します。

 

 

基本的に設定は不要!
タイトル

入力しても表示されないので、何も入力しなくてOKです。

メッセージ

デフォルトは上図の通り。変更したい場合を除き、そのままでOKです。

サブメッセージ

デフォルトは上図の通り。変更したい場合を除き、そのままでOKです。

FacebookページURL

プロフィールページに設定されるものになるので未入力でOKです。

Twitter ID・LINE ID

プロフィールページに設定されるものになるので未入力でOKです。

 

カスタマイズサンプル

Before

 

After

  • 枠を変える(全体で1枠)
  • アイキャッチの角を丸める
  • 文字サイズ・装飾を変更する

 

 

CSS

/************************************
** Facebookボックスウィジェット
************************************/.fb-like-box{
background: transparent;
display: inline-block;
height: 250px;
width: 100%;
}
.fb-like-thumb{
max-width: 100%;
height: 0;
}
.fb-like-thumb img{
border-radius:10px;
}
.fb-like-box .fb-like-thumb > *{
min-width: 100%;
height: 250px;
object-fit: cover;
}
.fb-like-content::after{
content: '';
width: 100%;
height: 250px;
position: absolute;
z-index: -1;
background: #555;
opacity: 0.6;
border-radius:10px;
}
.fb-like-content{
height: 250px;
position: relative;
z-index: 2;
}
.fb-like-buttons{
margin: 10px 0;
}
.fb-like-message{
color: #fff;
font-size: 1em;
font-weight: bold;
text-shadow: 1px 2px 2px #ccc;
}
.fb-like-sub-message{
color: #fff;
font-size: 0.9em;
text-shadow: 0px 0px 3px #ccc;
}

 

カスタマイズサンプル

上図のようなカスタマイズは以下をご覧ください。

コピペで!CocoonのFacebookボックスのデザインカスタマイズ
Cocoonの便利なオリジナルウィジェット「 Facebookボックス」の色をサイトに合わせてカスタマイズする方法についてです。 簡単なCSSの追記のみなので、一瞬で終わります。 Facebookボックス という名前ですが、 Twitter...

 

カラーの変更

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

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

 

 

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