Sitefeeds with jQuery

Sitefeeds with jQuery は、RSSを取得して新着情報として出力できるJavaScriptです。

名称
Sitefeeds with jQuery 0.04
配布元
T.P.FIELDS
必要なモジュール
jquery-1.2.6 or later
動作確認済みブラウザ
Mac:Firefox 3.5.7, Safari 4.0.4, Google Chrome, Opera 10.10
Win:IE 7, 8, Firefox 3.5.7, Safari 4.0.4, Google Chrome, Opera 10.10, IE 6(IETester)
ライセンス
Creative Commons License

デモ

設置方法

  1. 読み込むJavaScriptをhead要素内に記述します。
    パスは環境に合わせて変更してください。
    <script type="text/javascript" src="js/jquery.js"></script>
    	<script type="text/javascript" src="js/sitefeeds.js"></script>
    
  2. RSSの内容を表示させたい箇所に以下を記述します。
    <ul id="feedList"></ul>
  3. sitefeeds.js の11行目(ソースの3行目)を、設置する環境にあわせてパス、RSSファイル名を変更します。
    url: "index.xml",//RSSファイル名

カスタマイズ(2010.1.20追記)

リンク色をスクリプトで「color:#696768」としていたので、CSSで設定できるようにしました。

  1. sitefeeds.jsの27行目:
    $('#feedList').append('<li class="list">'+date[0]+'  <a href="'+url+'" style="color:#696768; font-weight:normal;">'+title+'</a>'+date[1]+'</li>');
    style="color:#696768; font-weight:normal;"を削除
    $('#feedList').append('<li class="list">'+date[0]+'  <a href="'+url+'">'+title+'</a>'+date[1]+'</li>');
  2. style.cssを作成
    #feedList li.list a:link {
    	color: #0000ff;
    	}
    	#feedList li.list a:visited {
    	color: #800080;
    	}
    	#feedList li.list a:hover,
    	#feedList li.list a:active,
    	#feedList li.list a:focus {
    	color: #ff0000;
    	}
  3. head要素内に外部CSSファイルの読み込みを追加
    <link rel="stylesheet" href="style.css" media="screen,tv,print">

ページトップに戻る