SimplicityのSNSシェアボタンを変更する方法

SimplicityにはデフォルトでSNSシェアボタンが表示されるようになっているが、デフォルトのボタンデザインはいまいちダサいので変更することにした。

というわけで、今回はSimplicityにデフォルトで採用されているSNSシェアボタンデザインを他のデザインに変更する方法を紹介する。

Simplicity標準搭載のSNSシェアボタンの種類

Simplicityには以下のSNSシェアボタンデザインが用意されており、デザインは設定画面で簡単に切り替えることができるようになっている。

好みのデザインを見つけよう。

PC用デザイン

パソコンで表示したときのSNSシェアボタンデザインは以下の通り。

デフォルト（サービス固有のボタン）

Simplicityテンプレートにおいてデフォルトで採用されているデザイン。

各SNSサービス固有のボタンを使用しているためデザインに統一感がなくごちゃごちゃしている。

テーマカラータイプ（高速）

SNSサービスロゴ＋吹き出し形式で統一し、ロゴの背景をSNSサービステーマ色にしたデザイン。

Twitterタイプ（高速）

SNSサービスロゴ＋吹き出し形式で統一し、ロゴの背景は薄いグレー色で統一したデザイン。

バイラルタイプ（高速）

単一ボタンの中に各SNSサービスのロゴ＋サービス名を表示し、背景にテーマ色を採用したデザイン。

バイラル白タイプ（高速）

バイラルタイプ（高速）デザインの背景色とロゴ＋サービス名色を入れ替えたデザイン。

モバイル用デザイン

モバイルで表示したときのSNSシェアボタンデザインは以下の通り。

デフォルト（アイコン）

各SNSロゴとテーマ色でシンプルにまとめた小さなボタンデザイン。

バイラルタイプ

PC用のバイラルタイプボタンをモバイル用に縦2列で並べたデザイン。

バイラル白タイプ

PC用のバイラル白タイプボタンをモバイル用に縦2列で並べたデザイン。

SimplicityでSNSシェアボタンデザインを変更する手順

WordPress管理画面左メニュの「外観」から「カスタマイズ」をクリックする。

カスタマイズ画面が表示されるので、左メニューから「SNS」をクリックする。

左メニューがSNS設定に切り替わるので、シェアボタンのタイプ（PC）とシェアボタンのタイプ（モバイル）で好みのデザインを選択しよう。

最後に「公開」ボタンをクリックすれば設定は完了だ。

その他のSNSシェアボタン関連の設定

SNSボタン大枠のデザインを変更する方法を上述したが、Simplicityテンプレートでは他にもSNSシェアボタンに関連した細かな設定をSNS設定から行うことが可能だ。

設定を変更した場合は、上にある「公開」ボタンを押して設定を反映させよう。

全シェアボタンの表示

シェアボタン群の表示非表示をコントロールするチェックボックス。

チェックをつければ、シェアボタン群が表示される。

デフォルトではチェックがついた状態になっている。

全シェア数の表示

シェア数の表示非表示をコントロールするチェックボックス。

チェックを外すと、以下のようにシェア数を表す数字が表示されなくなる。

この機能は、シェアボタンのタイプをデフォルト（SNSサービス固有ボタン）以外に設定している場合のみ機能する。

タイトル下にシェアボタンを表示

「タイトル下にシェアボタンを表示」にチェックを入れると、以下のようにブログ記事タイトルの直下にSNSシェアボタンを表示できる。

サイドに追従シェアボタンを表示

「サイドに追従シェアボタンを表示」チェックボックスにチェックを入れると、以下のようにブログサイドに追従型のシェアボタンが表示されるようになる。

スクロールさせると、下までこのシェアボタンが追従するようになっている。

結構邪魔なのでこの機能はあまりお勧めしない。

本文下シェアボタンを表示

「本文下シェアボタンを表示」にチェックを入れると、記事本文下にSNSシェアボタンが表示されるようになる。

デフォルトではチェックが入っている。

シェアメッセージ

シェアメッセージでは、テキストボックスへの文字入力でSNSシェアボタン用のラベル文字を設定できる。 

デフォルトでは「シェアする」に設定されている。

ラベルを表示させたくなければ、テキストボックスを空欄にすればよい。

各SNSボタンの表示・非表示

SNS設定では、SNSボタン群にどのSNSのボタンを表示するのかチェックボックスで個別に設定することができる。

デフォルトでは、Twitter、Facebook、Google+、はてな、pocket、LINEの6つが表示されるように設定されている。

まとめ

SimplicityのデフォルトのSNSシェアボタンはデザインに統一感がないため正直いまいちだ。

他に用意されているデザインは統一性があるので、そちらに変更すればブログをすっきりしたデザインに出来る。

Simplicityを使用しているなら、SNSシェアボタンデザインをデフォルト以外のデザインに変更することを是非ともお勧めする。