SimplicityのSNSシェアボタンをカスタマイズ!おしゃれなデザインに変更しよう!

サムネイル WordPress

今回はWordPressテーマ「Simplicity」のSNSシェアボタンのデザインを変更、カスタマイズする方法を紹介します。

よりカスタマイズ性の高いデザインを集めた記事はこちら↓

SNSシェアボタンは記事上と記事下に配置できるので両方のデザインを見ていきたいと思います。

 

スポンサーリンク

デフォルトのデザイン

Simplicityを導入して一番最初のSNSシェアボタンのデザインはこんな感じになっていると思います。

画像1

これをもっとおしゃれに変更していきます。

Simplicityには元からおしゃれなSNSシェアボタンがいくつか用意されていて、一番簡単なのはこれに変更するカスタマイズです。

 

テーマカラータイプ(高速)

記事上

画像2

記事下

画像3

横並びのボタンに吹き出しでシェア数が表示されるフラットなデザインです。

統一感があり、かつシンプルなので使っている人も多いはず。

各SNSのテーマカラーを使ったこのデザインは一目見てSNSの種類がわかり、思わず押したくなるデザインです。

 

Twitterタイプ(高速)

記事上

画像4

記事下

画像5

先程の背景色をグレーにし、ロゴに色をつけたデザイン。

Simplicityのテーマ通りシンプルなデザインで、ブログの統一性がより高まります。

Simplicity公式サイトでも使われているデザインで、スムーズな拡散に繋げてくれることでしょう。

 

バイラルタイプ(高速)

記事上/記事下

画像6

大きめのボタンにそれぞれのテーマカラーを背景色にしたデザイン。記事上と記事下のデザインが同じになっています。

一際目を引くデザインであるがゆえにその拡散力も大きいでしょう。

設置しておくだけでブログ全体がおしゃれになり、装飾としても十分すぎるくらいです。

ちなみに僕はこのデザインが一番好きです。

 

バイラル白タイプ(高速)

記事上/記事下

画像7

先程のデザインの色を入れ替えたデザイン。マウスが乗ると上のバイラルタイプ(高速)と同じデザインになります。

「バイラルタイプ(高速)だと目立ち過ぎてしまう」と感じたらこのデザインにするのがいいでしょう。

 

デザインの変更方法

SNSシェアボタンのデザインの変更はダッシュボードから「外観→カスタマイズ→SNS」と進みます。

画像8

画像9

ボタンのデザインのほか、設置するボタンの種類も自分好みに選択することができます。

チェックボックスから好きなSNSシェアボタンを選択しましょう。

 

余白を埋めたい場合

バイラルタイプのボタンを使うとわかりますが、設置するSNSシェアボタンの数によっては中途半端な余白ができてしまうんですよね。結構気になります。

画像10

そんな人のために余白を埋めるコードを用意しました。もちろんレスポンシブデザイン対応です。

好きなコードをコピペしてください。

また、Simplicity以外でこれらのスタイルを適用したい場合はCSSのセレクタを変更する必要があるのでご注意ください。

 

ボタン2個/4個(1行2列/2行2列)

2行2列でも使えます。

before

画像11

画像22

after

画像12

画像21

コード

.sns-group-viral ul.snsb li {
  width: 49%;
}

 

ボタン3個/6個(1行3列/2行3列)

before

画像13

画像14

 

after

画像15

画像16

コード

.sns-group-viral ul.snsb li {
  width: 32.3%;
}

 

ボタン7個(1行目4列、2行目3列)

before

画像17

after

画像17

コード

.sns-group-viral ul.snsb li:nth-of-type(n+5) {
  width: 32.3%;
}

 

レスポンシブデザイン1

画像18

コード

上と同じです。そのままコピペするとスマホではこのような表示になります。

 

レスポンシブデザイン2

思ったよりもかさばるかもしれません。

画像19

コード

.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

タイルっぽくしてみました。急に思いついたデザインです。

洒落てるけど使いやすくはなさそう。

画像20

コード

.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に強くなる、というようにいいことばかりです。

デザインが整えてあるボタンの方が押したくなりますし、何よりブログがおしゃれになります。

自信のある人は自分でカスタマイズにも挑戦してみてはどうでしょうか。