ブログを書いている皆さん！
「ブログの公式SNSボタンってダサい」と思いませんか？
正直なところ、無料ブログのSNSボタンってダサいとこが多いんですよね。
更にダサいだけでなく重いというダブルコンボになっていることが多いんです。そのまま利用している方も多いと思いますが、SNSボタンのカスタマイズは行った方がデザインもカッコ良くなるし、軽くなるのでメリットだらけですよ。
「でもSNSボタンのカスタマイズって難しそう」
「難しいことなく簡単にできる方法はないの？」
そんなあなたにオススメしたいのが「忍者ツールズ」の「忍者おまとめボタン」です。
忍者おまとめボタンは、ブログに貼り付けることができる「SNSボタンのタグを発行」することができるサービスです。
↑は一例ですが、他にも色んな種類があります。難しい操作が一切なく、直感的にデザインをカスタマイズすることが可能です。
今回はSNSボタンカスタマイズを中心に解説させていただきます。無料ブログサービスに応用が効きますので参考にしてみてください。
それでは早速、忍者おまとめボタンの設置を実践してみましょう♪
目次
忍者ツールズに登録を行う
まずは忍者ツールズの公式ホームページ、忍者おまとめボタン作成の画面にアクセスしましょう。
画面右上にある「忍者おまとめボタンを新規作成」からボタンの生成に入れます。
すでに忍者ツールズのアカウントをお持ちの方はログインを行うだけですが、まだアカウントを持っていない方は新規に作成する必要があります。
アカウントの作成はメールアドレスの登録とIDとPASSを決めるだけで、特別に個人情報を入力する必要はありません。
メールアドレスを登録後、メールボックスに届いたメールをクリック。そのあとはIDとPASSを設定してください。
登録が終わったら、実際に忍者ツールズの忍者おまとめボタンの作成に入りましょう。
忍者おまとめボタンの作成方法と設置のやり方
新規作成のボタンを押した後、設置するWEBサイトを選びます。
自分が該当するブログサービスを選択のうえ進んでください。
はてなブログの記載がないのですが、どうやら環境によっては一部表示されない不具合があるようです。はてなブログのアプリ上ではブクマを行うことができません。
candoit様のブログで知りました…。
なのでWebサイト一覧にないブログサービスには使わない方が良いかもしれないですね。はてなブログには向いていないようで残念…。また、広告ブロックしている方には表示されない可能性もあるようです。
上記のような欠点があるので、導入する際は良く考えてから行ってみてください。
それでも忍者ツールズを使いたいという方は、気を取り直してセットのスタイルを選んでみましょう。
選択後、おすすめセットのスタイルを選ぶことができます。これだけでもそれなりに種類がありますが、「自分でカスタマイズして選ぶ」ことも可能ですよ。
今回はデフォルトの中から選んでみましょう。
一番下のデザインにチェックを入れて、次へを押して進んでみます。すると「作成しました。」と表示されて、画面下にタグが自動で発行されます。
これでボタンの生成が完了したので、あとは「コードをコピーする」でタグのコピーを行い、ブログの方にタグを貼り付けるだけで完成です。
はてなブログにタグを貼り付ける方法
向いてないかもと言いましたが、それでもはてなブログで使ってみたいぜ！って方のために、タグの貼り付け方法も説明しておきます。
管理画面のダッシュボードからデザインをクリックします。
デザインの中から「スパナのアイコン」をクリックして、次に記事を選んでください。
まず始めに、デフォルトのソーシャルパーツのチェックは全て外します。
チェックを入れたままにすると、デフォルトのボタンと、忍者おまとめボタンの両方が表示されてしまうので重くなってしまいます。
次に「記事上下のカスタマイズ」という部分があります。
ここに忍者おまとめボタンで作成したタグを貼り付けると、カスタマイズを行ったSNSボタンが表示されるようになりますよ。
上下両方に設置するかは好みだと思いますが、記事下には必ず設置を行ったほうが良いです。貼り付けた後は忘れずに保存を行ってくださいね。
他の無料ブログサービスへの貼り付け方法は、忍者おまとめボタンのヘルプを参照して見てください。
これで設置方法の説明は終わりです。
はじめる前は難しく感じていたと思いますが、実際やってみると簡単に思えませんでしたか？ 次はそんなあなたのために、ボタンを細かくカスタマイズする方法もご説明したいと思います。
忍者おまとめボタンを細かくカスタマイズしてみよう
自分でSNSボタンのカスタマイズを行う
デフォルトのままでは物足りないという方は、細かくカスタマイズしてみましょう。
ボタンを生成する際に、一番下にある「自分でカスタマイズをして選ぶ」を選択してください。
たくさんの種類の中から任意で選ぶことができます。
中には忍者ツールズによるオリジナルデザインのアイコンもありますよ。気に入ったアイコンを見つけたらクリックして「+追加」を押します。
気に入ったアイコンをクリックするだけで、画面下の「表示するボタン」に追加されていきます。追加したけどやっぱり削除したい！となった場合は、下の表示するボタンにカーソルを合わせて「×(削除)」を押して消すだけです。
表示するボタンの種類を決めたら、最後に「プレビュー＆コードを取得する」をクリックして下さい。
カスタマイズしたタグのコードが表示されるので、ブログに貼り付け直せば完了です。
スマートフォン表示の際のカスタマイズを行う
スマートフォンで表示された際、どのようにSNSボタンを表示させるかカスタマイズを行うことができます。
上記は実際に表示される４つの例です。
黒アイコンで画面左に寄せる、右に寄せる、常時表示させる、レスポンシブオーバーレイ表示など、クリックで指定するとタグのコードが自動で書き換えられます。
オーバーレイを選択した場合の表示方法
オーバーレイを選択した場合、まず表示位置を上にするか下にするかを決めます。表示方法は下記の４種類から決定することができます。
- 常時表示：SNSボタンを常に表示する
- 上スクロール時：ページを上に進めた場合のみ表示される
- タグ貼り付け位置：タグを貼り付けた位置が画面内に入ったら表示される
- %指定：ページ全体の長さ１００を基準に、訪問したユーザーが指定した%のエリアまでスクロールすると表示される。
かなり細かい部分まで設定することができますね！
オーバレイ表示に関しては個人の好みが別れる部分だと思うので、設置後、自分のスマートフォンでアクセスを行ってみてから決めると良いですね。
なお、デザインや設定を変更した場合は、タグを貼り付け直す必要があるので忘れないでください。
忍者おまとめボタンのメリットとデメリット･まとめ
最後におさらいとして、メリットやデメリットに関してまとめてみます。
忍者おまとめボタンのメリットは、導入が簡単なうえに、物足りなくなったら自分でカスタマイズができることです。
コピーして貼り付けるのは一か所だけで済みますし、CSSを特別にいじる必要がないのが初心者には嬉しいですね。
忍者おまとめボタンのデメリットは、忍者ツールズが提供するサービスなので、サービスが停止されたら使えなくなることです。
はてなブログのアプリ上ではブックマークができないなどの不具合や、広告をブロックしている人には表示されない可能性があります…ここが辛いところですね。なお、JavaScriptが動作しないサイトに設置しても表示されませんので注意してください。
忍者ツールズは長く続いているサービスであり、様々な事業を行っている会社なのでサービスが終了する可能性はきわめて低いと思います。
デフォルトのボタンは重いしダサいので、ぜひSNSボタンのカスタマイズを検討して見てくださいね。
最後まで読んでいただきありがとうございました！こちらの関連記事もどうぞ。
