Cocoon(コクーン)のSNSボタンをスッキリさせるCSSカスタマイズ

Cocoonではシェアボタンが大きめで、特にモバイルの時ファーストビューを占領してしまいます。それによる離脱率低下を避けるため、文章下のシェアボタンのサイズを小さくします。

目次

カスタマイズ前

カスタマイズ後

以下のようになり、特にモバイルで見た時の最初の文章までの距離が短くなります。

カスタマイズの方法

Cocoonの設定からSNSの形状設定をする

Cocoon設定からSNSシェアボタンをブランドカラー、6列、キャプションロゴ上下、シェア数の表示のチェックボックスにしてください。また、設定は本文前と後にあるから両方設定しないといけません。

シェアボタンの表示切替は6種類にしないと隙間が空いたり、段ずれしてしまうので注意!!

CSSを貼り付ける

カスタマイズから追加CSSに貼り付けたらOKです。貼り付けるCSSは好みの色に合わせて選んでください。

カスタマイズ用のCSSコード書

そのままのカラー

/* SNSボタン開始 */
#main .button-caption{
display: none;
}
#main .sns-share.ss-top.ss-col-6 a, .sns-share.ss-bottom.ss-col-6 a {
width: 16%;
}
#main .sns-share.ss-high-and-low-lc a, .sns-share.ss-high-and-low-cl a {
max-height: 22px;
border-radius: 0px;
}
#main .sns-share.ss-high-and-low-lc a .social-icon, .sns-share.ss-high-and-low-cl a .social-icon, .sns-share.ss-high-and-low-lc a .button-caption, .sns-share.ss-high-and-low-cl a .button-caption {
font-size: 12px;
}
/* SNSボタン終了 */

ピンク

CSSコード/* SNSボタン開始 */
#main .button-caption{
display: none;
}
#main .sns-share.ss-top.ss-col-6 a, .sns-share.ss-bottom.ss-col-6 a {
width: 16%;
background-color:#FCE4EC;
}
#main .sns-share.ss-high-and-low-lc a, .sns-share.ss-high-and-low-cl a {
max-height: 22px;
border-radius: 0px;
}
#main .sns-share.ss-high-and-low-lc a .social-icon, .sns-share.ss-high-and-low-cl a .social-icon, .sns-share.ss-high-and-low-lc a .button-caption, .sns-share.ss-high-and-low-cl a .button-caption {
font-size: 12px;
}
/* SNSボタン終了 */

ブルー

/* SNSボタン開始 */
#main .button-caption{
display: none;
}
#main .sns-share.ss-top.ss-col-6 a, .sns-share.ss-bottom.ss-col-6 a {
width: 16%;
background-color:#00B0FF;
}
#main .sns-share.ss-high-and-low-lc a, .sns-share.ss-high-and-low-cl a {
max-height: 22px;
border-radius: 0px;
}
#main .sns-share.ss-high-and-low-lc a .social-icon, .sns-share.ss-high-and-low-cl a .social-icon, .sns-share.ss-high-and-low-lc a .button-caption, .sns-share.ss-high-and-low-cl a .button-caption {
font-size: 12px;
}
/* SNSボタン終了 */

グリーン

/* SNSボタン開始 */
#main .button-caption{
display: none;
}
#main .sns-share.ss-top.ss-col-6 a, .sns-share.ss-bottom.ss-col-6 a {
width: 16%;
background-color:#4CAF50;
}
#main .sns-share.ss-high-and-low-lc a, .sns-share.ss-high-and-low-cl a {
max-height: 22px;
border-radius: 0px;
}
#main .sns-share.ss-high-and-low-lc a .social-icon, .sns-share.ss-high-and-low-cl a .social-icon, .sns-share.ss-high-and-low-lc a .button-caption, .sns-share.ss-high-and-low-cl a .button-caption {
font-size: 12px;
}
/* SNSボタン終了 */

ブラウン

/* SNSボタン開始 */
#main .button-caption{
display: none;
}
#main .sns-share.ss-top.ss-col-6 a, .sns-share.ss-bottom.ss-col-6 a {
width: 16%;
background-color:#795548;
}
#main .sns-share.ss-high-and-low-lc a, .sns-share.ss-high-and-low-cl a {
max-height: 22px;
border-radius: 0px;
}
#main .sns-share.ss-high-and-low-lc a .social-icon, .sns-share.ss-high-and-low-cl a .social-icon, .sns-share.ss-high-and-low-lc a .button-caption, .sns-share.ss-high-and-low-cl a .button-caption {
font-size: 12px;
}
/* SNSボタン終了 */

パープル

/* SNSボタン開始 */
#main .button-caption{
display: none;
}
#main .sns-share.ss-top.ss-col-6 a, .sns-share.ss-bottom.ss-col-6 a {
width: 16%;
background-color:#673AB7;
}
#main .sns-share.ss-high-and-low-lc a, .sns-share.ss-high-and-low-cl a {
max-height: 22px;
border-radius: 0px;
}
#main .sns-share.ss-high-and-low-lc a .social-icon, .sns-share.ss-high-and-low-cl a .social-icon, .sns-share.ss-high-and-low-lc a .button-caption, .sns-share.ss-high-and-low-cl a .button-caption {
font-size: 12px;
}
/* SNSボタン終了 */

イエロー

/* SNSボタン開始 */
#main .button-caption{
display: none;
}
#main .sns-share.ss-top.ss-col-6 a, .sns-share.ss-bottom.ss-col-6 a {
width: 16%;
background-color:#FFF59D;
}
#main .sns-share.ss-high-and-low-lc a, .sns-share.ss-high-and-low-cl a {
max-height: 22px;
border-radius: 0px;
}
#main .sns-share.ss-high-and-low-lc a .social-icon, .sns-share.ss-high-and-low-cl a .social-icon, .sns-share.ss-high-and-low-lc a .button-caption, .sns-share.ss-high-and-low-cl a .button-caption {
font-size: 12px;
}
/* SNSボタン終了 */

ブラック

/* SNSボタン開始 */
#main .button-caption{
display: none;
}
#main .sns-share.ss-top.ss-col-6 a, .sns-share.ss-bottom.ss-col-6 a {
width: 16%;
background-color:#424242;
}
#main .sns-share.ss-high-and-low-lc a, .sns-share.ss-high-and-low-cl a {
max-height: 22px;
border-radius: 0px;
}
#main .sns-share.ss-high-and-low-lc a .social-icon, .sns-share.ss-high-and-low-cl a .social-icon, .sns-share.ss-high-and-low-lc a .button-caption, .sns-share.ss-high-and-low-cl a .button-caption {
font-size: 12px;
}
/* SNSボタン終了 */

コメント

コメントする

目次
閉じる