本日は、WordPress無料テーマ「Cocoon」で、SNSフォローボタンをカスタマイズしたサンプルCSSのご紹介です。
コピペで使用出来るCSSを公開していますので、お気に召したらご自由にお使いください。
現在のところ全7種ですが、新しく何か出来たら順次追加していく予定にしています。
こちらは「CocoonのSNSシェアボタンをカスタマイズ・コピペOK」のフォローボタン版になります。セットで変更したい場合は、両方のCSSをコピペして使ってください。
Cocoonのフォローボタンの初期デザイン
Cocoonの機能として、SNSフォローボタンは初期から有効になっていて、プラグインを使用したりコードを書いたりしなくても設置可能です。これはとても便利な機能です。
ですが、デザインの設定項目は最低限しかありません。
ボタンカラーのみです。
フォローボタンは、プロフィール画面で該当するSNSの欄にURLを入力することで設定出来ます。そちらの入力数によってカラム数も変わりますので、それらの設定はありません。
ボタンカラーは、ブランドカラーとブランドカラー(白抜き)とモノクロのみとなっており、基本的なデザインは以下のような感じでほぼ固定になります。
この状態でも充分にSNSフォローボタンとしては使用出来ますが、せっかくであれば自分のブログのデザインに合わせたいと思うものではないでしょうか。
今回は、SNSフォローボタンのデザインをいくつかカスタマイズしてみましたので、そちらをご紹介したいと思います。
SNSフォローボタンのカスタムCSSの使い方
SNSフォローボタンのカスタマイズは、CSSのみで行なっています。
ですので、ご利用の際にはWordPress管理画面より［外観－カスタマイズ］の画面に移動し［追加CSS］のボックスにコピペ用のCSSをペーストしてご利用ください。
一応、当方のテスト環境で動作の確認はしております。
もし上手くいかないなどがありましたら、実際の環境を添えてご連絡ください。
また、これらのカスタマイズを参考ならびに使用したことにより、仮に何か影響があったとしても当方では責任を負うことが出来かねますので、あらかじめテスト環境で確認するなどお願いします。
デザインサンプル＆コピペ用CSS
以下は、デザインのサンプルとコピペ用CSSになります。
基本的に明記がない限り、SNSフォローボタンの設定は、
- ボタンカラー：ブランドカラー
になっています。
ブランドカラー丸ボタン
上：ブランドカラー(白抜き)
中：ブランドカラー
下：モノクロ
.sns-follow-buttons a.follow-button {
width: 50px;
height: 50px;
margin: 0 5px;
border-radius: 50%;
}ブランドカラー正方形ボタン
上：ブランドカラー(白抜き)
中：ブランドカラー
下：モノクロ
.sns-follow-buttons a.follow-button {
width: 80px;
height: 80px;
margin: 0 5px;
padding: 5px 0;
}指定カラー丸ボタン
色は設定に関わらず、CSSで指定したものが固定になります。
.sns-follow-buttons a.follow-button {
width: 40px;
height: 40px;
margin: 0 5px;
background: #8ad3dc !important;
border-radius: 50%;
}背景なしボタン
色は設定に関わらず、CSSで指定したものが固定になります。
.sns-follow-buttons a.follow-button {
width: 40px;
margin: 0 5px;
border: 0;
background: none !important;
font-size: 32px;
color: #f582ae;
}ハンドメイド革タグ風ボタン
色は設定に関わらず、CSSで指定したものが固定になります。
.sns-follow-buttons a.follow-button {
width: 80px;
height: 50px;
border-radius: 5px;
margin: 0 5px;
background: #8f5102 !important;
border: 0;
position: relative;
outline: dashed 2px #ffffff;
outline-offset: -7px;
}ちょっとシェアボタンとやり方が異なるので、角がどうしても少し変わってます。すいません。
ハンドメイド布タグ風ボタン
色は設定に関わらず、CSSで指定したものが固定になります。
.sns-follow-buttons a.follow-button {
outline: 2px dashed #3c2d1a;
outline-offset: -7px;
font-size: 22px;
width: 100px;
height: 50px;
border-radius: 5px;
margin: 0 5px;
padding: 5px 0;
background: #feecd6 !important;
color: #3c2d1a;
}シェアボタンと全く同じには、現時点では出来てません。申し訳ございません。考えます。
一体化バナー風ボタン
色は設定に関わらず、CSSで指定したものが固定になります。
.sns-follow-buttons a.follow-button {
width: 50px;
height: 50px;
background: #38C34D !important;
border: 0;
border-radius: 0;
border-right: solid 1px #A8FD9D !important;
margin: 0;
font-size: 22px;
color: #fff;
}
.sns-follow-buttons a.follow-button:first-child {
border-radius: 5px 0 0 5px;
}
.sns-follow-buttons a.follow-button:last-child {
border-radius: 0 5px 5px 0;
border-right: 0 !important;
}まとめ
WordPress無料テーマ「Cocoon」のSNSフォローボタンについて、カスタマイズしたデザインとそのCSSを並べてみました。
シェアボタンに合わせてフォローボタンのCSSを作成した形になりますので、微妙にシェアボタンと形が違うものもあります。なるべく同じにしてはいますが、少し違いがあるのはご容赦ください。
もし「設置したいデザインはあるのだけど、CSSの書き方が分からない……」といったお悩み等がありましたが、ご相談ください。
それ以外でも、WordPress+Cocoonでのお悩みがありましたら、ご相談やお見積は無料ですので、お気軽にお問い合わせください。
コメント