LIFE LOG

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

LIFE LOGS

スマホアプリゲーム、pcsoft、Business、レビュー、ライフ、まとめ、ネットで稼ぐ他、役立つ情報を記録するLOG

超簡単!ブログのSNSボタンカスタマイズは「忍者おまとめボタン」がおすすめ!登録と使い方

SNSボタンカスタマイズの説明

ブログを書いている皆さん!

「ブログの公式SNSボタンってダサい」と思いませんか?

正直なところ、無料ブログのSNSボタンってダサいとこが多いんですよね。  

更にダサいだけでなく重いというダブルコンボになっていることが多いんです。そのまま利用している方も多いと思いますが、SNSボタンのカスタマイズは行った方がデザインもカッコ良くなるし、軽くなるのでメリットだらけですよ。

「でもSNSボタンのカスタマイズって難しそう」

「難しいことなく簡単にできる方法はないの?」

そんなあなたにオススメしたいのが「忍者ツールズ」の「忍者おまとめボタン」です。

忍者おまとめボタンは、ブログに貼り付けることができる「SNSボタンのタグを発行」することができるサービスです。

忍者おまとめボタンを利用した例

↑は一例ですが、他にも色んな種類があります。難しい操作が一切なく、直感的にデザインをカスタマイズすることが可能です。

今回はSNSボタンカスタマイズを中心に解説させていただきます。無料ブログサービスに応用が効きますので参考にしてみてください。

それでは早速、忍者おまとめボタンの設置を実践してみましょう♪

忍者ツールズに登録を行う

www.ninja.co.jp

まずは忍者ツールズの公式ホームページ、忍者おまとめボタン作成の画面にアクセスしましょう。

忍者ツールズおまとめボタン作成

画面右上にある「忍者おまとめボタンを新規作成」からボタンの生成に入れます。

すでに忍者ツールズのアカウントをお持ちの方はログインを行うだけですが、まだアカウントを持っていない方は新規に作成する必要があります。

ログイン、登録画面

アカウントの作成はメールアドレスの登録とIDとPASSを決めるだけで、特別に個人情報を入力する必要はありません。

メールアドレスの登録、IDとPASSを決める

メールアドレスを登録後、メールボックスに届いたメールをクリック。そのあとはIDとPASSを設定してください。

登録が終わったら、実際に忍者ツールズの忍者おまとめボタンの作成に入りましょう。 

忍者おまとめボタンの作成方法と設置のやり方

新規作成のボタンを押した後、設置するWEBサイトを選びます。

新規作成のボタンを押した後、該当するブログサービスを選択

自分が該当するブログサービスを選択のうえ進んでください。

はてなブログの記載がないのですが、どうやら環境によっては一部表示されない不具合があるようです。はてなブログのアプリ上ではブクマを行うことができません。

candoit.hatenablog.com

candoit様のブログで知りました…。

なのでWebサイト一覧にないブログサービスには使わない方が良いかもしれないですね。はてなブログには向いていないようです、残念…。また、広告ブロックしている方には表示されない可能性もあるようです。

気を取り直してセットのスタイルを選んでみましょう。

おすすめセットのスタイル一覧

選択後、おすすめセットのスタイルを選ぶことができます。これだけでもそれなりに種類がありますが、「自分でカスタマイズして選ぶ」ことも可能ですよ。

今回はデフォルトの中から選んでみましょう。

デフォルトを選択して進む

一番下のデザインにチェックを入れて、次へを押して進んでみます。すると「作成しました。」と表示されて、画面下にタグが自動で発行されます。

ボタン生成完了

これでボタンの生成が完了したので、あとは「コードをコピーする」でタグのコピーを行い、ブログの方にタグを貼り付けるだけで完成です。

はてなブログにタグを貼り付ける方法

向いてないかもと言いましたが、それでもはてなブログで使ってみたいぜ!って方のために、タグの貼り付け方法も説明しておきます。

管理画面のダッシュボードからデザインをクリックします。

 

デザインの中から「スパナのアイコン」をクリックして、次に記事を選んでください。

まず始めに、デフォルトのソーシャルパーツのチェックは全て外します。

チェックを入れたままにすると、デフォルトのボタンと、忍者おまとめボタンの両方が表示されてしまうので重くなってしまいます。

次に「記事上下のカスタマイズ」という部分があります。

ここに忍者おまとめボタンで作成したタグを貼り付けると、カスタマイズを行ったSNSボタンが表示されるようになりますよ。

上下両方に設置するかは好みだと思いますが、記事下には必ず設置を行ったほうが良いです。貼り付けた後は忘れずに保存を行ってくださいね。

他の無料ブログサービスへの貼り付け方法は、忍者おまとめボタンのヘルプを参照して見てください。

設置方法について|ヘルプ|忍者おまとめボタン 

これで設置方法の説明は終わりです。

はじめる前は難しく感じていたと思いますが、実際やってみると簡単に思えませんでしたか? 次はそんなあなたのために、ボタンを細かくカスタマイズする方法もご説明したいと思います♪

忍者おまとめボタンを細かくカスタマイズしてみよう

自分でSNSボタンのカスタマイズを行う

デフォルトのままでは物足りないという方は、細かくカスタマイズしてみましょう。

カスタマイズをして選ぶ

ボタンを生成する際に、一番下にある「自分でカスタマイズをして選ぶ」を選択してください。

忍者おまとめボタン一覧

たくさんの種類の中から任意で選ぶことができます。

忍者おまとめオリジナルボタン

中には忍者ツールズによるオリジナルデザインのアイコンもありますよ。気に入ったアイコンを見つけたらクリックして「+追加」を押します。

忍者おまとめ、表示されるボタン

気に入ったアイコンをクリックするだけで、画面下の「表示するボタン」に追加されていきます。追加したけどやっぱり削除したい!となった場合は、下の表示するボタンにカーソルを合わせて「×(削除)」を押して消すだけです。

表示するボタンの種類を決めたら、最後に「プレビュー&コードを取得する」をクリックして下さい。

コード取得画面

カスタマイズしたタグのコードが表示されるので、ブログに貼り付け直せば完了です。

スマートフォン表示の際のカスタマイズを行う

スマートフォンで表示された際、どのようにSNSボタンを表示させるかカスタマイズを行うことができます。

上記は実際に表示される4つの例です。

黒アイコンで画面左に寄せる、右に寄せる、常時表示させる、レスポンシブオーバーレイ表示など、クリックで指定するとタグのコードが自動で書き換えられます。

オーバーレイを選択した場合の表示方法

オーバーレイ表示方法は4種類

オーバーレイを選択した場合、まず表示位置を上にするか下にするかを決めます。表示方法は下記の4種類から決定することができます。

  • 常時表示:SNSボタンを常に表示する
  • 上スクロール時:ページを上に進めた場合のみ表示される
  • タグ貼り付け位置:タグを貼り付けた位置が画面内に入ったら表示される
  • %指定:ページ全体の長さ100を基準に、訪問したユーザーが指定した%のエリアまでスクロールすると表示される。

かなり細かい部分まで設定することができますね!

オーバレイ表示に関しては個人の好みが別れる部分だと思うので、設置後、自分のスマートフォンでアクセスを行ってみてから決めると良いですね。

なお、デザインや設定を変更した場合は、タグを貼り付け直す必要があるので忘れないでください。

忍者おまとめボタンのメリットとデメリット・まとめ

最後におさらいとして、メリットやデメリットに関してまとめてみます。

忍者おまとめボタンのメリットは、導入が簡単なうえに、物足りなくなったら自分でカスタマイズができることです。

コピーして貼り付けるのは一か所だけで済みますし、CSSを特別にいじる必要がないのが初心者には嬉しいですね。

忍者おまとめボタンのデメリットは、忍者ツールズが提供するサービスなので、サービスが停止されたら使えなくなることです。

はてなブログのアプリ上ではブックマークができないなどの不具合や、広告をブロックしている人には表示されない可能性があります…ここが辛いところですね。なお、JavaScriptが動作しないサイトに設置しても表示されませんので注意してください。

忍者ツールズは長く続いているサービスであり、様々な事業を行っている会社なのでサービスが終了する可能性はきわめて低いと思います。

デフォルトのボタンは重いしダサいので、ぜひSNSボタンのカスタマイズを検討して見てくださいね。

最後まで読んでいただきありがとうございました!こちらの関連記事もどうぞ♪

関連記事

凡人のブログ運営3カ月目の記録をさらす!アクセス数やPV数も公開

お名前.com「独自ドメイン取得方法」と「はてなブログへの反映」方法

売れたら困る!沈黙のWebライティングをレビュー、ブロガーにとって有益過ぎるおすすめ本