設置するのは忍者おまとめボタンで、選べるボタンの種類は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などブラウザによって表示位置が異なるので注意が必要です。
スポンサーリンク
