ブログに最適！フラットデザイン風のレスポンシブ対応SNSボタンをコピーペで簡単に設置する方法

2019年12月15日

コピー＆ペーストで、フラットデザイン風のレスポンシブ対応SNSボタンをブログに簡単に設置できるウェブサービスが新登場です。

レスポンシブ対応SNSボタン

対応しているブログサービスは、

などほぼメインどころは全てカバー

私のはてなブログでもこの新しいSNSボタンを記事上と記事下に設置してみました。

この新しいレスポンシブ対応SNSボタンを提供してくれるのは

です。

まずは忍者ツールズにログインします。

アカウントが無い場合は、新規作成して下さい。

ログイン後、「新しいサービスを追加する」を選択します。

忍者ツールズには様々な便利ツールが用意されているのですが、ここで、忍者おまとめボタンの「ツールを作成」をクリックします。

そうすると以下の画面になるので、利用しているブログサービスを選択します。

ご自身が利用しているブログサービス名が無い場合は、取り敢えず「その他のブログ」を選択してください。はてなブログの場合もこちらになります。

そうすると以下の画面になるので、枠で囲われたレスポンシブSNSボタンを選択します。

レスポンシブ対応SNSボタンのセット

ブログやHPに表示するSNSボタンをカスタマイズしたい場合は、「自分でカスタマイズして選ぶ」を選択しましょう。

「自分でカスタマイズして選ぶ」を選択した場合は、表示されたページの左側にあるリストから、下の画像で枠で囲った部分にあるレスポンシブを選択します。

レスポンシブ対応SNSボタンのカスタマイズ

後は、自分のブログで表示させたいSNSボタンを順番にクリックします。

すると、クリックしたボタンが下に追加されます。

後は、「プレビュー&コードを取得する」をクリックします。

SNSボタンの並び順を変えたい場合は、ドラッグ＆ドロップで変えることが出来ます。

「プレビュー&コードを取得する」で表示されたコードを、自分のブログでSNSボタンを表示させたい箇所にコピー&ペーストするだけです。

はてなブログなら、記事上や記事下にコピーしたコードを貼るのがいいかと思います。

忍者おまとめボタンにはそれだけツイートされたかなどの解析機能が初期状態で有効になっています。

しかし、この機能が有効になっているとツイートボタンが押された際のリンクURLに問題が発生します。

それが下の画像の黄色部分です。リンクURLの後ろに空白なくハッシュタグが埋め込まれています。このハッシュタグが解析機能用のタグになっています。

忍者おまとめボタンでツイッターのリンクにハッシュタグ

なので、私は解析機能を無効にしています。

解析機能を無効にするには、作成したボタンの解析列にある「解析画面」というところにマウスポインターを持って行くと表示される「変更」というボタンをクリックするだけです。

これまで、オリジナルデザインのSNSボタンをブログに設置する場合は、スタイルシートなどもいじる必要がありましたが、「忍者おまとめボタン」なら取得したコードを、ボタンを表示させたい場所にコピー＆ペーストで貼り付けるだけでおしゃれなSNSボタンが設置できます。

レスポンシブ対応されているのでスマホでもデザインが崩れることなく表示されるので一度試してみてはどうでしょうか。