Text RSS Aの設定方法
Text RSS Aの特徴
Text RSS Aは、Text RSSと同様にテキストのみのシンプルなテンプレートですが、テキスト前にアイコンを設定する事が可能です。
アイコンさえ準備できれば、好きなものに変更することができ、より一層ブログにあったRSSフィード枠を作ることができます。
もしイラストソフトでアイコン作成が容易であれば、Text RSS Aを使ってみてはどうでしょうか?
テンプレート設定
設定項目 | 設定概要 |
---|---|
行数 | 縦行に表示するフィードの数 |
フォントサイズ | フィードタイトルの文字サイズ |
文字色 | フィードタイトルの文字色 |
背景色(全体) | フィード枠の背景色 |
背景色(リンク) | フィードの背景色 |
背景色(リンクマウスオーバー) | a:hover時の、フィードの背景色 |
区切り線の色 | フィードの区切り線の色 |
改行制御 | フィードタイトルの改行ON/OFF設定 |
カスタムCSSコンテナクラス | クラス名の設定 |
Text RSS Aを使ったcssデザイン例(PC表示用)
参考例1
HTML
<div class="rss_scroll"> <div class="text_rss_a"> <script src="http://rss-loader.com/channel/test-yuta/rssloader_textrssa01/loader-inline.js"></script> </div> <div class="text_rss_a"> <script src="http://rss-loader.com/channel/test-yuta/rssloader_textrssa01/loader-inline.js"></script> </div> </div> <div style="clear:both;">
CSS
.rss_scroll { width: 100%; background-color: #F7F7F7; margin:20px 0px; border:1px solid #eeeeee; } .text_rss_a{ width: 50%; height: 300px; float: left; overflow-y:scroll; } div.textrssa01{ overflow: hidden; background-color: #ffffff; padding:0px 7px; } div.textrssa01 .lattice-title{ color:#333; } div.textrssa01 .lattice-cell{ background:none; } div.textrssa01 li{ height: 41px; border-bottom: 1px solid #eeeeee; border-top:none !important; } div.textrssa01 li:last-child{ border-bottom:none; } div.textrssa01 li a{ height: 36px; line-height: 36px; padding-left: 25px; display: block; color: #333333; font-weight: bold; background: url(images/list-icon.png) no-repeat 5px center; background-size: 12px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } div.rss_texta ul{ border:1px #ccc solid; background:#fff; } div.rss_texta .lattice-cell{ border-top:dashed 1px #ccc; background:url(images/list-icon.png) no-repeat 5px center; } div.rss_texta .lattice-cell:first-child{ border-top:none; } div.rss_texta a{ padding-left:1.5em; } div.rss_texta .lattice-title{ height:25px; overflow:hidden; }