ゆめぴょんの知恵ゆめぴょんの知恵
サイト制作、WordPressカスタマイズ、無料アプリ紹介など。海外旅行135ヶ国。知識を知恵にするブログ!

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

カルガモ親子。親を追尾

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

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

ゆめぴょん(@yume_pyon)です。こんちはっ!

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

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

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

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

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

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

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

人気記事一覧の自動追尾

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

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

ちなみに「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値の場合は「#」を「.」(半角ドット)にしてください。

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

まとめ:今日のゆめぴょんの知恵

このブログでは現在(2013年8月時点)、カテゴリ別の人気記事を自動追尾(固定)にしています。ちょっとウザク思う人もいるかもしれないけど、画像やフォントサイズを調整して存在感を小さくしているつもりです。

WordPress Popular Postsでカテゴリ別サムネイルつき人気記事一覧!SEO対策にもWordPress Popular Postsでカテゴリ別サムネイルつき人気記事一覧!SEO対策にも

このブログではプラグイン「Popular Post」でサムネイルつき人気記事の一…

iPadでは問題なさそうですが、一部のスマホやブラウザでは乱れることがあるようです。少しつづ手直ししていきながら対応していきます。もし上手く表示されない機種があれば教えていただければ幸いです。

なお今回の記事内容は次のブログも参考にさせていただきました。今回の私の記事では画面上を基準に固定しましたが、下段を基準にする方法も2つめのリンク、prasmで紹介されています。興味ある方は読んでみてください。

[jQuery]画面を一定量スクロールした時にサイドバーなどを固定位置に配置する | OZPAの表4
jQueryでフッターに重ならずに「空いた領域をフルに使い切る追尾型サイドバー」を実装する方法*prasm

次回の記事は「ウェブ制作に役立つチップ」の予定です(^^)。更新を見逃さないためにも、 feedlyの登録をおすすめします(^^)/

ゆめぴょん(@yume_pyon)でした。ばいちゃお! こてっZzz

«前記事:【Web制作】見出し・引用・リストのデザインでサイト好感度アップ!人とGoogleにコピペでOK!スムーススクロールでページ内リンクやトップへ移動!#なしで:次記事»
ページ
↑先頭
ホーム