本日は、WordPress無料テーマ「Cocoon」で、SNSシェアボタンをカスタマイズしたサンプルCSSのご紹介です。
コピペで使用出来るCSSを公開していますので、お気に召したらご自由にお使いください。
現在のところ全7種ですが、新しく何か出来たら順次追加していく予定にしています。
こちらは「CocoonのSNSフォローボタンをカスタマイズ・コピペOK」のシェアボタン版になります。セットで変更したい場合は、両方のCSSをコピペして使ってください。
Cocoonのシェアボタンの初期デザイン
Cocoonの機能として、SNSシェアボタンは初期から有効になっていて、プラグインを使用したりコードを書いたりしなくても設置可能です。これはとても便利な機能です。
ですが、デザインの設定項目は最低限しかありません。
ボタンカラーとカラム数、ロゴ・キャプション配置のみです。
ボタンカラーも、ブランドカラーとブランドカラー(白抜き)とモノクロのみとなっており、基本的なデザインは以下のような感じでほぼ固定になります。
この状態でも充分にSNSシェアボタンとしては使用出来ますが、せっかくであれば自分のブログのデザインに合わせたいと思うものではないでしょうか。
今回は、SNSシェアボタンのデザインをいくつかカスタマイズしてみましたので、そちらをご紹介したいと思います。
SNSシェアボタンのカスタムCSSの使い方
SNSシェアボタンのカスタマイズは、CSSのみで行なっています。
ですので、ご利用の際にはWordPress管理画面より［外観－カスタマイズ］の画面に移動し［追加CSS］のボックスにコピペ用のCSSをペーストしてご利用ください。
一応、当方のテスト環境で動作の確認はしております。
もし上手くいかないなどがありましたら、実際の環境を添えてご連絡ください。
また、これらのカスタマイズを参考ならびに使用したことにより、仮に何か影響があったとしても当方では責任を負うことが出来かねますので、あらかじめテスト環境で確認するなどお願いします。
デザインサンプル＆コピペ用CSS
以下は、デザインのサンプルとコピペ用CSSになります。
基本的に明記がない限り、SNSシェアボタンの設定は、
- ボタンカラー：ブランドカラー
- カラム数：６列
- ロゴ・キャプション配置：ロゴ・キャプション上下
- シェア数を表示：オフ
になっています。
ブランドカラー丸ボタン
上：ブランドカラー(白抜き)
中：ブランドカラー
下：モノクロ
.sns-buttons {
display: flex;
flex-wrap: nowrap;
justify-content: center;
}
.sns-buttons a.share-button {
width: 50px;
height: 50px;
margin: 0 5px;
border-radius: 50%;
}
.sns-buttons a.share-button .social-icon {
font-size: 24px;
}
.sns-buttons a.share-button .button-caption {
display: none;
}ブランドカラー正方形ボタン
上：ブランドカラー(白抜き)
中：ブランドカラー
下：モノクロ
.sns-buttons {
display: flex;
flex-wrap: nowrap;
justify-content: center;
}
.sns-buttons a.share-button {
width: 80px;
height: 80px;
margin: 0 5px;
padding: 5px 0;
}
.sns-buttons a.share-button .social-icon {
font-size: 20px;
margin-bottom: 5px;
}
.sns-buttons a.share-button .button-caption {
font-size: 10px;
}丸ボタン＋キャプション外側
色は設定に関わらず、CSSで指定したものが固定になります。
.sns-buttons {
display: flex;
flex-wrap: nowrap;
justify-content: center;
}
.sns-buttons a.share-button {
width: 60px;
height: auto;
margin: 0 5px;
padding: 5px 0;
background: none !important;
}
.sns-buttons a.share-button .social-icon {
width: 40px;
height: 40px;
line-height: 35px;
font-size: 20px;
background: #8ad3dc;
border-radius: 50%;
}
.sns-buttons a.share-button .button-caption {
font-size: 10px;
color: #8ad3dc;
font-weight: 600;
}ちょっとCSSおかしかったので、修正しました。
背景なしボタン＋キャプション
色は設定に関わらず、CSSで指定したものが固定になります。
.sns-buttons {
margin-bottom: 100px;
display: flex;
flex-wrap: nowrap;
justify-content: center;
}
.sns-buttons a.share-button {
width: 80px;
margin: 0 5px;
border: 0;
background: none !important;
}
.sns-buttons a.share-button .social-icon {
font-size: 26px;
color: #f582ae;
}
.sns-buttons a.share-button .button-caption {
color: #f582ae;
}
ハンドメイド革タグ風ボタン
色は設定に関わらず、CSSで指定したものが固定になります。
.sns-buttons {
display: flex;
flex-wrap: nowrap;
justify-content: center;
}
.sns-buttons a.share-button {
width: 80px;
height: 50px;
border-radius: 5px;
margin: 0 5px;
padding: 5px;
background: #8f5102 !important;
border: 0;
}
.sns-buttons a.share-button .social-icon {
border: 2px dashed #fff;
border-radius: 5px;
width: 70px;
height: 40px;
font-size: 22px;
line-height: 38px;
margin: 0;
padding: 0;
color: #fff;
}
.sns-buttons a.share-button .button-caption {
display: none;
}ハンドメイド布タグ風ボタン
色は設定に関わらず、CSSで指定したものが固定になります。
.sns-buttons {
display: flex;
flex-wrap: nowrap;
justify-content: center;
}
.sns-buttons a.share-button {
width: 100px;
height: 50px;
border-radius: 5px;
margin: 0 5px;
padding: 5px 0;
background: #feecd6 !important;
border: 0;
}
.sns-buttons a.share-button .social-icon {
border-top: 2px dashed #3c2d1a;
border-bottom: 2px dashed #3c2d1a;
width: 100px;
height: 40px;
font-size: 22px;
line-height: 38px;
margin: 0;
padding: 0;
color: #3c2d1a;
}
.sns-buttons a.share-button .button-caption {
display: none;
}一体化バナー風ボタン
色は設定に関わらず、CSSで指定したものが固定になります。
.sns-buttons {
display: flex;
flex-wrap: nowrap;
justify-content: center;
}
.sns-buttons a.share-button {
width: 50px;
height: 50px;
background: #38C34D !important;
border: 0;
border-radius: 0;
border-right: solid 1px #A8FD9D !important;
}
.sns-buttons a.share-button:first-child {
border-radius: 5px 0 0 5px;
}
.sns-buttons a.share-button:last-child {
border-radius: 0 5px 5px 0;
border-right: 0 !important;
}
.sns-buttons a.share-button .social-icon {
color: #fff;
}
.sns-buttons a.share-button .button-caption {
display: none;
}ラベル風キャプション付きボタン
色は設定に関わらず、CSSで指定したものが固定になります。
キャプションありきのボタンになりますので、フォローボタンのセットはありません。
設定は、ブランドカラー、ロゴ・キャプション左右、になります。
.sns-buttons {
display: flex;
flex-wrap: nowrap;
justify-content: center;
}
.sns-buttons a.share-button {
margin: 0 5px;
height: 40px;
background: #8E83D5 !important;
position: relative;
border-radius: 5px;
color: #fff;
}
.sns-buttons a.share-button .social-icon {
background: #7162BF;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0;
line-height: 40px;
border-radius: 5px 0 0 5px;
color: #fff;
}
.sns-buttons a.share-button .button-caption {
position: absolute;
top: 50%;
left: 40px;
transform: translateY(-50%);
font-size: 14px;
}付箋風キャプション付きボタン
色は設定に関わらず、CSSで指定したものが固定になります。
キャプションありきのボタンになりますので、フォローボタンのセットはありません。
設定は、ブランドカラー、ロゴ・キャプション左右、になります。
.sns-buttons {
display: flex;
flex-wrap: nowrap;
justify-content: center;
}
.sns-buttons a.share-button {
margin: 0 5px;
height: 40px;
background: #fff !important;
position: relative;
border-radius: 5px;
outline: 2px solid #048CCA;
}
.sns-buttons a.share-button .social-icon {
background: #048CCA;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0;
line-height: 40px;
border-radius: 5px 0 0 5px;
color: #fff;
}
.sns-buttons a.share-button .button-caption {
position: absolute;
top: 50%;
left: 40px;
transform: translateY(-50%);
font-size: 14px;
color: #048CCA;
}まとめ
WordPress無料テーマ「Cocoon」のSNSシェアボタンについて、思いつくままにカスタマイズしたデザインとそのCSSを並べてみました。
取り急ぎ思い付いたデザインを並べてみましたので、また何か素敵なデザインに遭遇したり、奇跡的に思い付いたりしたら、追加したいと思います。
フォローボタンとシェアボタンを同じデザインで使いたい、という方は「CocoonのSNSフォローボタンをカスタマイズ・コピペOK」の記事をご覧ください。
もし「設置したいデザインはあるのだけど、CSSの書き方が分からない……」といったお悩み等がありましたが、ご相談ください。
それ以外でも、WordPress+Cocoonでのお悩みがありましたら、ご相談やお見積は無料ですので、お気軽にお問い合わせください。
コメント