【Cocoon】シェアボタンを小さくする

TwitterやFacebookのシェアボタン。デフォルトだと横長で間延びした感じが、なんだかいやだな。小さく、スッキリできないかな～そんなお悩み解決方法のご紹介です。

【概要】シェアボタンを小さくする

■変更前

SNS等のマークと名称がそれぞれの四角の中に記載されて、左右に余白が十分なサインですね。

■変更後

SNS等のマークだけのシンプルなデザイン。普段から使っている人ならマークだけでピピンとくるでしょう。

【方法】シェアボタンを小さくする

CSS（スタイルシート）に下のコードを貼り付けるだけ。

/* シェアボタン開始 */
#main .button-caption {
  display: none;
}
#main .sns-share a {
  width: 2.5em;
  margin-left: 0.2em;
}
.sns-share-buttons {
  justify-content: center;
}
#main .social-icon {
  font-size: 25px;
}
/* シェアボタン終了 */

Cocoonの場合、CSSは2か所あります。

「外観」→「テーマエディター」
貼り付けたら、「ファイルを更新」を押す。

もしくは、

「外観」→「カスタマイズ」→「追加CSS」
貼り付けたら、「公開」を押す。

さいごに

Cocoonのシェアボタンを小さくする方法を紹介しました。WordPressの他のテーマをご使用の場合は、この方法でうまくいかないかもしれません。CSSを追加する場所を2か所示しましたが、どちらか一方だとうまくいく場合もあるかもしれません。ご参考まで。

今回参考にさせてもらったサイト様
＞＞ITをわかりやすく解説＜＜