読者です 読者をやめる 読者になる 読者になる

Zバッファ

iPhoneやAndroidスマホなど家電ガジェット系レビュー記事中心。秘境スポットなどの旅行ネタやふるさと納税などの節約ネタ、投資ネタなど幅広く解説しているライフハックブログ。

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

スポンサーリンク

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

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

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

  • FC2ブログ
  • ライブドアブログ
  • Seesaaブログ
  • Blogger
  • JUGEMブログ
  • Tumblr
  • WordPress
  • Movable Type

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

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

f:id:Uranff:20151103192528j:plain

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

忍者おまとめボタン

です。

忍者おまとめボタンを利用手順

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

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

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

f:id:Uranff:20151103191417j:plain

 

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

f:id:Uranff:20151103191447j:plain

利用しているブログサービスを選択

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

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

f:id:Uranff:20151103193438j:plain

レスポンシブSNSボタンを選択

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

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

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

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

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

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

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

レスポンシブSNSボタンのコードを取得する

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

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

f:id:Uranff:20151103192126j:plain

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

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

忍者おまとめボタン利用する上での注意点

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

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

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

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

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

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

f:id:Uranff:20151103194036j:plain

忍者おまとめボタンを利用するメリット

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

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