2015年5月14日

スクロールすると、サイドバーに固定されるコンテンツを指定したい。

スポンサードリンク

 あらかじめ言っておきますと、
これは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(){
$(&quot;#fixed-box&quot;).hide();
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() &gt; 4000) {
$(&#39;#fixed-box&#39;).slideDown(100);
} else {
$(&#39;#fixed-box&#39;).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>

で指定すればOKです。

指定したコンテンツが、スクロールすると固定されるというわけです。


 サイドバー一番下の広告(GoogleAdSense以外のもの)を
固定したい時は、

レイアウト→

ウィジェットの追加→

HTML/JavaScript をセレクト→

します。


 通常通り、表示させるコンテンツコードを入力。
その後に、

<div id='fixed-box'>
固定させたいコンテンツ
</div>

を追加。


つまりこうなります。


<a  コンテンツのHTMLコード/>

<div id='fixed-box'>
<a  コンテンツのHTMLコード/>
</div>


<a  コンテンツのHTMLコード/>を二回記入。
これで、ページトップから下にさがる時、
<a  コンテンツのHTMLコード/>が通常表示されつつ、

サイドバーの一番下までスクロールしたら、
そこに<a  コンテンツのHTMLコード/>

が固定される。
という仕組みです。



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

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


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

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

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


スポンサードリンク