Shine Blog

ブログと趣味と音楽と。

スマホデザインにSNSボタン配置してますか?忍者おまとめボタンの導入方法

SNS

 

先日メインブログで初めて100を超えるSNSからの流入がありました。

 

furimamercari.hatenablog.jp

 

Facebookで140ほどのいいね!がつき、Twitterのシェアが10ほどで流入が140程度でしたので、大きな流入ではありませんでしたが、普段と違う訪問者にブログを見てもらえる機会はあまりないので、SNSボタンの重要性を感じました。

 

 

はてなブログでのSNSボタンの配置

はてなブログでは

「デザイン」>「カスタマイズ」>「記事」

から記事下に表示するソーシャルパーツを選ぶことができます。

 

しかし、デザインをいじることができません。

 

そこでHTMLでソーシャルボタンの記述をしたりするわけですが

CSSのカスタマイズに苦戦している人も多いのではないでしょうか。

 

そんな人におすすめなのが、私も利用している

忍者おまとめボタンです。

 

 

簡単に配置できる「忍者おまとめボタン」

omatome.shinobi.jp

 

これは、忍者ツールズが提供していているツールで

利用には会員登録が必要ですが、サービスは無料で利用できます。

 

最近のアップデートで「LINE友だち追加」に対応するなど

幅広いSNSボタンが用意されているので、使い勝手が良いです。

 

 

忍者おまとめボタンの使い方

まずリンクから会員登録を済ませてください。

 

 

1.新規ボタンを追加するをクリック

画像1

 

 

2.配置するブログの種類を選択する

画像2

 

 

3.配置するボタンのスタイルを選択する

ここではボタンの見た目を選択します。

種類は後から変更できますので、デザインを選び「次へ」をクリックします。

画像3

 

 

4.作成したら一度ホームに戻る

これで作成されましたが、一度ホームに戻ってカスタマイズします。

画像4

 

 

5.ホームから編集をクリック

ホームに戻ると作成されたものが表示されます。

この画面から編集や削除、名前の変更ができます。

画像5

 

 

6.表示するボタンを編集する

この画面で表示する種類を選びます。

手裏剣マークのボタンはクリックすると16種類ほどのシェアボタンが出現するものです。

画像6

編集が終わったら右下の「プレビュー&コードを取得する」をクリックしてください。

 

 

7.表示させるレイアウトを調整する

並びや右寄せなどの調整をします。

スマートフォン表示でオーバーレイなども選べますが、今回は無効を選択しています。

画像7

設定が終わったら下のスクリプトコードをコピーしてください。

 

 

8.自分のブログに表示させる

はてなブログのスマホ画面で説明します。

すでにコードを書き込んでいる方は、必ずバックアップしてから行ってください。

画像8

画像は記事下に表示させる場合ですが、記事上に貼ることもできます。

貼り終えたら変更を保存して完了です。

 

パソコンデザインも同様に貼り付ければ配置できます。

その際はボタンを新たに作成してデザインを変えたり、ボタンの種類を変えるのもよいかもしれません。

 

 

忍者おまとめボタンの利点

設定お疲れ様でした。

これであなたの記事下に、オシャレなSNSボタンが表示されました。

 

このツールは、ホーム画面の「解析画面へ」から

ボタン別のシェア数や、ページ別のシェア数と流入数が閲覧できます。

 

導入も簡単ですし、解析もできるのでおすすめです。

 

以上、忍者おまとめボタンの使い方でした。

是非試してみてください。

 

スポンサーリンク

Copyright © 2016 Shine Blog All rights reserved.