SNSシェアボタンはカスタマイズして設置！【AFFINGER5】

AFFINGER5 で設置できるSNSシェアボタンは、全部で6種類あります。

これらのSNSシェアボタンをカスタマイズして、より見やすいボタンに変更する方法をお伝えします。

アイキャッチ画像のボタンの数を見て、アレっと思った人もいるかと思いますが、AFFINGER5のEX版は、『Pintelest』 と『コメントする』のボタンも設置できるようになります。

設置できるSNSシェアボタンの種類

AFFINGER5で設置できるSNSシェアボタンは、この6種類になります。

④はてブ と ⑤Pocket はサービス内容を知らない人も多いのではないでしょうか？

念のために簡単に解説しておきますね！

①LINE ②Twitter ③Facebook は言わずとしれたSNSサービスなので、説明不要かと思います。

一応、日本国内のSNS利用者数を、参考に載せておきますね！

（2020年8月時点）

どのボタンを表示させるのかは、運営者の好みによりますが、どのSNSも一定数のユーザーがいる以上は、全て設置しておいて方が無難でしょう！

SNSシェアボタンをカスタマイズして設置

AFFINGER5ではボタンのデザインを、管理画面よりカスタマイズすることできます。

初期状態のボタンは、このような感じです。

『AFFINGER管理』の『SNS』タブにあるSNS設定より、カスタマイズしていきます。

上の3つのチェックボタンを操作するだけで、見た目を変えることができます。

『SNSボタンのカラーを優しい色にする』にチェックを入れると、このように若干薄くなります。

『SNSボタンをシンプルにする』にチェックを入れると、このように四角いアイコンボタンになります。

『SNSボタンを丸くする』にチェックを入れると、シンプルで可愛いボタンになります。

SNS共有ボタンをアイコン化すると、何が何だか分かりにくいような気もしますが、そのサービスを使っているユーザーなら分かるので大丈夫です。

サイトに合うように好きなデザインを選択して問題ありません。

SNSシェアボタンの文字をカスタマイズして設置

SNSボタンをシンプルにしない場合はボタンに文字が表示されますが、何か分かりにくくないですか？

特に『コピーする』のボタンは、一体何をコピーするんだい？って感じですね。

答えは『そのページのURLをコピー』することなんですが、分かりにくいので文字を書き換える作業をします。

ついでに、FacebookだけShareになっているのも気になるので、Facebook の表示に変えていきます。（ここはお好みで・・）

文字の変更は、WordPressのテーマファイルを少しいじっていきます。

『外観』にある『テーマエディター』より、『sns.php』を探してクリックします。

上記のように、spanのタグに挟まれた『Share』を探してください。

『Share』を『Facebook』に書き換えます。

さらに下段に進み『コピーする』を探します。

ここも分かりやすいように『コピーする』から『コピーURL』に書き換えます。

書き換えたら、最後に『ファイルを更新』をクリックします。

このようなメッセージが出ればOKです！

続けて、『ins-top.php』の中のテキストも同様に書き換えます。

これでボタンの意味が分かりやすくなりました。

以上でSNS共有ボタンのカスタマイズは終了です！

【まとめ】SNSシェアボタンをカスタマイズして設置しよう！

AFFINGER5 のSNSシェアボタンのカスタマイズについて、解説させていただきました。

まず、AFFINGER5で設置できるボタンの種類は、以下の6種類です。

AFFINGER5のEX版であれば、『Pintelest』 と『コメントする』のボタンが加わります。

表示できるボタンの種類を選べるようになっていますが、全て設置した方がいいでしょう！

デザインはお好みですが、『コピーする』など分かりにくい文字表示は変更しておいた方がいいです。

というわけで今回は以上です。