【Cocoon】SNSシェア・フォローボタンを丸くするカスタマイズ

1. WordPress
2021/09/21

完成イメージ

Before

完成イメージ（Before）

After

完成イメージ（After）

トップシェアボタンとボトムシェア・フォローボタン、2箇所のカスタマイズです。

丸くすることでより可愛いデザインに
スペースを設けることで記事を圧迫しない
透明度を上げて落ち着いた色合いに

デフォルトのSNSボタンだと、色合い的にメインコンテンツよりも目立ってしまうことが多いです。

そこで透明度を下げ落ち着いた色にし記事に馴染ませることにより、よりさりげなくシェア・フォローを促すことができます。

ちなみにこのボタンのデザインは、私自身が作成したスキン「イノセンス」と同一のものです。とりあえずSNSシェアボタン・フォローボタンだけカスタマイズしたいという場合は本記事がうってつけですが、他の箇所のデザインも併せて変更したい場合はスキンを適用する方が手っ取り早いです。

【Cocoon】居心地の良いスキン「イノセンス」を作成しました2021/02/27

※ 本記事でご紹介するのは、シェア数を表示しない前提でのカスタマイズになります。シェア数を表示する設定にするとデザインが崩れてしまう可能性があるのでご注意ください。

カスタマイズ方法

0. バックアップを忘れずに

早速カスタマイズしていきたいところですが、万が一の事態に備えて事前にバックアップを取っておくことをおすすめします。

その方法について詳しくは下記記事にまとめているでぜひ参考にしてください。

WordPressでCSSのバックアップをとる方法【カスタマイズ時に必須】2020/10/30

1. CSSを追記

/************************************
** トップシェアボタン
************************************/
.sns-share.ss-high-and-low-lc a .social-icon {
  font-size: 22px;
}

/************************************
** ボトムシェアボタン
************************************/
@media screen and (min-width: 481px) {
  .sns-share,
  .sns-follow {
    width: 70%;
    margin-right: auto;
    margin-left: auto;
  }
}

.sns-share-buttons {
  justify-content: space-evenly;
}

.sns-share-buttons a {
  width: 50px !important;
  height: 50px;
  font-size: 1.25em;
  border-radius: 50%;
  opacity: 0.6;
}

@media screen and (max-width: 834px) {
  .ss-bottom .sns-share-buttons a {
    font-size: 1.3em;
  }
}

.sns-share-buttons a .button-caption {
  display: none !important;
}

.sns-share-message,
.sns-follow-message {
  position: relative;
  margin-bottom: 30px;
  color: #bbb;
}

.sns-share-message::before,
.sns-follow-message::before {
  position: absolute;
  bottom: -5px;
  left: 50%;
  display: inline-block;
  width: 30px;
  height: 2px;
  content: "";
  background-color: #c0c0c0;
  border-radius: 3px;
  transform: translateX(-50%);
}

/************************************
** ボトムフォローボタン
************************************/
.sns-follow-buttons {
  justify-content: space-evenly;
}

.sns-follow-buttons a {
  width: 50px;
  height: 50px;
  font-size: 1.7em;
  border-radius: 50%;
  opacity: 0.6;
}

@media screen and (max-width: 834px) {
  .ss-bottom .sns-follow-buttons a {
    font-size: 1.3em;
  }
}

上記コードを、テーマで読み込んでいるCSSファイルにコピペします。

CSSを編集する方法について、詳しくは下記記事にまとめているでぜひ参考にしてください。

【初心者向け】WordPressでCSSを編集・追加する方法2020/10/24 【WordPress】CSSの変更が反映されない場合の原因・対処法2022/05/13

以上でカスタマイズは完了です 🎉

他のCocoonカスタマイズも全て下記記事にまとめているので、ぜひ参考にしてください。 Cocoonのおしゃれなカスタマイズ全集【初心者もコピペで簡単】2021/01/19