Bloggerに忍者おまとめボタンを簡単に設置する方法

ブログタイトルの横にスペースがあって、もったいないのでSNSボタンを設置することにしました。

設置するのは忍者おまとめボタンで、選べるボタンの種類はTwitterのツイートボタン、Facebookのいいねボタン、はてブ、ぐぐたすボタンなど全部で100種類以上あります。

完成時の画像はこのようになります。

忍者まとめボタンの作成

まず、http://www.ninja.co.jp/omatome/にアクセスして、画面右上の「新規ユーザー登録」から仮登録をします。
すでに登録済みのかたは、横の「ログイン」から。

新規ユーザー登録をクリックすると、仮登録画面になるので、メールアドレスを入力して「この内容を送信」ボタンをクリックします。

すると、入力したメールアドレスに本登録のURLが記載されたメールが届きます。
本登録のURLをクリックして必要事項を入力し登録を完了させます。

次に、設置するWebサイトでBloggerを選択します。
おすすめセットボタンが表示されるので、好みのセットがあれば選択して「次へ」ボタンをクリックします。

好みのセットがない場合は、「自分でカスタマイズして選ぶ」ボタンをクリックします。

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

ボタンを選択すると下にプレビューが表示されます。
並び順は、ドラッグアンドドロップで変更できるので、ひとまず気に入ったボタンがあったら選択しておきます。
削除もプレビューにマウスを乗せると×ボタン表示されるのでクリックして削除します。

選び終わったら「プレビュー&コードを取得する」ボタンをクリックします。

並び方や表示する位置などが選べるので、好みに合わせて選択します。

できたら、下にスクリプトコードが表示されているので、「コードをコピー」ボタンをクリックして、ブログの表示したい場所に貼り付けたら完了です。

ブログタイトル横に忍者おまとめボタンを設置する方法

レイアウトからガジェットの追加をクリックして、「HTML/JavaScript」を選択します。
そこに、上で取得したスクリプトコードを貼り付けて「保存」ボタンをクリックします。

次に、テンプレートのカスタマイズをします。
上級者向けのCSSを追加で、サイドバーの表示位置を調節します。

調節方法は、Bloggerのサイト内検索をメニューバーに表示する方法の下の方に書いてます。

下のガジェットとの余白の調整は、下記の記述でできます。
/* SNSボタンの位置 */
.ninja_onebutton{
margin: 0px 0px -25px 0px;
}
数字はレイアウトによって適宜変更してください。

IEやGCなどブラウザによって表示位置が異なるので注意が必要です。
スポンサーリンク
スポンサーリンク