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

くるみ

Cocoonの記事内にあるSNSボタンさ、もう少しオシャレな感じにできない？

ということで今回は

横長四角形のCocoonのSNSボタンがあまり気に入ってない
もっとクリックされるシェア・フォローボタンにしたい

という方に向けて、SNSシェア・フォローボタンをシンプルに小さくするカスタマイズ方法をまとめました。

本記事を参考にすれば、初心者の方でもコードをコピペするだけでおしゃれなカスタマイズを再現することができます。

お品書き

SNSボタンの完成イメージ
- トップシェアボタン
- ボトムシェア・フォローボタン
CocoonのSNSシェア・フォローボタンのカスタマイズ方法
- バックアップは忘れずにしておこう
- CSSを追加する
CSSの変更が反映されない場合の対処法
- キャッシュ系プラグインを疑う
- プラウザのキャッシュを削除
まとめ

SNSボタンの完成イメージ

トップシェアボタン

before

after

ボトムシェア・フォローボタン

before

after

調整した点は以下の通りです。

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

デフォルトのSNSボタンだと色合い的に目がチカチカしてしまい、どうしてもメインコンテンツの邪魔をしてしまいます。

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

シェア率を上げるためには、記事の内容だけじゃなくボタンのデザインをより良くすることも大事だからね

くるみ

注意

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

ちなみにこのボタンのデザインについてですが、僕自身が作成したスキン「イノセンス」と同一のものになっています。

【Cocoon】居心地の良いスキン「イノセンス」を作成しました「今回はとりあえずSNSシェアボタン・フォローボタンだけカスタマイズしたい」という場合は本記事がうってつけですが、「他の箇所のデザインも併せて変更したい」という場合はスキン「イノセンス」を適用する方が手っ取り早いです。

「Cocoon設定」→「スキン」から設定可能なのでお試しあれ。

CocoonのSNSシェア・フォローボタンのカスタマイズ方法

今回のカスタマイズはCSSを追記するだけで完成するものかつとても簡単なものなので安心してくださいね。

肩の力を抜いてやっていきましょう。

バックアップは忘れずにしておこう

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

「そもそもバックアップってどうすればいいの…?」という方は以下の記事を参考にしてみてください。

【カスタマイズ時に必須】WordPressでCSSのバックアップをとる方法ファイルをいつでも元の状態に戻せるようにしたら、さっそく本題のカスタマイズに移っていきましょう。

CSSを追加する

以下のどれかの方法でCSSのコードをコピペします。

「追加CSS」に追加
「テーマエディター」を使って追加
FTPソフトを使って追加

「追加CSS」が最もお手軽にできるよ

くるみ

「カスタマイズするの初めてでそもそも追加の仕方が分からない…」という方は以下の記事を参考にしてみてください。

【初心者向け】WordPressで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 {
  font-size: 1.25em;
  border-radius: 50%;
  width: 50px!important;
  height: 50px;
  opacity: .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 {
  color: #bbb;
  margin-bottom: 30px;
  position: relative;
}
.sns-share-message:before, .sns-follow-message:before {
  content: '';
  position: absolute;
  display: inline-block;
  width: 30px;
  height: 2px;
  left: 50%;
  bottom: -5px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  border-radius: 3px;
  background-color: #c0c0c0;
}

/************************************
** ボトムフォローボタン
************************************/
.sns-follow-buttons {
  justify-content: space-evenly;
}
.sns-follow-buttons a {
  font-size: 1.7em;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  opacity: .6;
}
@media screen and (max-width:834px) {
  .ss-bottom .sns-follow-buttons a {
    font-size: 1.3em;
  }
}

コメント無しのコードはこちら

/************************************
** トップシェアボタン
************************************/
.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 {
  font-size: 1.25em;
  border-radius: 50%;
  width: 50px!important;
  height: 50px;
  opacity: .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 {
  color: #bbb;
  margin-bottom: 30px;
  position: relative;
}
.sns-share-message:before, .sns-follow-message:before {
  content: '';
  position: absolute;
  display: inline-block;
  width: 30px;
  height: 2px;
  left: 50%;
  bottom: -5px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  border-radius: 3px;
  background-color: #c0c0c0;
}

/************************************
** ボトムフォローボタン
************************************/
.sns-follow-buttons {
  justify-content: space-evenly;
}
.sns-follow-buttons a {
  font-size: 1.7em;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  opacity: .6;
}
@media screen and (max-width:834px) {
  .ss-bottom .sns-follow-buttons a {
    font-size: 1.3em;
  }
}

これでデザインは適用されました。

ここまれ来ればカスタマイズは終了。お疲れ様です。

お疲れ様！

くるみ