Thumbnailの設定方法
テンプレート設定
設定項目 |
設定概要 |
サムネール幅 |
画像サイズの横サイズ |
サムネール高さ |
画像サイズの縦サイズ |
列数 |
横列に表示するフィードの数 |
行数 |
縦行に表示するフィードの数 |
画像なし項目 |
サムネイルがないフィードを表示ON/OFF |
背景色(全体) |
背景の色を設定 |
タイトルフォントサイズ |
フィードタイトルの文字サイズ |
タイトル文字色 |
フィードタイトルの文字色 |
区切り線の色 |
border(ボーダー)の色を設定 |
セル間隔(よこ) |
横のpaddingの設定 |
セル角丸半径 |
border-radiusの設定 |
カスタムCSSコンテナクラス |
クラス名の設定 |
Thumbnailを使ったcssデザイン例(PC表示用)
参考例1
div.thumbnail01.lattice-cell{
padding:10px;
}
div.thumbnail01 img,
div.thumbnail01 a img {
background: transparent none repeat scroll 0 0;
border: 1px solid #ccc;
vertical-align: bottom;
height: 90px !important;
width: 90px !important;
}
div.thumbnail01 .lattice-title {
line-height: 1.5;
margin: 0 0 0 55px;
overflow: hidden;
font-size: 15px;
color:#333;
}
div.thumbnail01 div.lattice-row {
border-bottom: 1px dashed #d8d8d8;
padding: 0 0 5px;
margin: 5px 0 0;
}
div.thumbnail01 div.lattice-row:last-child{
border-bottom: none;
}
参考例2
div.thumbnail02{
width: 100%;
}
div.thumbnail02 img,
div.thumbnail02 a img {
background: transparent none repeat scroll 0 0;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 0 3px #999;
height: 45px !important;
vertical-align: bottom;
width: 45px !important;
}
div.thumbnail02 .lattice-title {
line-height: 1.5;
margin: 0 0 0 55px;
overflow: hidden;
font-size: 9px;
}
div.thumbnail02 div.lattice-row {
border-bottom: 1px dashed #d8d8d8;
padding: 0 0 5px;
margin: 5px 0 0;
}
div.thumbnail02 div.lattice-row:last-child{
border-bottom: none;
}
参考例3
div.thumbnail03{
border:solid 1px #ccc;
padding:5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
div.thumbnail03 img,
div.thumbnail03 a img {
background: transparent none repeat scroll 0 0;
border: 1px solid #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
height: 45px !important;
vertical-align: bottom;
width: 45px !important;
}
div.thumbnail03 .lattice-title {
line-height: 1.5;
margin: 0 0 0 55px;
overflow: hidden;
font-size: 9px;
}
div.thumbnail03 .lattice-title:before{
content:url(https://help.rss-loader.com/wp-content/uploads/2019/03/pick.png);
float: left !important;
height: 15px;
margin-left: 3px;
margin-top: 3px;
width: 40px;
}
div.thumbnail03 div.lattice-row {
border-bottom: 1px dashed #d8d8d8;
padding: 0 0 5px;
margin: 5px 0 0;
}
div.thumbnail03 div.lattice-row:last-child{
border-bottom: none;
}