今回はWordPressテーマ「Simplicity」のSNSシェアボタンのデザインを変更、カスタマイズする方法を紹介します。
よりカスタマイズ性の高いデザインを集めた記事はこちら↓
SNSシェアボタンは記事上と記事下に配置できるので両方のデザインを見ていきたいと思います。
デフォルトのデザイン
Simplicityを導入して一番最初のSNSシェアボタンのデザインはこんな感じになっていると思います。
これをもっとおしゃれに変更していきます。
Simplicityには元からおしゃれなSNSシェアボタンがいくつか用意されていて、一番簡単なのはこれに変更するカスタマイズです。
テーマカラータイプ（高速）
記事上
記事下
横並びのボタンに吹き出しでシェア数が表示されるフラットなデザインです。
統一感があり、かつシンプルなので使っている人も多いはず。
各SNSのテーマカラーを使ったこのデザインは一目見てSNSの種類がわかり、思わず押したくなるデザインです。
Twitterタイプ（高速）
記事上
記事下
先程の背景色をグレーにし、ロゴに色をつけたデザイン。
Simplicityのテーマ通りシンプルなデザインで、ブログの統一性がより高まります。
Simplicity公式サイトでも使われているデザインで、スムーズな拡散に繋げてくれることでしょう。
バイラルタイプ（高速）
記事上/記事下
大きめのボタンにそれぞれのテーマカラーを背景色にしたデザイン。記事上と記事下のデザインが同じになっています。
一際目を引くデザインであるがゆえにその拡散力も大きいでしょう。
設置しておくだけでブログ全体がおしゃれになり、装飾としても十分すぎるくらいです。
ちなみに僕はこのデザインが一番好きです。
バイラル白タイプ（高速）
記事上/記事下
先程のデザインの色を入れ替えたデザイン。マウスが乗ると上のバイラルタイプ（高速）と同じデザインになります。
「バイラルタイプ（高速）だと目立ち過ぎてしまう」と感じたらこのデザインにするのがいいでしょう。
デザインの変更方法
SNSシェアボタンのデザインの変更はダッシュボードから「外観→カスタマイズ→SNS」と進みます。
ボタンのデザインのほか、設置するボタンの種類も自分好みに選択することができます。
チェックボックスから好きなSNSシェアボタンを選択しましょう。
余白を埋めたい場合
バイラルタイプのボタンを使うとわかりますが、設置するSNSシェアボタンの数によっては中途半端な余白ができてしまうんですよね。結構気になります。
そんな人のために余白を埋めるコードを用意しました。もちろんレスポンシブデザイン対応です。
好きなコードをコピペしてください。
また、Simplicity以外でこれらのスタイルを適用したい場合はCSSのセレクタを変更する必要があるのでご注意ください。
ボタン2個/4個(1行2列/2行2列)
2行2列でも使えます。
before
after
コード
.sns-group-viral ul.snsb li {
width: 49%;
}
ボタン3個/6個(1行3列/2行3列)
before
after
コード
.sns-group-viral ul.snsb li {
width: 32.3%;
}
ボタン7個(1行目4列、2行目3列)
before
after
コード
.sns-group-viral ul.snsb li:nth-of-type(n+5) {
width: 32.3%;
}
レスポンシブデザイン1
コード
上と同じです。そのままコピペするとスマホではこのような表示になります。
レスポンシブデザイン2
思ったよりもかさばるかもしれません。
コード
.sns-group-viral ul.snsb li:nth-of-type(n+5) {
width: 32.3%;
}
@media(max-width: 768px) {
.sns-group-viral ul.snsb li {
width: 49%!important;
}
.sns-group-viral ul.snsb li:last-child {
width: 99%!important;
}
}
レスポンシブデザイン3
タイルっぽくしてみました。急に思いついたデザインです。
洒落てるけど使いやすくはなさそう。
コード
.sns-group-viral ul.snsb li:nth-of-type(n+5) {
width: 32.3%;
}
@media(max-width: 768px) {
.sns-group-viral ul.snsb li {
width: 49%!important;
}
.sns-group-viral ul.snsb li:nth-of-type(n+3):nth-of-type(-n+5) {
width: 32.3%!important;
}
}
まとめ
というわけでSNSシェアボタンのカスタマイズでした。
SNSシェアボタンは記事が拡散される上でとても重要です。記事が拡散されればその分外部リンクも増えるということなので、アクセスも増え、結果的にSEOに強くなる、というようにいいことばかりです。
デザインが整えてあるボタンの方が押したくなりますし、何よりブログがおしゃれになります。
自信のある人は自分でカスタマイズにも挑戦してみてはどうでしょうか。
