テンプレート「Overlay Blocks」の設定方法

Overlay Blocksの設定方法

テンプレート「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;
}