Text RSSの設定方法
Text RSSの特徴
テキストのみのシンプルなテンプレートで、使いやすいものになっています。
テキストのみなので、どんなサイトでも適応でき、フィード内にアフィリエイト広告を入れる事でCTRの向上も見込めます。
簡単に設定が可能ですので、まずはText RSSで、RSS-loaderを試されてはいかがでしょうか?
テンプレート設定
設定項目 | 設定概要 |
---|---|
行数 | 縦行に表示するフィードの数 |
フォントサイズ | フィードタイトルの文字サイズ |
文字色 | フィードタイトルの文字色 |
背景色 | フィードタイトルの背景色 |
背景色(マウスオーバー) | a:hover時のフィードタイトルの背景色 |
区切り線の色 | フィードの区切り線の色 |
改行制御 | フィードタイトルの改行ON/OFF設定 |
カスタムCSSコンテナクラス | クラス名の設定 |
Text RSSを使ったcssデザイン例(PC表示用)
参考例1
HTML
<div class="rss_scroll"> <div class="text_rss"> <script src="http://rss-loader.com/channel/test-yuta/textrss_scroll/loader-inline.js"></script> </div> </div> <div style="clear:both;"></div>
CSS
.rss_scroll { width: 100%; background-color: #F7F7F7; margin:20px 0px; border:1px dashed #eeeeee; } .text_rss { width: 100%; height: 200px; overflow-y:scroll; } div.textrss_scroll{ overflow: hidden; background-color: #ffffff; } div.textrss_scroll{ padding:0px 7px; } div.textrss_scroll .lattice-title{ color:#333; } div.textrss_scroll ul{ } div.textrss_scroll li{ border-bottom: 1px solid #eeeeee; border-top:none !important; } div.textrss_scroll li:last-child{ border-bottom:none; } div.textrss_scroll li a{ height: 36px; line-height: 36px; display: block; color: #333333; font-weight: bold; background-size: 12px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }