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