【Cocoon】SNSシェアボタンのカスタマイズCSS

WordPress

記事の上下に表示される「SNSのシェアボタン」を丸くカスタマイズしたので、そのCSSを自分のメモ代わりに載せておきます。また、アイコン下の文字も表示しないように変更しました。

今回やったこと

かなり主張しているSNSアイコンを、丸く控えめにしています。

before↑ ↓after

という感じで変更を行います。可愛くなりましたよ~!

変更点を箇条書きにすると、

・アイコン下の文字を非表示に。
・ボタンを丸く。
・位置調整

Cocoonの設定

Cocoonの設定はこんな感じになっています。「シェア数の表示」はチェックを外して「なし」になっています。

CSS

/*文字を非表示に*/
.ss-top .sns-share-buttons a .button-caption,
.ss-bottom .sns-share-buttons a .button-caption {
    display: none;
}

/*ボタンの横幅*/
.sns-share.ss-top.ss-col-6 a,
.sns-share.ss-bottom.ss-col-6 a {
    width: 40px;
}

/*ボタンを丸く*/
.sns-share-buttons a {
    border-radius: 50%;
    height: 40px;
    margin: 8px;
}

/*真ん中に寄せる*/
.sns-share-buttons {
    justify-content: center;
}

/*ボタン内のSNSアイコンのサイズ設定*/
.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: 22px;
    padding-top: 0px;
}

/*コピーアイコンを位置調整*/
.sns-share.ss-high-and-low-lc a > span {
    padding-top: 0px;
}

このままコピペでもいけるかと思いますが、試すときは自己責任でよろしくお願いします。

たぶん「.ss-col-6」の部分はシェアボタンのカラム数を設定しているのだと思いますが、未検証です。

コピーアイコンだけ「padding-top」が別指定ぽいので、「/*コピーのアイコンを位置調整*/」の下の部分を加えましたが、コピーボタンを使用しないならこの部分はカットしても大丈夫かと思います。

最後に

ナイスバード
ナイスバード

デベロッパーツールで調べて試行錯誤しただけなので

CSSの内容について詳しく説明はできません。笑

しつこいようですが、コピペで試す場合はくれぐれも自己責任でお願いします。

コメント

  1. […] 【Cocoon】SNSシェアボタンのカスタマイズCSS記事の上下に表示される「SNSのシェアボタン」を丸くカスタマイズしたので、そのCSSを自分のメモ代わりに載せておきます。また、アイコン下 […]

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