これはGoogleAdSenseでは禁止されています。
絶対ダメですね。
なので、ラベル一覧や、SNSのバナー、
他の広告等を固定します。
なるべくサイトにマッチする色やバナー方が、
不快感がなくていい感じです。
サイドバー固定コンテンツ
こちらは色々なサイトで紹介されています。
基本的にどれを使っても出来ると思うのですが、
今回参考にさせて頂いたサイトがこちら。
MBA-HACK｜サイドバーにスクロールしても付いてくるガジェットを追加
こちらに書いてある通りにすれば、
ほぼ大丈夫だと思います。
他にも色々なカスタマイズが載ってるので
とても参考になります。
ちなみに、他のサイトでも使えると思います。
気になる方は試してみてくださいね。
では、はじめましょう。
まずは
</head>の上に
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" />を追加。
これでjQueryが読み込めるようになります。
既に入力してあるサイトであれば不要ですね。
既にあるのか、ないのか、
よくわからなかったら、
一旦このコードを入力しないで
試してみても良いです。
うまく作動していればOK。
作動しなければ、上記コードを指定通り
追加しましょう。
このすぐ下に、
上記サイトの通り、
<script>
$(function(){
$("#fixed-box").hide();
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 4000) {
$('#fixed-box').slideDown(100);
} else {
$('#fixed-box').slideUp(100);
}
});
});
});
</script>
を追加。
このコードは必ず追加します。
このコードで、サイドバーに固定するという指示を出しています。
数字の4000のところは、
ページの一番上からの長さです。
数字が増えるほど、
たくさんスクロールしないといけなくて、
逆に数字が小さいほど、
ちょこっとスクロールするだけで表示されるようになります。
各々変えましょう。
さらに、CSSも入力。
#fixed-box{
display: none;
position: fixed;
top: 10px;
z-index: 0;
}
を追加します。
fixed-boxという名前がつけられていますね。
あと、追加で、
.footer-outer {
に
position: relative;
z-index: 1;
を追加しました。
.footer-outer {
はもともとCSS内にあります。
そこを探して、
他の指示と並べて
position: relative;
z-index: 1;
を追加するといいです。
意味は、フッターの方が、
fixed-boxよりも上に表示されるという事です。
フッターの上に今回のコンテンツが来たら邪魔なので、
そう指定しています。
HTML入力しましょう
あとは、
固定させたいコンテンツを
<div id='fixed-box'>
固定させたいコンテンツ
</div>
で指定すればＯＫです。
指定したコンテンツが、スクロールすると固定されるというわけです。
サイドバー一番下の広告（GoogleAdSense以外のもの）を
固定したい時は、
レイアウト→
ウィジェットの追加→
HTML/JavaScript をセレクト→
します。
通常通り、表示させるコンテンツコードを入力。
その後に、
<div id='fixed-box'>
固定させたいコンテンツ
</div>
を追加。
つまりこうなります。
<a コンテンツのHTMLコード/>
<div id='fixed-box'>
<a コンテンツのHTMLコード/>
</div>
<a コンテンツのHTMLコード/>を二回記入。
これで、ページトップから下にさがる時、
<a コンテンツのHTMLコード/>が通常表示されつつ、
サイドバーの一番下までスクロールしたら、
そこに<a コンテンツのHTMLコード/>
が固定される。
という仕組みです。
当ブログ内の情報は、
全ての方に応用できるとは限りません。
必ずテンプレートはバックアップを取っておいて下さいね。
また、ご利用は自己責任でお願い致します。
ラビットしま子は美容ライターであり、
サイト制作のプロではありません。
個別のカスタマイズについてのご相談は、
乗ってあげたいけど、乗れません。（わからんから）
スポンサードリンク