Overlay Blocksの設定方法
Overlay Blocksの特徴
Overlay Blocksは、サムネイルとテキストにa:hoverの効果を付与したテンプレートになります。
テキストよりも画像をメインに押したい！という方におすすめのテンプレートです。
カーソルを合わせる事で、a:hoverの効果でテキストが表示されます。
テンプレート設定で、a:hoverの効果をON/OFFで切り替える事が可能ですので、状況に合わせて自由にカスタマイズしてみましょう！
テンプレート設定
| 設定項目 | 設定概要 |
|---|---|
| サムネール幅 | 画像サイズの横サイズ |
| サムネール高さ | 画像サイズの縦サイズ |
| 列数 | 横列に表示するフィードの数 |
| 行数 | 縦行に表示するフィードの数 |
| 画像なし項目 | サムネイルがないフィードを表示ON/OFF |
| タイトルフォントサイズ | フィードタイトルの文字サイズ |
| タイトル枠高さ最小値 | フィードタイトルの高さサイズ |
| タイトル文字色 | フィードタイトルの文字色 |
| タイトル背景色 | フィードタイトルの背景色 |
| セル間隔(たて) | 縦のpaddingの設定 |
| セル間隔(よこ) | 横のpaddingの設定 |
| セル角丸半径 | border-radiusの設定 |
| カスタムCSSコンテナクラス | クラス名の設定 |
| マウスオーバー効果 | a:hoverの効果のON/OFF設定 |
Overlay Blocksを使ったcssデザイン例(PC表示用)
参考例1
CSS
div.overlayblocks01 .lattice-overlay-title{
height:45px;
overflow:hidden;
}
参考例2
CSS
div.overlayblocks02 .lattice-overlay-title{
height:199px;
overflow:hidden;
}