【Cocoon】SNSシェアボタンを丸型にカスタマイズする方法

Cocoon SNSシェアボタン カスタマイズ ブログ運営

今回はCocoonのSNSシェアボタンのカスタマイズです。

記事の拡散率が上がるように、シンプルながらもパッと目につくようなデザインにしてみました。

コピペで簡単に実装できるのでぜひ試してみてください。

CocoonのSNSシェアボタンをカスタマイズ

早速ですが、カスタマイズ後のSNSシェアボタンがこちら。

Cocoon SNSシェアボタン カスタマイズ

今回のカスタマイズはめちゃくちゃ簡単です。

ポイントは2つ。

  1. シェアメッセージの文字をカスタマイズ
  2. アイコンを丸くして中央寄せ

SNSシェアボタンはCocoonの管理画面(Cocoon設定→SNSシェア)で設定すればすぐ出せるので、やることはデザインをcssでちょっと変えてあげるだけ。cssプロパティも簡単なものしか使ってません。

 

それでは順番にやることを解説していきます。(手っ取り早くコピペで済ませたい方はこちらをどうぞ)

1、シェアメッセージのカスタマイズ

まずはシェアメッセージのカスタマイズから。

WordPressの管理画面より「Cocoon設定」→「SNSシェア」に進みます。SNSシェアボタンの主な設定はここで行えます。

 

本文下シェアボタンの「シェアメッセージ」に、シェアを促すメッセージを入力してください。(文字が長すぎるとレイアウトが崩れるので注意)

例えば「\ この記事をシェアする /」といった感じ。特に指定がない方はコピペOKです。

シェアメッセージのカラー指定

これでSNSシェアボタンの表示ができました。ここからがいよいよカスタマイズ。

といっても、シェアメッセージは太字にして色を変更しているだけです。

sns-share-message{
    font-weight: bold;
    color: #499eda;
}

font-weightプロパティ」は文字の太さを変更できます。もちろん細くすることもできるので、強弱をつけたいときに便利なプロパティですね。

文字サイズを変えるだけでは出せない表現ができます。

 

colorプロパティ」も定番のcssプロパティなので覚えておきたいですね。カラーコードは各自好きな色を選んでみましょう。

2、シェアボタンを丸型にカスタマイズ

続いてシェアボタンのカスタマイズです。(ボタンカラーは設定画面より「ブランドカラー」をえらんでおいてください。)

ポイントは3つ。

  1. ボタンのキャプションを非表示に
  2. ボタンを丸型に
  3. ボタンを中央寄せ

これも順番に見ていきましょう。

ボタンのキャプションを非表示に

ボタンは丸型にしたいので、まずはSNSアイコン横にあるキャプションを非表示にします。

.button-caption{
    display:none;
}

要素を非表示にしたいときは「displayプロパティ」が便利。

「display:none;」でHTML上にある要素を非表示にすることができます。これも覚えておくと便利です。

ボタンを丸が何カスタマイズ

続いてボタンを丸型にする作業。

.sns-share-buttons a {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin: 8px;
}

要素を丸型にするときに使うのは「border-radiusプロパティ」。

角を丸くするcssのプロパティなんですが、値を50%にすることで正円にすることができます。ちなみに画像も丸くなります。

後は「widthプロパティ」と「heightプロパティ」を使ってサイズを調整し、「marginプロパティ」でボタン間の余白を整えます。

シェアボタンを中央寄せ

最後に左に寄っているシェアボタンを中央寄せして完成。

.sns-share-buttons {
    justify-content: center;
}

中央寄せの方法は状況によって変わるんですが、今回の場合は「justify-contentプロパティ」を使うことで要素をまとめて配置することができます。

まとめ

今回のカスタマイズはとても単純なcssでできました。

最終的に完成したcssはこれ。

/*シェアボタン
===================================*/
.sns-share-message{
    font-weight: bold;
    color: #499eda;
}
.sns-share-buttons {
    justify-content: center;
}
.sns-share-buttons a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 8px;
}
.button-caption{
    display:none;
}

Cocoonデフォルトのシェアボタンが優秀なので、後はオリジナリティを出すためにちょっとcssを加えてあげるだけで済みましたね。

ぜひ試してみてください。

ブログ運営

FFseeのweb担当。ブログ、アフィリエイト、ネットショップ運営歴3年。
最初の1年で失敗サイトを量産しながらも、今は6サイトくらいに落ち着いて半フリーランスな生活をしてます。

やまりょうをフォローする
\ この記事をシェアする /
スポンサーリンク
FFsee