RSSはこちら

ブログテンプレートならHKD

ブログタイトルを3時間悩んでやっと思いつきました。変にこだわるデザインです。すでに変にこだわって時間をロスしています。

更新休止のお知らせ

現在HKDは更新を休止しており、緊急を要する修正以外は手をつけれない状態です。 ご利用していただいてる方々には申し訳ございませんが、よろしくお願いいたします。
  • --⁄--⁄--(--)
  • --:--

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
category
スポンサー広告
  • 2011⁄05⁄29(Sun)
  • 15:38

CustomRssReaderカスタマイズ【デザインサンプル編】

CustomRssReaderですぐに使えるようなデザインのサンプル例をこちらに載せます。
CustomRssReaderについてはこちらの記事をどうぞ。

CustomRssReaderではjavascriptで次のようなHTMLを吐き出しています。
※top、left等の位置情報CSSやソーシャルブックマーク内のHTMLは省略しています。

<div id="CustomRssReaderArea">
<div class="crr_container" style="position: relative;">
<ul class="rssBox" style="position:relative;">
<li class="rssList" style=""> <span class="crr_title"> <a class="thum0" target="_blank" title="" href="http://rd.yahoo.co.jp/rss/l/headlines/soci/rps/*http://headlines.yahoo.co.jp/hl?a=20110525-00000014-rps-soci">不正改造、カスタムカーショーでの注意は32%減少 2010年・・・</a> </span> <span class="crr_category">Yahooニュース</span> <span class="crr_date">5/25(水) 11:41</span> <span class="crr_newmark"></span>
<ul class="crr_bookmark">
<li class="crr_hatebu"> <a href="http://b.hatena.ne.jp/entry/http://rd.yahoo.co.jp/rss/l/headlines/soci/rps/*http://headlines.yahoo.co.jp/hl?a=20110525-00000014-rps-soci"></a> </li>
<li class="crr_tweet"> <a href="http://tweetbuzz.jp/redirect?url=http%3A%2F%2Frd.yahoo.co.jp%2Frss%2Fl%2Fheadlines%2Fsoci%2Frps%2F*http%3A%2F%2Fheadlines.yahoo.co.jp%2Fhl%3Fa%3D20110525-00000014-rps-soci"></a> </li>
<li class="crr_face">
<iframe frameborder="0" scrolling="no" allowtransparency="true" style="border:none; overflow:hidden; width:120px; height:21px;" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Frd.yahoo.co.jp%2Frss%2Fl%2Fheadlines%2Fsoci%2Frps%2F*http%3A%2F%2Fheadlines.yahoo.co.jp%2Fhl%3Fa%3D20110525-00000014-rps-soci&layout=button_count&show_faces=false&width=100&action=like&colorscheme=light&height=21"></iframe>
</li>
</ul>
</li>
<li class="rssList" style=""> <span class="crr_title"> <a class="thum1" target="_blank" title="" href="http://rd.yahoo.co.jp/rss/l/headlines/soci/rps/*http://headlines.yahoo.co.jp/hl?a=20110525-00000010-rps-soci">不正改造、カー用品店への注意喚起44件増の144件 2010・・・</a> </span> <span class="crr_category">Yahooニュース</span> <span class="crr_date">5/25(水) 11:12</span> <span class="crr_newmark"></span>
<ul class="crr_bookmark">
<li class="crr_hatebu"> <a href="http://b.hatena.ne.jp/entry/http://rd.yahoo.co.jp/rss/l/headlines/soci/rps/*http://headlines.yahoo.co.jp/hl?a=20110525-00000010-rps-soci"></a> </li>
<li class="crr_tweet"> <a href="http://tweetbuzz.jp/redirect?url=http%3A%2F%2Frd.yahoo.co.jp%2Frss%2Fl%2Fheadlines%2Fsoci%2Frps%2F*http%3A%2F%2Fheadlines.yahoo.co.jp%2Fhl%3Fa%3D20110525-00000010-rps-soci"></a> </li>
<li class="crr_face">
<iframe frameborder="0" scrolling="no" allowtransparency="true" style="border:none; overflow:hidden; width:120px; height:21px;" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Frd.yahoo.co.jp%2Frss%2Fl%2Fheadlines%2Fsoci%2Frps%2F*http%3A%2F%2Fheadlines.yahoo.co.jp%2Fhl%3Fa%3D20110525-00000010-rps-soci&layout=button_count&show_faces=false&width=100&action=like&colorscheme=light&height=21"></iframe>
</li>
</ul>
</li>
</ul>
</div>
<div class="hkdLink" style="font-size: x-small; width: 395px; text-align: right; font-style: italic;"> <a href="http://hkdesign.blog91.fc2.com/blog-entry-119.html">Created by HKD</a> </div>
<ul class="thumnailBox">
<li class="crr_thumnail thum0" style="position: absolute; z-index: 100; height: 92px; display: none;"> <img src="http://capture.heartrails.com/small/delay=2?http://rd.yahoo.co.jp/rss/l/headlines/soci/rps/*http://headlines.yahoo.co.jp/hl?a=20110525-00000014-rps-soci"> </li>
<li class="crr_thumnail thum1" style="position: absolute; z-index: 100; height: 92px; display: none;"> <img src="http://capture.heartrails.com/small/delay=2?http://rd.yahoo.co.jp/rss/l/headlines/soci/rps/*http://headlines.yahoo.co.jp/hl?a=20110525-00000010-rps-soci"> </li>
</ul>
</div>

上のコードを別ウインドウで開く。
CustomRssReader_designSample01.html

javascriptでHTMLを吐き出しているのでソースを確認できず、なかなかカスタマイズが難しいと思います。
そういう方にコピペで簡単にカスタマイズできればいいなと思い、この記事を作りました。

サイドエリアに実装する場合とメインエリアに実装する場合の2パターンを想定して用意しました。
サイドエリアはwidthを200px
メインエリアはwidthを450pxに想定して作っています。

また、文字サイズの指定は行っていないので、ご利用されてるブログの文字サイズが適用されます。




→サイドエリアに実装の場合(ページ内アンカー)

→メインエリアに実装の場合(ページ内アンカー)

【サイドエリアに実装の場合】
・日付の横にNewマークをつけた例
designSample_01_01.gif
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1");</script>
<script type="text/javascript" src="http://blog-imgs-29.fc2.com/h/k/d/hkdesign/CustomRssReader_Ver0100-min.js" charset="utf-8"></script>
<script type="text/javascript">
<!--
var rssList = new Array();var sort;var rssItemLimit;var displayItem = new Array();var titleLength;var descriptionLength;var dateFormat;var effectSpeed;var newmark = Array();var thumnail = Array();


/***** javascriptのカスタマイズはここから ******/


//【読み込みたいRSS】
// categoryを画像URLにすると画像が表示
rssList.push({ url: "http://headlines.yahoo.co.jp/rss/rps_dom.xml", category: "Yahooニュース" });
rssList.push({ url: "http://feeds.feedburner.com/hatena/b/hotentry", category: "はてブ人気エントリー" });
rssList.push({ url: "http://www.nicovideo.jp/ranking/fav/daily/all?rss=2.0", category: "ニコニコ" });
rssList.push({ url: "http://hkdesign.blog91.fc2.com/?xml", category: "HKD" });

//【何を表示するか】
// "title" "category" "date" "newmark" "bookmark"から選択可能
displayItem = {0: "title", 1: "date", 2:"newmark"};

//【ソート方法】
// nameは"title" "category" "date" "newmark" "bookmark"から選択可能
// toは"down"(降順) "up"(昇順)から選択可能
sort = {"name": "date", "to": "down"};

//【各RSSの記事数】
rssItemLimit = 2;

//【タイトルの文字数】
titleLength = 30;

//【要約の文字数】
// 要約とはマウスオーバー時の記事本文
descriptionLength = 60;

//【日付の形式】
// {Y2} 下2桁の年
// {Y4} 4桁の年
// {M}  月
// {ME} 英語の月
// {D}  日
// {h}  時
// {m}  分
// {s}  秒
// {y}  曜日
// {yE} 英語の曜日
dateFormat = "{M}/{D}({y}) {h}:{m}";

//【アニメーション実行時間】
// 単位は秒
// 長くすると環境によっては重たくなります
effectSpeed = 0.3;

//【Newマーク】
// displayItemでnewmarkを設定していないと機能しません
// nameを画像URLにすると画像が表示
// hourで今から何時間内の記事に対してマークをつけるか
newmark = {"name": "http://blog-imgs-29.fc2.com/h/k/d/hkdesign/newIcon01.gif", "hour": 24};

//【サムネイル表示設定】
// マウスオーバーでサムネイルを表示するかどうか
// modeの"on" "off"から選択可能
// sizeは"s" "m" "l"から選択可能
// xとyは画像の設置場所それぞれマウスポインタからの設置座標
thumnail = {"mode": "off", "size": "s", "x": 0, "y": -100};


/***** javascriptのカスタマイズはここまで ******/


 $(document).ready(function(){ $("#CustomRssReaderArea").CustomRssReader({"rssArr" : rssList, "displayItem": displayItem, "sort": sort, "rssItemLimit": rssItemLimit, "titleLength": titleLength, "descriptionLength": descriptionLength, "dateFormat": dateFormat, "effectSpeed": effectSpeed, "newmark": newmark, "thumnail": thumnail }); });
-->
</script>
<style type="text/css">
<!--

/***** CSSのカスタマイズはここから ******/

#CustomRssReaderArea{
margin:0px;
padding:0px;
}
#CustomRssReaderArea div.crr_container{
/*ここのheightで高さを設定*/
height:300px;

overflow-x:hidden;
overflow-y:scroll;
padding-right:5px;
}
#CustomRssReaderArea div.crr_container ul.rssBox{
margin:0px;
padding:0px;
}
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList{
width:100%;
list-style:none;
list-style-image:none;
background-image:none;
padding:0px;
margin:0px;
}
/* カテゴリーが入っている */
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList span.crr_category{
}
/* タイトルが入っている */
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList span.crr_title{
display:block;
}
/* 日付が入っている */
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList span.crr_date{
float:right;
padding-left:5px;
}
/* Newマークが入っている */
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList span.crr_newmark{
float:right;
}
/* ソーシャルブックマークのリスト */
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList ul.crr_bookmark{
}
/* はてブ・twitter・FaceBookが入っている */
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList ul.crr_bookmark li{
}
/* サムネイルのリスト */
#CustomRssReaderArea ul.thumnailBox li.crr_thumnail{
list-style:none;
padding:0px;
}
/* サムネイルの画像 */
#CustomRssReaderArea ul.thumnailBox li.crr_thumnail img{
border:1px solid #333333;
}


/***** CSSのカスタマイズはここまで ******/

-->
</style>
<div id="CustomRssReaderArea"></div>
上のコードをそのままコピペしてください。
上のコードを別ウインドウで開く。
CustomRssReader_designSample02.html


・タイトルの横(右)にNewマークをつけた例
designSample_02_01.gif
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1");</script>
<script type="text/javascript" src="http://blog-imgs-29.fc2.com/h/k/d/hkdesign/CustomRssReader_Ver0100-min.js" charset="utf-8"></script>
<script type="text/javascript">
<!--
var rssList = new Array();var sort;var rssItemLimit;var displayItem = new Array();var titleLength;var descriptionLength;var dateFormat;var effectSpeed;var newmark = Array();var thumnail = Array();


/***** javascriptのカスタマイズはここから ******/


//【読み込みたいRSS】
// categoryを画像URLにすると画像が表示
rssList.push({ url: "http://headlines.yahoo.co.jp/rss/rps_dom.xml", category: "Yahooニュース" });
rssList.push({ url: "http://feeds.feedburner.com/hatena/b/hotentry", category: "はてブ人気エントリー" });
rssList.push({ url: "http://www.nicovideo.jp/ranking/fav/daily/all?rss=2.0", category: "ニコニコ" });
rssList.push({ url: "http://hkdesign.blog91.fc2.com/?xml", category: "HKD" });

//【何を表示するか】
// "title" "category" "date" "newmark" "bookmark"から選択可能
displayItem = {0: "title", 1: "date", 2:"newmark"};

//【ソート方法】
// nameは"title" "category" "date" "newmark" "bookmark"から選択可能
// toは"down"(降順) "up"(昇順)から選択可能
sort = {"name": "date", "to": "down"};

//【各RSSの記事数】
rssItemLimit = 2;

//【タイトルの文字数】
titleLength = 30;

//【要約の文字数】
// 要約とはマウスオーバー時の記事本文
descriptionLength = 60;

//【日付の形式】
// {Y2} 下2桁の年
// {Y4} 4桁の年
// {M}  月
// {ME} 英語の月
// {D}  日
// {h}  時
// {m}  分
// {s}  秒
// {y}  曜日
// {yE} 英語の曜日
dateFormat = "{M}/{D}({y}) {h}:{m}";

//【アニメーション実行時間】
// 単位は秒
// 長くすると環境によっては重たくなります
effectSpeed = 0.3;

//【Newマーク】
// displayItemでnewmarkを設定していないと機能しません
// nameを画像URLにすると画像が表示
// hourで今から何時間内の記事に対してマークをつけるか
newmark = {"name": "http://blog-imgs-29.fc2.com/h/k/d/hkdesign/newIcon01.gif", "hour": 24};

//【サムネイル表示設定】
// マウスオーバーでサムネイルを表示するかどうか
// modeの"on" "off"から選択可能
// sizeは"s" "m" "l"から選択可能
// xとyは画像の設置場所それぞれマウスポインタからの設置座標
thumnail = {"mode": "off", "size": "s", "x": 0, "y": -100};


/***** javascriptのカスタマイズはここまで ******/


 $(document).ready(function(){ $("#CustomRssReaderArea").CustomRssReader({"rssArr" : rssList, "displayItem": displayItem, "sort": sort, "rssItemLimit": rssItemLimit, "titleLength": titleLength, "descriptionLength": descriptionLength, "dateFormat": dateFormat, "effectSpeed": effectSpeed, "newmark": newmark, "thumnail": thumnail }); });
-->
</script>
<style type="text/css">
<!--

/***** CSSのカスタマイズはここから ******/

#CustomRssReaderArea{
margin:0px;
padding:0px;
}
#CustomRssReaderArea div.crr_container{
/*ここのheightで高さを設定*/
height:300px;

overflow-x:hidden;
overflow-y:scroll;
padding-right:5px;
}
#CustomRssReaderArea div.crr_container ul.rssBox{
margin:0px;
padding:0px;
}
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList{
width:100%;
list-style:none;
list-style-image:none;
background-image:none;
padding:0px;
margin:0px;
}
/* カテゴリーが入っている */
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList span.crr_category{
}
/* タイトルが入っている */
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList span.crr_title{
display:block;
}
/* 日付が入っている */
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList span.crr_date{
float:right;
padding-left:5px;
}
/* Newマークが入っている */
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList span.crr_newmark{
float:right;
}
/* ソーシャルブックマークのリスト */
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList ul.crr_bookmark{
}
/* はてブ・twitter・FaceBookが入っている */
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList ul.crr_bookmark li{
}
/* サムネイルのリスト */
#CustomRssReaderArea ul.thumnailBox li.crr_thumnail{
list-style:none;
padding:0px;
}
/* サムネイルの画像 */
#CustomRssReaderArea ul.thumnailBox li.crr_thumnail img{
border:1px solid #333333;
}


/***** CSSのカスタマイズはここまで ******/

-->
</style>
<div id="CustomRssReaderArea"></div>
上のコードをそのままコピペしてください。
上のコードを別ウインドウで開く。
CustomRssReader_designSample03.html

・タイトルの横(左)にNewマークをつけた例
designSample_03_01.gif
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1");</script>
<script type="text/javascript" src="http://blog-imgs-29.fc2.com/h/k/d/hkdesign/CustomRssReader_Ver0100-min.js" charset="utf-8"></script>
<script type="text/javascript">
<!--
var rssList = new Array();var sort;var rssItemLimit;var displayItem = new Array();var titleLength;var descriptionLength;var dateFormat;var effectSpeed;var newmark = Array();var thumnail = Array();


/***** javascriptのカスタマイズはここから ******/


//【読み込みたいRSS】
// categoryを画像URLにすると画像が表示
rssList.push({ url: "http://headlines.yahoo.co.jp/rss/rps_dom.xml", category: "Yahooニュース" });
rssList.push({ url: "http://feeds.feedburner.com/hatena/b/hotentry", category: "はてブ人気エントリー" });
rssList.push({ url: "http://www.nicovideo.jp/ranking/fav/daily/all?rss=2.0", category: "ニコニコ" });
rssList.push({ url: "http://hkdesign.blog91.fc2.com/?xml", category: "HKD" });

//【何を表示するか】
// "title" "category" "date" "newmark" "bookmark"から選択可能
displayItem = {0: "newmark", 1:"title", 2: "date"};

//【ソート方法】
// nameは"title" "category" "date" "newmark" "bookmark"から選択可能
// toは"down"(降順) "up"(昇順)から選択可能
sort = {"name": "date", "to": "down"};

//【各RSSの記事数】
rssItemLimit = 2;

//【タイトルの文字数】
titleLength = 30;

//【要約の文字数】
// 要約とはマウスオーバー時の記事本文
descriptionLength = 60;

//【日付の形式】
// {Y2} 下2桁の年
// {Y4} 4桁の年
// {M}  月
// {ME} 英語の月
// {D}  日
// {h}  時
// {m}  分
// {s}  秒
// {y}  曜日
// {yE} 英語の曜日
dateFormat = "{M}/{D}({y}) {h}:{m}";

//【アニメーション実行時間】
// 単位は秒
// 長くすると環境によっては重たくなります
effectSpeed = 0.3;

//【Newマーク】
// displayItemでnewmarkを設定していないと機能しません
// nameを画像URLにすると画像が表示
// hourで今から何時間内の記事に対してマークをつけるか
newmark = {"name": "http://blog-imgs-29.fc2.com/h/k/d/hkdesign/newIcon01.gif", "hour": 24};

//【サムネイル表示設定】
// マウスオーバーでサムネイルを表示するかどうか
// modeの"on" "off"から選択可能
// sizeは"s" "m" "l"から選択可能
// xとyは画像の設置場所それぞれマウスポインタからの設置座標
thumnail = {"mode": "off", "size": "s", "x": 0, "y": -100};


/***** javascriptのカスタマイズはここまで ******/


 $(document).ready(function(){ $("#CustomRssReaderArea").CustomRssReader({"rssArr" : rssList, "displayItem": displayItem, "sort": sort, "rssItemLimit": rssItemLimit, "titleLength": titleLength, "descriptionLength": descriptionLength, "dateFormat": dateFormat, "effectSpeed": effectSpeed, "newmark": newmark, "thumnail": thumnail }); });
-->
</script>
<style type="text/css">
<!--

/***** CSSのカスタマイズはここから ******/

#CustomRssReaderArea{
margin:0px;
padding:0px;
}
#CustomRssReaderArea div.crr_container{
/*ここのheightで高さを設定*/
height:300px;

overflow-x:hidden;
overflow-y:scroll;
padding-right:5px;
}
#CustomRssReaderArea div.crr_container ul.rssBox{
margin:0px;
padding:0px;
}
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList{
width:100%;
list-style:none;
list-style-image:none;
background-image:none;
padding:0px;
margin:0px;
}
/* カテゴリーが入っている */
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList span.crr_category{
}
/* タイトルが入っている */
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList span.crr_title{
}
/* 日付が入っている */
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList span.crr_date{
display:block;
text-align:right;
}
/* Newマークが入っている */
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList span.crr_newmark{
padding-right:3px;
}
/* ソーシャルブックマークのリスト */
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList ul.crr_bookmark{
}
/* はてブ・twitter・FaceBookが入っている */
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList ul.crr_bookmark li{
}
/* サムネイルのリスト */
#CustomRssReaderArea ul.thumnailBox li.crr_thumnail{
list-style:none;
padding:0px;
}
/* サムネイルの画像 */
#CustomRssReaderArea ul.thumnailBox li.crr_thumnail img{
border:1px solid #333333;
}


/***** CSSのカスタマイズはここまで ******/

-->
</style>
<div id="CustomRssReaderArea"></div>
上のコードをそのままコピペしてください。
上のコードを別ウインドウで開く。
CustomRssReader_designSample04.html

・日付の横(右)にカテゴリーをつけた例
designSample_04_01.gif
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1");</script>
<script type="text/javascript" src="http://blog-imgs-29.fc2.com/h/k/d/hkdesign/CustomRssReader_Ver0100-min.js" charset="utf-8"></script>
<script type="text/javascript">
<!--
var rssList = new Array();var sort;var rssItemLimit;var displayItem = new Array();var titleLength;var descriptionLength;var dateFormat;var effectSpeed;var newmark = Array();var thumnail = Array();


/***** javascriptのカスタマイズはここから ******/


//【読み込みたいRSS】
// categoryを画像URLにすると画像が表示
rssList.push({ url: "http://headlines.yahoo.co.jp/rss/rps_dom.xml", category: "Yahooニュース" });
rssList.push({ url: "http://feeds.feedburner.com/hatena/b/hotentry", category: "はてブ人気エントリー" });
rssList.push({ url: "http://www.nicovideo.jp/ranking/fav/daily/all?rss=2.0", category: "ニコニコ" });
rssList.push({ url: "http://hkdesign.blog91.fc2.com/?xml", category: "HKD" });

//【何を表示するか】
// "title" "category" "date" "newmark" "bookmark"から選択可能
displayItem = {0: "title", 1:"category", 2: "date"};

//【ソート方法】
// nameは"title" "category" "date" "newmark" "bookmark"から選択可能
// toは"down"(降順) "up"(昇順)から選択可能
sort = {"name": "date", "to": "down"};

//【各RSSの記事数】
rssItemLimit = 2;

//【タイトルの文字数】
titleLength = 30;

//【要約の文字数】
// 要約とはマウスオーバー時の記事本文
descriptionLength = 60;

//【日付の形式】
// {Y2} 下2桁の年
// {Y4} 4桁の年
// {M}  月
// {ME} 英語の月
// {D}  日
// {h}  時
// {m}  分
// {s}  秒
// {y}  曜日
// {yE} 英語の曜日
dateFormat = "{M}/{D}({y}) {h}:{m}";

//【アニメーション実行時間】
// 単位は秒
// 長くすると環境によっては重たくなります
effectSpeed = 0.3;

//【Newマーク】
// displayItemでnewmarkを設定していないと機能しません
// nameを画像URLにすると画像が表示
// hourで今から何時間内の記事に対してマークをつけるか
newmark = {"name": "http://blog-imgs-29.fc2.com/h/k/d/hkdesign/newIcon01.gif", "hour": 24};

//【サムネイル表示設定】
// マウスオーバーでサムネイルを表示するかどうか
// modeの"on" "off"から選択可能
// sizeは"s" "m" "l"から選択可能
// xとyは画像の設置場所それぞれマウスポインタからの設置座標
thumnail = {"mode": "off", "size": "s", "x": 0, "y": -100};


/***** javascriptのカスタマイズはここまで ******/


 $(document).ready(function(){ $("#CustomRssReaderArea").CustomRssReader({"rssArr" : rssList, "displayItem": displayItem, "sort": sort, "rssItemLimit": rssItemLimit, "titleLength": titleLength, "descriptionLength": descriptionLength, "dateFormat": dateFormat, "effectSpeed": effectSpeed, "newmark": newmark, "thumnail": thumnail }); });
-->
</script>
<style type="text/css">
<!--

/***** CSSのカスタマイズはここから ******/

#CustomRssReaderArea{
margin:0px;
padding:0px;
}
#CustomRssReaderArea div.crr_container{
/*ここのheightで高さを設定*/
height:300px;

overflow-x:hidden;
overflow-y:scroll;
padding-right:5px;
}
#CustomRssReaderArea div.crr_container ul.rssBox{
margin:0px;
padding:0px;
}
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList{
width:100%;
list-style:none;
list-style-image:none;
background-image:none;
padding:0px;
margin:0px;
}
/* カテゴリーが入っている */
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList span.crr_category{
float:right;
}
/* タイトルが入っている */
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList span.crr_title{
display:block;
}
/* 日付が入っている */
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList span.crr_date{
float:right;
padding-right:5px;
}
/* Newマークが入っている */
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList span.crr_newmark{
padding-right:3px;
}
/* ソーシャルブックマークのリスト */
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList ul.crr_bookmark{
}
/* はてブ・twitter・FaceBookが入っている */
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList ul.crr_bookmark li{
}
/* サムネイルのリスト */
#CustomRssReaderArea ul.thumnailBox li.crr_thumnail{
list-style:none;
padding:0px;
}
/* サムネイルの画像 */
#CustomRssReaderArea ul.thumnailBox li.crr_thumnail img{
border:1px solid #333333;
}


/***** CSSのカスタマイズはここまで ******/

-->
</style>
<div id="CustomRssReaderArea"></div>
上のコードをそのままコピペしてください。
上のコードを別ウインドウで開く。
CustomRssReader_designSample05.html

・日付の横(左)にカテゴリーをつけた例
designSample_05_01.gif
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1");</script>
<script type="text/javascript" src="http://blog-imgs-29.fc2.com/h/k/d/hkdesign/CustomRssReader_Ver0100-min.js" charset="utf-8"></script>
<script type="text/javascript">
<!--
var rssList = new Array();var sort;var rssItemLimit;var displayItem = new Array();var titleLength;var descriptionLength;var dateFormat;var effectSpeed;var newmark = Array();var thumnail = Array();


/***** javascriptのカスタマイズはここから ******/


//【読み込みたいRSS】
// categoryを画像URLにすると画像が表示
rssList.push({ url: "http://headlines.yahoo.co.jp/rss/rps_dom.xml", category: "Yahooニュース" });
rssList.push({ url: "http://feeds.feedburner.com/hatena/b/hotentry", category: "はてブ人気エントリー" });
rssList.push({ url: "http://www.nicovideo.jp/ranking/fav/daily/all?rss=2.0", category: "ニコニコ" });
rssList.push({ url: "http://hkdesign.blog91.fc2.com/?xml", category: "HKD" });

//【何を表示するか】
// "title" "category" "date" "newmark" "bookmark"から選択可能
displayItem = {0: "title", 1:"date", 2: "category"};

//【ソート方法】
// nameは"title" "category" "date" "newmark" "bookmark"から選択可能
// toは"down"(降順) "up"(昇順)から選択可能
sort = {"name": "date", "to": "down"};

//【各RSSの記事数】
rssItemLimit = 2;

//【タイトルの文字数】
titleLength = 30;

//【要約の文字数】
// 要約とはマウスオーバー時の記事本文
descriptionLength = 60;

//【日付の形式】
// {Y2} 下2桁の年
// {Y4} 4桁の年
// {M}  月
// {ME} 英語の月
// {D}  日
// {h}  時
// {m}  分
// {s}  秒
// {y}  曜日
// {yE} 英語の曜日
dateFormat = "{M}/{D}({y}) {h}:{m}";

//【アニメーション実行時間】
// 単位は秒
// 長くすると環境によっては重たくなります
effectSpeed = 0.3;

//【Newマーク】
// displayItemでnewmarkを設定していないと機能しません
// nameを画像URLにすると画像が表示
// hourで今から何時間内の記事に対してマークをつけるか
newmark = {"name": "http://blog-imgs-29.fc2.com/h/k/d/hkdesign/newIcon01.gif", "hour": 24};

//【サムネイル表示設定】
// マウスオーバーでサムネイルを表示するかどうか
// modeの"on" "off"から選択可能
// sizeは"s" "m" "l"から選択可能
// xとyは画像の設置場所それぞれマウスポインタからの設置座標
thumnail = {"mode": "off", "size": "s", "x": 0, "y": -100};


/***** javascriptのカスタマイズはここまで ******/


 $(document).ready(function(){ $("#CustomRssReaderArea").CustomRssReader({"rssArr" : rssList, "displayItem": displayItem, "sort": sort, "rssItemLimit": rssItemLimit, "titleLength": titleLength, "descriptionLength": descriptionLength, "dateFormat": dateFormat, "effectSpeed": effectSpeed, "newmark": newmark, "thumnail": thumnail }); });
-->
</script>
<style type="text/css">
<!--

/***** CSSのカスタマイズはここから ******/

#CustomRssReaderArea{
margin:0px;
padding:0px;
}
#CustomRssReaderArea div.crr_container{
/*ここのheightで高さを設定*/
height:300px;

overflow-x:hidden;
overflow-y:scroll;
padding-right:5px;
}
#CustomRssReaderArea div.crr_container ul.rssBox{
margin:0px;
padding:0px;
}
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList{
width:100%;
list-style:none;
list-style-image:none;
background-image:none;
padding:0px;
margin:0px;
}
/* カテゴリーが入っている */
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList span.crr_category{
float:right;
padding-right:5px;
}
/* タイトルが入っている */
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList span.crr_title{
display:block;
}
/* 日付が入っている */
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList span.crr_date{
float:right;
}
/* Newマークが入っている */
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList span.crr_newmark{
padding-right:3px;
}
/* ソーシャルブックマークのリスト */
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList ul.crr_bookmark{
}
/* はてブ・twitter・FaceBookが入っている */
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList ul.crr_bookmark li{
}
/* サムネイルのリスト */
#CustomRssReaderArea ul.thumnailBox li.crr_thumnail{
list-style:none;
padding:0px;
}
/* サムネイルの画像 */
#CustomRssReaderArea ul.thumnailBox li.crr_thumnail img{
border:1px solid #333333;
}


/***** CSSのカスタマイズはここまで ******/

-->
</style>
<div id="CustomRssReaderArea"></div>
上のコードをそのままコピペしてください。
上のコードを別ウインドウで開く。
CustomRssReader_designSample06.html



【メインエリアに実装の場合】


・日付の横にソーシャルブックマークをつけた例
designSample_06_01.gif
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1");</script>
<script type="text/javascript" src="http://blog-imgs-29.fc2.com/h/k/d/hkdesign/CustomRssReader_Ver0100-min.js" charset="utf-8"></script>
<script type="text/javascript">
<!--
var rssList = new Array();var sort;var rssItemLimit;var displayItem = new Array();var titleLength;var descriptionLength;var dateFormat;var effectSpeed;var newmark = Array();var thumnail = Array();


/***** javascriptのカスタマイズはここから ******/


//【読み込みたいRSS】
// categoryを画像URLにすると画像が表示
rssList.push({ url: "http://headlines.yahoo.co.jp/rss/rps_dom.xml", category: "Yahooニュース" });
rssList.push({ url: "http://feeds.feedburner.com/hatena/b/hotentry", category: "はてブ人気エントリー" });
rssList.push({ url: "http://www.nicovideo.jp/ranking/fav/daily/all?rss=2.0", category: "ニコニコ" });
rssList.push({ url: "http://hkdesign.blog91.fc2.com/?xml", category: "HKD" });

//【何を表示するか】
// "title" "category" "date" "newmark" "bookmark"から選択可能
displayItem = {0: "title", 1:"date", 2: "bookmark"};

//【ソート方法】
// nameは"title" "category" "date" "newmark" "bookmark"から選択可能
// toは"down"(降順) "up"(昇順)から選択可能
sort = {"name": "date", "to": "down"};

//【各RSSの記事数】
rssItemLimit = 2;

//【タイトルの文字数】
titleLength = 30;

//【要約の文字数】
// 要約とはマウスオーバー時の記事本文
descriptionLength = 60;

//【日付の形式】
// {Y2} 下2桁の年
// {Y4} 4桁の年
// {M}  月
// {ME} 英語の月
// {D}  日
// {h}  時
// {m}  分
// {s}  秒
// {y}  曜日
// {yE} 英語の曜日
dateFormat = "{M}/{D}({y}) {h}:{m}";

//【アニメーション実行時間】
// 単位は秒
// 長くすると環境によっては重たくなります
effectSpeed = 0.3;

//【Newマーク】
// displayItemでnewmarkを設定していないと機能しません
// nameを画像URLにすると画像が表示
// hourで今から何時間内の記事に対してマークをつけるか
newmark = {"name": "http://blog-imgs-29.fc2.com/h/k/d/hkdesign/newIcon01.gif", "hour": 24};

//【サムネイル表示設定】
// マウスオーバーでサムネイルを表示するかどうか
// modeの"on" "off"から選択可能
// sizeは"s" "m" "l"から選択可能
// xとyは画像の設置場所それぞれマウスポインタからの設置座標
thumnail = {"mode": "off", "size": "s", "x": 0, "y": -100};


/***** javascriptのカスタマイズはここまで ******/


 $(document).ready(function(){ $("#CustomRssReaderArea").CustomRssReader({"rssArr" : rssList, "displayItem": displayItem, "sort": sort, "rssItemLimit": rssItemLimit, "titleLength": titleLength, "descriptionLength": descriptionLength, "dateFormat": dateFormat, "effectSpeed": effectSpeed, "newmark": newmark, "thumnail": thumnail }); });
-->
</script>
<style type="text/css">
<!--

/***** CSSのカスタマイズはここから ******/

#CustomRssReaderArea{
margin:0px;
padding:0px;
}
#CustomRssReaderArea div.crr_container{
/*ここのheightで高さを設定*/
height:300px;

overflow-x:hidden;
overflow-y:scroll;
padding-right:5px;
}
#CustomRssReaderArea div.crr_container ul.rssBox{
margin:0px;
padding:0px;
}
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList{
width:100%;
list-style:none;
list-style-image:none;
background-image:none;
padding:0px;
margin:0px;
}
/* カテゴリーが入っている */
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList span.crr_category{
float:right;
padding-right:5px;
}
/* タイトルが入っている */
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList span.crr_title{
display:block;
}
/* 日付が入っている */
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList span.crr_date{
float:right;
}
/* Newマークが入っている */
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList span.crr_newmark{
}
/* ソーシャルブックマークのリスト */
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList ul.crr_bookmark{
float:right;
}
/* はてブ・twitter・FaceBookが入っている */
#CustomRssReaderArea div.crr_container ul.rssBox li.rssList ul.crr_bookmark li{
display:inline;
margin:0px;
padding:0px;
background-image: none;
list-style:none;
}
/* サムネイルのリスト */
#CustomRssReaderArea ul.thumnailBox li.crr_thumnail{
list-style:none;
padding:0px;
}
/* サムネイルの画像 */
#CustomRssReaderArea ul.thumnailBox li.crr_thumnail img{
border:1px solid #333333;
}


/***** CSSのカスタマイズはここまで ******/

-->
</style>
<div id="CustomRssReaderArea"></div>
上のコードをそのままコピペしてください。
上のコードを別ウインドウで開く。
CustomRssReader_designSample07.html



んー、ブログによって横幅や文字サイズが違うので、万人向けのしか作れないのが残念。
細かいところまではご利用されるブログやサイトのデザインにあったCSSで、各自調整をお願いいたします。
関連記事
スポンサーサイト
category
カスタマイズ > CustomRssReader
tag
カスタマイズプラグインデザインサンプルCSS
genre
ブログ
theme
FC2ブログ共有プラグイン

TrackBack Url

http://hkdesign.blog91.fc2.com/tb.php/135-734ad929

検索フォーム

プロフィール

HKD TEMPLATE


Author:
 Hellow
mail:
 hkdesign.mail☆gmail.com
 ☆を半角@に変えてください。

Henni
Kodawaru
Design
略してHKD

ブログテンプレートならHKDにようこそ!
このサイトではFC2で使える共有テンプレートを配布しています。
サイトについての説明はこちらをどうぞ。

カテゴリ

アクセスランキング

[ジャンルランキング]
ブログ
1531位
アクセスランキングを見る>>

[サブジャンルランキング]
共有テンプレート
15位
アクセスランキングを見る>>

FC2カウンター

メールフォーム

名前:
メール:
件名:
本文:

アプリ紹介

google chrome拡張機能「high! like!」を作りました。
機能1:はてなハイクをサイト上に投稿できる
機能2:はてなハイク投稿時に同時にtwitterにも投稿する
詳しくは次のURLへお越しください
hk-factory
Googleウェブストア

プラグインギャラリー

ブログ管理画面の共有プラググイン追加から、作者:hkdesignと検索してダウンロードしてください。

CastomCategory
CustomRssReader
ImageClock

テンプレートギャラリー

ブログ管理画面の共有テンプレート追加から、作者:hkdesignと検索してダウンロードしてください。

動作環境について

テンプレートは以下の環境・方法で動作確認を行ってからFC2に申請しています。もし、記載の環境でも表示が崩れて見えない場合は連絡してくれるとありがたいです。

【Win】FireFox 3 / IE8 / IE7(*) / IE6(*) / Google Chrome
【Mac】FireFox 3.0(*) / Safari 3.0(*)
*マークがあるブラウザは手元に環境がないので、Adobe BrowserLabを使ってチェックしています。

Adobe BrowserLab
https://browserlab.adobe.com/

ライセンスについて

ライセンス形態はGPLライセンスをとります。
簡単に言うと次の4つです。
  • カスタマイズ・再配布など連絡なしに使用OK。
  • ただし、著作権表示は消したらダメです。
  • なんらかの損害が出た場合は自己責任です。
  • 再配布する場合、GPLライセンスが適用されます。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。