コンテンツエリア
ブロック表示
コンテンツタイトル
コンテンツ本文
コンテンツタイトル
コンテンツ本文
<div class="area area-block">
<div>
<div class="title">コンテンツタイトル</div>
<div class="thumbnail"><img src="画像URL"></div>
<div class="body">
コンテンツ本文
</div>
</div>
<div>
<div class="thumbnail"><img src="画像URL"></div>
<div class="title">コンテンツタイトル</div>
<div class="body">
コンテンツ本文
</div>
</div>
</div>
class="area area-block"
を設定した要素の中に<div>
~<div>
を入れると1ブロックとして扱います<div>
~<div>
の中には以下の要素が使用可能です
※div内の構成はリスト表示と同じですclass="title"
class="thumbnail"
class="body"
コンテンツタイトル
コンテンツ本文
コンテンツタイトル
コンテンツ本文
コンテンツタイトル
コンテンツ本文
<div class="area area-block area-block-3">
<div>~</div>
</div>
area
クラスを設定した要素にarea-block-3
を設定すると、PC表示の場合ブロックを3列にして表示します
リスト表示
コンテンツタイトル
コンテンツ本文
コンテンツタイトル
コンテンツ本文
<div class="area area-list">
<div>
<div class="title">コンテンツタイトル</div>
<div class="thumbnail"><img src="画像URL"></div>
<div class="body">
コンテンツ本文
</div>
</div>
<div>
<div class="thumbnail"><img src="画像URL"></div>
<div class="title">コンテンツタイトル</div>
<div class="body">
コンテンツ本文
</div>
</div>
</div>
class="area area-list"
を設定した要素の中に<div>
~<div>
を入れると1ブロックとして扱います<div>
~<div>
の中には以下の要素が使用可能です
※div内の構成はリスト表示と同じですclass="title"
class="thumbnail"
class="body"
枠線設定
コンテンツタイトル
コンテンツ本文
コンテンツタイトル
コンテンツ本文
コンテンツタイトル
コンテンツ本文
コンテンツタイトル
コンテンツ本文
<div class="area area-block area-border">
<div>~<div>
<div>~<div>
</div>
<div class="area area-list area-border">
<div>~<div>
<div>~<div>
</div>
area
クラスを設定した要素にarea-border
を設定すると、各ブロックに枠線が表示されます
新着マーク
コンテンツタイトル
コンテンツ本文
<div class="area area-block">
<div>
<div class="thumbnail new"><img src="画像URL"></div>
</div>
<div>
<div class="title new">コンテンツタイトル</div>
</div>
<div>
<div class="body new">コンテンツ本文</div>
</div>
</div>
class="thumbnail"
,class="title"
,class="body"
にnew
を設定すると新着マークがつきます