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

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

くるみ

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

ということで今回は

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

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

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

SNSボタンの完成イメージ

トップシェアボタン

before

Cocoonのカスタマイズ前のトップSNSボタン

after

Cocoonのカスタマイズ後のトップSNSボタン

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

before

Cocoonのカスタマイズ前のボトムSNSボタン

after

Cocoonのカスタマイズ後のボトムSNSボタン

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

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

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

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

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

くるみ

注意
本記事でご紹介するのは、シェア数を表示しない前提でのカスタマイズになります。シェア数を表示する設定にするとデザインが崩れてしまう可能性があるのでご注意ください。
ちなみにこのボタンのデザインについてですが、僕自身が作成したスキン「イノセンス」と同一のものになっています。

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

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

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

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

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

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

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

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

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

CSSを追加する

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

  • 「追加CSS」に追加
  • 「テーマエディター」を使って追加
  • FTPソフトを使って追加
「追加CSS」が最もお手軽にできるよ

くるみ

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

WordPressで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;
  }
}
これでデザインは適用されました。

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

お疲れ様!

くるみ

CSSの変更が反映されない場合の対処法

「CSSを追記して保存したにも関わらず反映されないぞ…」となった場合は、以下が原因であることが多いです。

  • キャッシュ系プラグイン
  • プラウザキャッシュ

キャッシュ系プラグインを疑う

「WP Fastest Cache」や「WP Super Cache」をはじめとしたキャッシュ系プラグインをお使いの場合は、そちらの方でキャッシュを削除してください。

プラウザのキャッシュを削除

お使いのブラウザのキャッシュを削除してみてください。

Chromeをお使いの場合は以下のショートカットキーで削除できます。

Windows[Shift]+[Ctrl]+[Delete]キー
Mac[shift]+[command]+[delete」キー

まとめ

以上、CocoonのSNSシェア・フォローボタンをシンプルに小さくするカスタマイズ方法でした。

他にも、今回のSNSボタンのデザインと調和のとれたCocoonカスタマイズをまとめているのでぜひ。
Cocoonのおしゃれなカスタマイズ全集【初心者もコピペで簡単】Cocoonのおしゃれなカスタマイズ全集【初心者もコピペで簡単】

参考になれば幸いです!では⸝⸝- ̫ -⸝⸝

2 COMMENTS

匿名

はじめまして。
cocoonでイノセンスを使わせていただいております。
かわいいデザインですごく気に入っています。

SNSシェアボタンでFacebookとLINEのボタンを押すと、自分のログイン済みのアプリに飛ばず、ログイン画面が出てきてしまうのですが、解決方法はありますでしょうか?

返信する
おはようポテトのアイコン おはようポテト

匿名さん

>ログイン済みのアプリ

ということはモバイルでの話でしょうか。
でしたらそれは見ているユーザー次第で挙動が変わってくるものなので正直改善のしようが無いですね…

というのも、シェアボタンを押した際にアプリに飛ぶことがありますが、それはそのブログを閲覧していたブラウザで過去に(そのSNS)でログインしたことがあるケースの挙動なためです。
要するにユーザー次第なので運営者の方ではどうすることもできない状態です…

お力になれず申し訳ありません。

返信する

コメントを残す

この記事を書いた人
おはようポテトのプロフィール画像
おはようポテト

22年4月から自社開発企業のWebエンジニアとして働く大学生。このサイトでは主にプログラミングやWordPressカスタマイズについて発信しています。他に運営しているのは宅配冷凍弁当の特化ブログなど。お問い合わせはこちらよりどうぞ。