画面右下に固定されたバナーリスト。スクリプトで実現しています。

　当ブログでは、SNSの共有ボタンと
ブログランキン部のバナーを表示させています。
スクロールしても固定されていますね。

スクロール固定の部分にGoogleAdSense広告を載せるのは禁止なので、
ご注意を。

スクロールしてもSNS共有ボタンは追尾する

参考にしたのはこちらのサイトです。

[blogger]スクロールしてもついてくるソーシャルボタン、bloggerですぐ使えるようにしてみました。
http://www.sunabox.net/2012/06/bloggerblogger_02.html

　まずはテンプレート編集へ。

＜/body＞の直前に、
以下のコードを追加します。

<b:if cond='data:blog.isMobile'>
<b:else/>
<ul id='social_box'>

<li>まいど☆<br/>
<a href='http://ここにバナーURL></li><br/>

<li>こっちも☆<br/>
<a href='http://ここにバナーURL></li><br/>

<li><a class='twitter-share-button' data-count='vertical' data-via='ここにアカウント名' href='https://twitter.com/share'>Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></li>

<li><div class='g-plusone' data-size='tall'/>
<script type='text/javascript'>
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script></li>
</ul>
</b:if>

　そして、CSS入力欄に以下を追加します。

#social_box{
font-size: 14px;
background:#c8e3bf;
border:1px solid #664400;
width:90px;
padding:20px 1px;
text-align:center;
position:fixed;
bottom:50px;right:10px;
list-style-type:none;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
z-index: 10;
}

最後の

z-index: 10;

ですが、これは当ブログだけのものなので
削除して頂いても大丈夫です。

　ようは、他のコンテンツより上に表示させてねという指示です。

z-index: 1～9;

が当ブログにはあって、
それよりも、このSNSバナー類を上にして欲しくて、
あえて追加しています。

　真ん中らへんにある

position:fixed;

は、スクロールしてもついてくるようにする指示なので、
これはそのままにしてください。

いかなるコンテンツもアドセンス広告に重ならないように

　また、注意点としては、
他の位置に貼り付けている
GoogleAdSenseの広告の上に重ならない事です。

　ポリシー違反になるので、
絶対に重ならないように注意しましょう。

GoogleAdSenseはとにかく慎重に扱いましょう。

　特にモバイル表示では重なってしまいやすいので、
いっそ非表示にしています。

　そのコードがこちらですね。

<b:if cond='data:blog.isMobile'>
<b:else/>
ここにsocial_boxコンテンツ
</b:if>

　モバイルでは何も入力せず、
それ以外（PC）では
social_boxコンテンツを指定。

という意味です。

ユーザビリティに配慮する

　多くのブログで実装されている機能ですね。
あった方が共有などはされやすいと思います。

ただ、ユーザーがどう思うか、という点では悩むところです。

ちょっと邪魔かな？と思う時もありますね。

　なので、なるべく邪魔にならない位置にスクロール固定する
ようにしたいものです。

肝心なのは、自分が見て邪魔だと思う位置は、
ユーザーも邪魔に思っている可能性が高い事。

これを理解しておく必要があります。

　仲良しのブロガーさんだったら、
もっとこうした方が良いよ、などとアドバイスしてくれる事もあります。

　少なくとも、

「この位置は変えたほうがいい。見にくい、または、邪魔になっている。」

と指摘された場合は、
従った方がいいです。

　言ってくれる方はほんの一握りなので、
ほとんどのユーザーが我慢している事かもしれませんよ。

あとは広告の配置など、随時見なおして
見やすいサイトにしましょう！

　当ブログ内の情報は、
全ての方に応用できるとは限りません。

必ずテンプレートはバックアップを取っておいて下さいね。

また、ご利用は自己責任でお願い致します。

ラビットしま子は美容ライターであり、
サイト制作のプロではありません。

個別のカスタマイズについてのご相談は、
乗ってあげたいけど、乗れません。（わからんから）

スポンサードリンク

ページ

2015年6月1日