A CAT'S EDEN

ツールや機能の紹介と、ゲームや落語などの趣味について。



【サービス紹介】「忍者おまとめボタン」

こんにちは、発狂ねこです(^ ・∀・^)

今回は、ブログに設置するSNSボタンの見栄えを合わせるサービス「忍者おまとめボタン」を紹介いたします。

 

f:id:hakkyooneko:20171002164504j:plain

どんな風にまとまるの?

私は「はてなブログ」というブログサービスを使ってこのブログを書いています。

はてなブログでは、[デザイン]→[カスタマイズ]→[記事]の項目から設定画面が開き、プルダウンボタンにチェックを入れることで各種SNSシェアボタンを表示させることができます。

f:id:hakkyooneko:20171002154346p:plain

ただこれにチェックを入れただけですと、実際の記事の下の表示は下記のようになります。

f:id:hakkyooneko:20171002154457p:plain

大きさや形がバラバラで、視認性が悪くストレスになりますね( ;∀;)

「忍者おまとめボタン」というサービスを使うことで、ボタンを整えて表示させることができます。

下記は一例です。

f:id:hakkyooneko:20171002154728p:plain

このように、大きさや形をまとめて表示させることができます。

それでは手順を見ていきましょう((((^ ・∀・^)

 

手順

「忍者おまとめボタン」からコードを作成

 まず、下記URLから「忍者おまとめボタン」のページに入ります。

http://www.ninja.co.jp/omatome/

 

表示されるページで「選択したセットで作成」「自分でSNSボタンを選んで作成」のどちらかを選び、その後に遷移するページで設置するブログを選択しましょう。※「忍者ツールズ」サービスへの登録が必要です。

f:id:hakkyooneko:20171002160939p:plain

 

「自分でSNSボタンを選んで作成」を選択した場合は下記の画面に移り、設置するボタンを自分で選択することができます。

SNSボタン下の「+追加」を押すと、左下の「表示するボタン」に追加されます。

「表示するボタン」内ではボタンを選択してドラッグ&ドロップすることで位置移動が可能です。

設置するボタンを選択を終えたら、右下の「プレビュー&コードを取得する」を押して下さい。

f:id:hakkyooneko:20171002161133p:plain

 

「忍者おまとめボタン」トップ画面から「選択したセットで作成」した場合、もしくは「自分でSNSボタンを選んで作成」を選び「プレビュー&コードを取得する」を押した場合、「プレビュー画面」に遷移します。

この画面の下部に設置するボタンのコードが生成されていますので、このコードをブログのコード入力場所にコピペしていきます。

f:id:hakkyooneko:20171002162145p:plain

 

コードをブログに設置 

※ここでは私は使用している「はてなブログ」について説明していきます。他のブログサービスをお使いの方は下記URLからご確認ください。

http://www.ninja.co.jp/omatome/help/faq/5394/

 

「はてなブログ」の場合について説明します。

[デザイン]→[カスタマイズ]→[記事]→[記事下]のスペースに、生成されたコードをコピペしてください。

一般的な記事の下に設置する前提で進めていますが、記事上にも表示させたい場合は[記事上]にも同様にコピペしてください。

なお、その際にプルダウンボタンでチェックを入れているSNSボタンは全てチェックを外して下さい(ボタンの重複表示を防ぐため)。

f:id:hakkyooneko:20171002163534p:plain

 

これでブログにSNSボタンが設置されます。

f:id:hakkyooneko:20171002154728p:plain

 

上記のボタンの並びを見ていると、それぞれのボタンがカラフルなのでパズドラを思い出しますね!

それではお後がよろしいようで((((^ ・∀・^)