Classicの設定方法
Classicの特徴
Classicはサムネイルとテキストを組み合わせたテンプレートになります。
画像をメインにしているブログや、記事のサムネイルに力を入れているブログとの相性が抜群です。
また、広告を適度に挿入する事でCTRが高めに出る傾向にあります。
ヘッダーや記事終わりにタグを埋め込む事で回遊率のUPも見込めるテンプレートです！
テンプレート設定
| 設定項目 | 設定概要 |
|---|---|
| サムネール幅 | 画像サイズの横サイズ |
| サムネール高さ | 画像サイズの縦サイズ |
| 列数 | 横列に表示するフィードの数 |
| 行数 | 縦行に表示するフィードの数 |
| 画像なし項目 | サムネイルがないフィードの表示ON/OFF設定 |
| タイトルフォントサイズ | フィードタイトルの文字サイズ |
| タイトル枠高さ最小値 | フィードタイトルの高さサイズ |
| タイトル文字色 | フィードタイトルの文字色 |
| タイトル背景色 | フィードタイトルの背景色 |
| セル間隔(たて) | 縦のpadding設定 |
| セル間隔(よこ) | 横のpadding設定 |
| セル角丸半径 | border-radiusの設定 |
| カスタムCSSコンテナクラス | クラス名の設定 |
Classicを使ったcssデザイン例(PC表示用)
参考例1
CSS
div.classic02 .lattice-cell{
border:2px solid rgba(0, 0, 0, 0.7);
}
div.classic02 .lattice-title{
height:50px;
background:rgba(0, 0, 0, 0.7);
}
div.classic02 .lattice-title div{
height:45px;
overflow: hidden;
}
参考例2
CSS
div.classic03 .lattice-cell{
border:1px solid #ccc;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
padding:10px 10px 0px;
height:175px;
}
div.classic03 .lattice-title{
height:50px;
background:#fff;
color:#666;
font-size: 13px;
}
.classic03 .lattice-title div{
height:40px;
overflow:hidden;
}