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