#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 ニューストピックス 表示例 |
(rss1 カテゴリ表示有/アイコン表示有)
(rss2 カテゴリ表示無し/ファビコン表示有)
5. | WSJ Japan 表示例 |
(rss3 カテゴリ表示無し/アイコン表示有)
6. | ニコニコニュース/ライフハッカー/つくるよあんてな/IT media/GIGAZINE/はてな/CNET/GoogleJapan/SankeiBIZ 表示例 |
(rss4 リストマーク画像使用/文字サイズ 1.1rem/自動改行有)
wrote by tasa.
[広告]
最近の投稿
- #0018 ブログパーツ・相互RSS 貼付サンプルコード
- #0017 Windows 10 お勧め設定 – 2 : 高速化設定
- #0016 Windows 10 お勧めアプリ – 1 : Akabei Monitor & Windows ツールバーの設定方法
- グーグル翻訳で使用できる言語コード一覧 (2016/11/22 現在)
- 時事ネタ : グーグル翻訳の翻訳精度が向上した!
- #0014 JavaScript での 数値 と 文字列 (とブール型/オブジェクト型/配列型)の型変換
- #0013 WordPress テキストウィジェットの中でプラグインを使わずに PHP を実行する方法
- #0012 VMware Player 5 の安全なアンインストール方法 2016年11月版
- #0011 VMware 32bit 版のダウンロード方法 & アンインストール時の注意点
- #0010 VMware player 12 のインストールしゲストで windows 10 をインストールする
- #0009 WordPress記事 に Blogger の画像を利用する (画像拡大ライブラリ lity も使用します)
- 10/29 ~ 11/1 までタイのスパンブリーという田舎に行きます。
- #0008-3 WordPress投稿画面のボタンの削除と追加
- #0008-2 ショートタグで番号付き見出しを見やすくする。
- #0008-1 ショートタグで記事をインデントして見やすくする。
最近のコメント