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

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

 

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

 

文字の変更は、AFFINGER5ユーザーじゃなくても可能なので試してみてね!

 

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

 

 

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

 

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

 

SNSシェアボタンは6種

  1. LINE
  2. Twitter
  3. Facebook
  4. はてブ
  5. Pocket
  6. コピーする

 

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

 

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

 

はてブとは?

ソーシャルブックマークとも呼ばれるサービスである『はてなブックマーク』の略です。

自分や友達、フォロワーと情報を共有するためのブックマークではなく、知らない誰かとブックマークを共有して、興味のあるトピックを探すサービスになります。

 

Pocketとは?

Pocketとは、Web上で情報保存ができるツールです。Web上で気になった記事や映像を「後で見る」ために、簡単に保存できます。保存したコンテンツは、電車や飛行機の中などオフラインの環境でも楽めるのが特徴です。

Pocketの利用者数は、世界で2100万人なので、日本でもそこそこのユーザー数がいると思われます。

 

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

 

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

 

1位 LINE 8,400万人
2位 Twitter 4,500万人
3位 Instagram 3,300万人
4位 Facebook 2,600万人
5位 TikTok 950万人
6位 Pinterest 530万人

(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のSNSシェアボタンは6種

  1. LINE
  2. Twitter
  3. Facebook
  4. はてブ
  5. Pocket
  6. コピーする

 

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

 

 

 

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

 

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

 

 

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

 

 

\ 期間限定の特典付き  

『AFFINGER5』公式ページ

『タグ管理プラグイン』4,800円が無料

 

-ブログ関連(18)
-,

© 2021 RIONLOG