テンプレート「Text RSS A」の設定方法

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;
}