title

最近、色々なサイトで見かけるサイドバーがスクロールしてもついてくる実装を私のHPでもやってみました。今回はこの方法を紹介したいと思います。jQueryを使っているのですが、驚くほど少ないコードで実装ができます。是非、あなたのブログにも利用して見ませんか？

jQueryを使う

色々調べてみたところ、やり方は何種類かあるみたいなのですが、一番簡単そうな方法を今回選びました。
その方法はjQueryを使った方法です。

必要なもの

まずは、jQueryとそのプラグインである「jquery.ex-flex-fixed」を使います。
各々を書きサイトからダウンロードします。
jQuery

cyokodog/jquery.ex-flex-fixed · GitHub

実装

まずはFFTPを使って、wordpressのテーマの中にダウンロードしたファイルを入れます。

次にheaderファイルに以下の記載を行います。

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js//jquery.exflexfixed-0.3.0.js"></script>

1 2	<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.9.0.min.js"></script> <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js//jquery.exflexfixed-0.3.0.js"></script>

私はjsというフォルダの中に入れているのでこのような記載になっています。

次にjQueryのコードを書きます。

<script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js//jquery.exflexfixed-0.3.0.js"></script>


<script>
jQuery(function($){
$('div#scrollposition').exFlexFixed({
container : 'body'
});
});
</script>

jQuery(function($){

$('div#scrollposition').exFlexFixed({

container : 'body'

});

</script>

たったこんだけのコードだけでいいのでとても簡単です。
div#scrollpositionの所に移動させたいタグ名を
bodyの所にはあなたのサイトのメインコンテンツのタグを指定してくだだい。

個人的にこのメインコンテンツになるところなのかが難しかったです。色々とタグを変えて試してください。

注意点

この固定されたサイドバーにGoogleのadsenseを掲載すると規約違反になるみたいですので注意が必要です。
広告以外のモノを掲載したほうがいいですね。

私がこのサイドバーにしたかった目的はサイト内の回遊率を上げることです。
絶賛1.2ぐらいしか「訪問別ページビュー」がないのでこれが改善出来ればと思いました。

[参考にしたサイト]