「最近の記事」リンクの行毎に背景色を変更する

本ブログでは3カラムのレイアウトで左サイドバーには 最近の記事 を30件表示しています。閲覧者の利便を考え、目に留まり易い箇所に記事へのリンクを大量に置き、興味のある記事が見出だし易くなるだろうと考えてのレイアウトです。これは姉妹ブログ HamaZoランクチェック！Blog の2011年5月1日姉妹ブログの全体幅の拡張に書いた様に当該ブログをモデルにしてブログ間の統一性を図ろうというものでもあります。

ところが意に反してリンクが長々と同じ状態で続く為に、返って閲覧性の低下を招いているのではないかと感じました。そこで対処法として…

リンクの背景色を上から互い違いに変えてやれば、リンク一つ一つの独立性も保たれ、視認性も高まり、延いては閲覧者の利便に通ずるのではないかと考えました。この考えを実現するには、当然HamaZoからは当該類似機能は提供されていませんから、独自に実装しなければなりません。今回 javascript にて機能実現を図りました。

以下が実装の為の javascript ソースです。ライブラリには jQuery を利用していますので、このスクリプトを読み込む前に jQuery ファイルをHTMLには読み込ませてあります。

jQuery(document).ready(function($) {
  changeLinkColor();
  function changeLinkColor(){
    var a = $("div#links");
    a.find("div.side")
        .css({"padding-left":"0", "padding-right":"0"});
    var s = a.find("div.recententry").find("div.sidebody");
    $.each(s, function(i){
      $(this).css({"padding":"5px", "width":"inherit"});
      if(i%2 == 0){
       $(this).css('background-color','#EFF4FF');
      }
    });
  }
});

上のスクリプトを本ブログに挿入した処、先ずは想定通りの動きをしてくれました。この記事の丁度左側、サイドバーの最上部にあたる位置に、「最近の記事」の背景色が記事リンク毎に上から交互に変更されているのがご覧いただけるでしょうか？なおこのスクリプトは はまぞう（HamaZo）ブログ専用 を想定して記述してあります。

1件のコメント