【Web制作】人気記事一覧をサイドバー固定して自動追尾する方法

最近よく見かけるブログでのサイドバーの自動追尾（スクロールを固定）。ブログ運営側としてはサイドバーを空白にしなくて良いので効率化をはかれるし、見てほしい記事をアピールできて便利です。その設置方法を解説します。

読者の立場から考えると探している関連記事や人気記事がすぐ見つかって便利なこともあります。しかし広告やソーシャルボタンばかりのアピールは好まない人もいるので、やりすぎには注意したいところです。

ゆめぴょんです。こんちはっ(^^)/

この自動追尾も標準になりつつありますね。海外のサイトでもよく見かけます。発祥はアメリカでしょうけど。私も最初は違和感がありました。ブログ側も控えめなのが多かったけど、最近は記事に重ねるのも増えていますね。

自動追尾（固定）サイドバーのメリット
自動追尾（固定）サイドバーのデメリット
自動追尾（固定スクロール）の設置方法
まとめ：今日のゆめぴょんの知恵

自動追尾（固定）サイドバーのメリット

運営側は、おすすめ記事をアピールできる
運営側は、サイドバーを有効に使える
運営側は、訪問別の閲覧数やクリック率を上げられる
読者側は、探したい記事などを見つけやすくなる。雑誌感覚

自動追尾（固定）サイドバーのデメリット

読者側は、目ざわりで好まない人もいる
読者側は、スマホやブラウザによっては、ずれることがある

上であげたのは私の主観で思いついた点のみです。運営側にはメリットが多いけど、読者側にはデメリットがあることも理解しておくことが必要だと思っています。

人気の大御所系ブログでは利用しているところが多いです。一方で大手メディア系はあまり利用していません。私のも含めて個人系ブログは多用しています。PV（閲覧数）が少ないといろいろ試せるのはメリットですね(^^ゞ

自動追尾（固定スクロール）の設置方法

まずは「Jquery」のスクリプトファイル（JavaScript）を利用するため、次のように1行を追加してください。WordPressの場合はテーマや利用プラグインによっては使用している可能性が高いので設置前にソースを検索して、ない場合のみ追加してください。

[html]
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
[/html]

ちなみに「jquery/1.10.2/」の数値部分はバージョンを表しています。2013年8月時点の最新バージョンです。これ以降なら使えるはずです。1.9.*を利用している場合もそのままで問題ありません。2.*系でも大丈夫だと思うけど未確認です。

設置場所の理想はフッターの後で</body>の直前くらいです。WordPressに設置したい初心者の場合は、管理画面から「テーマ」→「テーマ編集」で「footer.php」に追記することになります。

「footer.php」ファイルはWordPressで最も重要なファイルの1つなので、修正を加える前には必ずバックアップをとってくださいね。そして問題が起こったらすぐに元に戻してください。修正は自己責任でお願いします。

次に下のソースコードを追記してください。場所は外部ファイルでもどこでもいいですが、迷うなら先ほどのJqueryの直後や</body>の直前がいいでしょう。Jqueryを先にしてください。

設置前に必ず、4行目の「#id」の値を「固定したいパーツのid値」に修正してください。私の場合は人気記事の「id=”popular_post”」だとしたら「#popular_post」にします。class値の場合は「#」を「.」（半角ドット）にしてください。

[javascript]
<script>
//スクロール固定（自動追尾）
$(function(){
var target = $("#id");
var targetTop = target.offset().top;
$(window).scroll(function () {
if( $(window).scrollTop() > targetTop) {
target.css({position:"fixed", top: 0});
} else {
target.css({position:"static"});
}
});
});
</script>
[/javascript]

CSSやテーマによっては固定したパーツの横幅が乱れることがあります。その場合は8行目「top: 0」の直後に「,width:”300px”」など横幅の大きさを追記してください。