ソーシャルボタンデザインを無料ツールで変更する方法

ソーシャルボタンは小さくて見にくい場合が多々あります。
私が推奨している賢威テンプレートでも少し小さすぎてあまり、
目立たないのでソーシャルボタンを変更できればかなり見栄えもよくなる
はずです。ソーシャルボタンデザインを無料ツールで作成する方法をご紹介します。

ソーシャルボタンデザイン変更は無料ツールでできる

ソーシャルボタンデザインは実は無料のツールで簡単に
カスタマイズすることができます。
これから忍者ツールという無料ツールを紹介していきたいと思います。
順番に説明していきますのでソーシャルボタンのデザインを
変更したい方は参考にしてみてください。

 

 

忍者ツールに新規登録する

忍者ツールというものをご存知でしょうか？
このツールを使えば初心者でもソーシャルボタンを簡単に作成することが
可能となっています。
まずは忍者ツールにログインしなければならないのですが、
使ったことがない人であれば、最初に簡単な登録が必要となってきます。
登録したとしても費用はかかりませんので安心してください。
では忍者ツールの新規登録から済ませましょう。
新規登録は難しくないので説明を簡略化しますが、
下記URLから忍者ツールに移動すると、右側に新規登録のボタンが出てきます。
そこでメールアドレスなど、必要な項目を入力するだけとなっています。
入力が完了してもその状態はまだ仮登録状態なので注意してください。

※入力が終わると指定したメールアドレスにメールが届き、その中に
本登録用のURLが記載されていますので、
そちらをクリックすることで本登録が完了します。
これでソーシャルボタンを作成できるようになります。

忍者ツール

 

規定のものか、自分で作成するか選択する

忍者ツールに本登録を完了させた方は忍者ツールをもう一度開くと、
下部に上記画像のようなソーシャルボタンデザインの作成について
表示されるかと思います。
この時点で既存のものであれば、選択しすぐにでも作成することが可能です。
ですが、正直必要のないソーシャルボタンもありますよね。
そのような際は右下に『自分でSNSボタンを選んで作成』という項目がありますのでこちらを
クリックします。
今回は自分で作成する方法を以下に説明したいと思います。

 

利用規約に同意する

自分でSNSボタンを選んで作成をクリックすると、利用規約が出てきます。
こちらは一通り目を通して上記画像の赤枠で囲んである
『利用規約に同意して次へ』というボタンを押します。

 

設置するWebサイトの種類を選択

次に使用するWebサイトの選択をします。
WordPressを使っていると思いますので赤枠で囲んだ部分をクリックしてください。
ちなみにこちらに記載している項目のWebサイトであればそちらを選択します。

 

自分でカスタマイズして選ぶを選択

設置するWebサイトを選択した後は、また既存のものが出てくるのと、
『自分でカスタマイズして選ぶ』というボタンが出てきますのでこちらを
クリックします。

 

左側のリストからソーシャルを選択する

自分でカスタマイズして選ぶをクリックした後は、もう早速作成画面に移行します。
この画面で左側のソーシャルをクリックすると、全てのソーシャルボタンを表示させることが
できますし、Twitterだけと選択することもできます。

 

追加をクリックする

デザインを選び、気に入ったものがあればそこにマウスをあてると
ソーシャルボタンの下に＋追加と表示されますのでクリックします。

Twitterの特殊な設定

Twitterでは誰々さんをフォローというソーシャルボタンデザインがあります。
こちらは自分のTwitterアカウントを設定することもできますので、上記画像の
ようにTwitterユーザー名を入力し、忍者おまとめボタンに追加を最後にクリック
してください。

 

一覧で選択したもののコードを取得する

選択したものの全てが左下に一覧として表示されます。
これで大丈夫であれば右下にある『プレビュー＆コードを取得する』
ボタンをクリックしましょう。

 

ボタンの並びや表示位置、スマホでの表示について指定する

先程、選択したソーシャルボタンの配置について設定します。
右上のスマートフォン表示の部分にオーバレイと表示してありますが、
これが必要のない方は無効を選択してください。
ちなみにオーバレイとはスマートフォンで一番下にスクロール時にもついて
くるボタンのことで、私は無効にしています。

 

オーバレイボタンの設定

次はオーバレイボタンの設定です。
先程の項目でオーバーレイを無効にしていなければこちらの設定が
必要となってきます。
お好みで設定してください。

 

コードをコピーして自サイトのソースに貼り付ける

今まで設定したものが最後にコードで表示されます。
コピーして自サイトのソーシャルボタンを埋め込みたい部分に
ソースとして貼り付けて終了です。
ソースとして貼り付けたい部分が分からない方は個別にメッセージを
くれれば対応いたします！

 

 

まとめ

ソーシャルボタンをデザインするのはサイトの見栄え的にもいいですし、
あまり使われていない余計なソーシャルボタンを配置しないことで、
記事表示速度も向上しますのでおすすめです。
実際にソーシャルボタンが新デザインになるだけで、例えばTwitterボタンで
いうと、ツイートと一言書いてあるより、あなたをフォローすると書いてあると
すればもしかしたら、何の注目もされないはずだったソーシャルボタンも
使われる可能性があります。
ソーシャルボタンの一番の目的は誰かにシェアしてもらうことです。
シェアされることで得られるメリットはかなり大きいので活用していきましょう！