SEO・サイトの質問掲示板 >

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

Wordpress(ワードプレス)

このカスタマイズのポイント

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

Affinger5 WINGの基本情報

所要時間5分
利用プラグインなし
効果ファーストビューまでの距離改善

難易度

Lv.1プラグインのみ
Lv2CSSの操作が必要
Lv3サーバーでの操作が必要
Lv4FTPの操作が必要
Lv5それ以上の難易度全て

 

カスタマイズ前

 

カスタマイズ後

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

 

カスタマイズの方法

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ボタン終了 */

 

花の楽園(ピンク)

/* 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ボタン終了 */

 

これでおしまいだよ!役に立ったらツイート、はてなブックマークしてくれると嬉しいな。

0

コメント

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