#0018 ブログパーツ・相互RSS 貼付サンプルコード

スマホ(Textのみ)⇔PC(Display)広告自動切換えテスト中(現在スマホ以外で表示中)

目次
1. livedoor 相互RSS チャンネルの設定(参考用)
2. ブログ貼り付け用コード例(HTML)
3. ブログ貼り付け用コード例(CSS)
4. Yahoo ニューストピックス 表示例
5. WSJ Japan 表示例
6. ニコニコニュース/ライフハッカー/つくるよあんてな/IT media/GIGAZINE/はてな/CNET/GoogleJapan/SankeiBIZ 表示例

libedoor の相互RSS がどのような感じで表示されるのかの確認用です。

1.	livedoor 相互RSS チャンネルの設定(参考用)

カテゴリ表示する or しない と アイコン or ファビコン でテスト表示しています。

記事表示件数	0
カテゴリ別表示	する or しない
アダルトフラグ	OFF
タイトル文字数の指定	0
アイコン	表示する or 表示しない
ファビコン	表示しない or 表示する
表示形式	記事名/サイト名 or 記事名
NEW マーク	表示する
NEW マーク表示時間	6 時間
更新月日	表示する
更新時刻	表示する
はてなブックマーク	表示する

2.	ブログ貼り付け用コード例(HTML)

<!-- rrs1 rrs2 -->
<div style='float:left; width:auto; height:auto;'>
<p style='margin-left:15px;'>(rss1 カテゴリ表示有/アイコン表示有)</p>
<div id='rss1' style='width:300px; height:300px; overflow:scroll; margin:0;border:1px dotted #aaa;padding:1px;margin-left:10px;'>
<script type="text/javascript">
<!--
    var blogroll_channel_id = (ここにライブドア相互RSS チャンネルコードを設定)
// -->
</script>
<script type="text/javascript" charset="utf-8" src="http://blogroll.livedoor.net/js/blogroll.js"></script>
<link rel="stylesheet" type="text/css" href="http://blogroll.livedoor.net/css/default2.css" />
</div></div>

<div style='float:left; width:auto; height:auto;'>
<p style='margin-left:15px;'>(rss2 カテゴリ表示無し/ファビコン表示有)</p>
<div id='rss2' style='width:300px; height:300px; overflow:scroll; margin:0;border:1px dotted #aaa;padding:1px;margin-left:10px;'>
<script type="text/javascript">
<!--
    var blogroll_channel_id = (ここにライブドア相互RSS チャンネルコードを設定)
// -->
</script>
<script type="text/javascript" charset="utf-8" src="http://blogroll.livedoor.net/js/blogroll.js"></script>
<link rel="stylesheet" type="text/css" href="http://blogroll.livedoor.net/css/default2.css" />
</div></div>
<br clear='all'>

<!-- rrs3 -->
<div style='float:left; width:auto; height:auto;'>
<p style='margin-left:15px;'>(rss3 カテゴリ表示無し/アイコン表示有)</p>
<div id='rss3' style='width:600px; height:300px; overflow:scroll; margin:0;border:1px dotted #aaa;padding:1px;margin-left:10px;'>
<script type="text/javascript">
<!--
    var blogroll_channel_id = (ここにライブドア相互RSS チャンネルコードを設定)
// -->
</script>
<script type="text/javascript" charset="utf-8" src="http://blogroll.livedoor.net/js/blogroll.js"></script>
<link rel="stylesheet" type="text/css" href="http://blogroll.livedoor.net/css/default2.css" />
</div></div>
<br clear='all'>

<!-- rrs4 -->
<div style='float:left; width:auto; height:auto;'>
<p style='margin-left:15px;'>(rss4 リストマーク画像使用/文字サイズ 1.1rem/自動改行有)</p>
<div id='rss4' style='width:600px; height:300px; overflow:scroll; margin:0;border:1px dotted #aaa;padding:1px;margin-left:10px;'>
<script type="text/javascript">
<!--
    var blogroll_channel_id = (ここにライブドア相互RSS チャンネルコードを設定)
// -->
</script>
<script type="text/javascript" charset="utf-8" src="http://blogroll.livedoor.net/js/blogroll.js"></script>
<link rel="stylesheet" type="text/css" href="http://blogroll.livedoor.net/css/default2.css" />
</div></div>

<br clear='all'>

3.	ブログ貼り付け用コード例(CSS)

.blogroll-channel ul a { text-decoration: none; }

#rss1 .blogroll-channel {padding:0 5px 5px 10px;}
#rss2 .blogroll-channel {padding:0 5px 5px 10px;}
#rss3 .blogroll-channel {padding:0 5px 5px 10px;}
#rss4 .blogroll-channel {padding:0 5px 5px 10px;}

#rss1 .blogroll-channel ul li.blogroll-category-name
	{padding-left:3em;text-indent:-3em}
#rss1 .blogroll-channel ul li.blogroll-list
	{padding-left:1em;text-indent:-1em;white-space: nowrap;}
#rss1 .blogroll-channel ul
	{padding-left:15px;}

#rss2 .blogroll-channel ul li.blogroll-category-name
	{padding-left:3em;text-indent:-3em}
#rss2 .blogroll-channel ul li.blogroll-list 
	{padding-left:0em;text-indent:-1em;white-space: nowrap;}
#rss2 .blogroll-channel ul
	{padding-left:5px;}

#rss3 .blogroll-channel ul li.blogroll-category-name
	{padding-left:3em;text-indent:-3em}
#rss3 .blogroll-channel ul li.blogroll-list
	{padding-left:1em;text-indent:-1em;white-space: nowrap;}
#rss3 .blogroll-channel ul
	{padding-left:0px;}

#rss4 .blogroll-channel ul li.blogroll-category-name
	{padding-left:3em;text-indent:-3em}
#rss4 .blogroll-channel ul li.blogroll-list
	{padding-left:1em;text-indent:-1em;font-size:1.1rem;white-space: normal;}
#rss4 .blogroll-channel ul
	{padding-left:15px;list-style-image: url(/img/095-right-arrow.gif);}

/* マーカー画像DL元 http://bluegreen.jp/sozai/list/arrow/index.html */

4.	Yahoo ニューストピックス 表示例

5.	WSJ Japan 表示例

6.	ニコニコニュース/ライフハッカー/つくるよあんてな/IT media/GIGAZINE/はてな/CNET/GoogleJapan/SankeiBIZ 表示例

wrote by tasa.