はてなブログにオーバーレイのソーシャルボタンをスマホサイトに設置する方法【忍者おまとめボタン編】

オーバーレイのソーシャルボタンって？

上記のアニメーションは今回ご紹介させていただく、忍者おまとめボタンさんより引用させていただきました。

オーバーレイを簡単にいうと、webコンテンツ上に覆いかさばるように表示させる方法のことで、オーバーレイのコンテンツの多くは画面スクロールに追従したり、縮小拡大などの動作をすることが多いです。

で、今回ご紹介させていただくのは、そのオーバーレイのソーシャルボタンをスマホサイトに設置する方法。

・たまにwebサイトで見かけるけど、実際どうやって設置するのかがわからない。

・はてなブログ初心者だから不安。

・どうせ面倒なんでしょ？

いいえ、そんなことありません。

むしろ簡単すぎて、びっくりするほどです。

ちなみにうまく設置できるとこんな感じに仕上がります。

それでは、オーバーレイのソーシャルボタンの作り方から説明していきましょう。

忍者おまとめボタンを使ったソーシャルボタンの作成方法

1.まずは忍者おまとめボタンで作成したいデザインを選択してください。

2.設置するwebサイトの種類を選んでください。

今回ははてなブログ用に作成するソーシャルボタンなので、「その他のブログ」を選択します。

3.ソーシャルボタンの設定をしてください。

スマートフォン表示：オーバーレイ

表示位置：下

表示方法：上スクロール時

アニメーション：スライドイン

画面下からの高さ：0px

を選択すると、ソーシャルボタン用のスクリプトコードが自動で生成されます。

※もちろん、サイト毎に適性があると思いますので、上記をカスタマイズしてご利用ください。

4.ボタンの種類を選ぶこともできます。

「オーバーレイボタンの編集」より、設置したいソーシャルボタンの種類・デザインを再調整することが可能です。

これでソーシャルボタンの作成は完了です。次にオーバーレイのソーシャルボタンの設置方法をご説明します。

はてなブログへのソーシャルボタンの設置方法

デザイン＞スマートフォン＞フッタに生成されたスクリプトコードを張り付ければ、設置完了です。

こちらはこのブログで設置しているものと同じパターンになりますが、上から表示させたい、アニメーションの変更したい等の要望がある方は、忍者おまとめボタンの管理画面より、コードの修正を行って張り替えればOKです。

ね？びっくりするぐらい簡単ですよね？！

まだオーバーレイのソーシャルボタンの設置を検討しているはてなブロガーの方、忍者おまとめボタンを利用した方法はオススメですよー。

そいじゃあ！

▼他にもソーシャルボタン関連の記事書いてます。