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

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