リスト要素
リンク等に利用するための、キャラクターのリストを設置する要素です。
<div class="ecs-list リストタイプ設定用クラス">
<a href="#">キャラクター名</a>
<a href="#">キャラクター名</a>
<a href="#">キャラクター名</a>
<span>キャラクター名</span>
<span>キャラクター名</span>
<span>キャラクター名</span>
</div>
ecs-list
を設定した要素にリストタイプ設定用クラスを設定しますecs-list
を設定した要素内に<a>
を設置するとリストボタンを、<span>
を設置すると準備中レイアウトを表示します
リスト設定用クラス
ecs-list-btn | ボタン |
ecs-list-btn-img | ボタン+画像 |
ecs-list-thumbnail | サムネイル |
ボタン
<div class="ecs-list ecs-list-btn">
<a href="#">キャラクター名</a>
<span>キャラクター名</span>
<!-- 省略 -->
</div>
ボタン+画像
<div class="ecs-list ecs-list-btn-img">
<a href="#"><div><img src="【画像URL】"></div>キャラクター名</a>
<span><div><img src="【画像URL】"></div>キャラクター名</span>
<!-- 省略 -->
</div>
<a>
または<span>
の中に画像とキャラクター名を設置できます- 画像は
<div><img src="【画像URL】"></div>
の形で、<div>
で囲ってください
サムネイル
<div class="ecs-list ecs-list-thumbnail">
<a href="#"><div><img src="【画像URL】"></div>キャラクター名</a>
<span><div><img src="【画像URL】"></div>キャラクター名</span>
<!-- 省略 -->
</div>
<a>
または<span>
の中に画像とキャラクター名を設置できます- 画像は
<div><img src="【画像URL】"></div>
の形で、<div>
で囲ってください
コンテンツ要素
キャラクター情報をまとめるのに役立つ、コンテンツ要素です。
コンテンツ要素の設定
<div class="ecs-content">
<div>
<!-- 省略・ここにキャラクター情報 -->
</div>
<div>
<!-- 省略・ここにキャラクター情報 -->
<div>
<!-- 省略 -->
</div>
ecs-content
を設定した要素内に<div>
~<div>
を設置しますecs-content
を設定した要素内に<div>
~<div>
を複数設置すると、キャラクター同士の間隔を離してレイアウトします
コンテンツ列設定
1つ目の要素
2つ目の要素
3つ目の要素
<div class="ecs-content">
<div>
<div class="ecs-content-column ecs-content-column-3 ecs-content-column-sp-2">
<div>1つ目の要素</div>
<div>2つ目の要素</div>
<div>3つ目の要素</div>
</div>
</div>
</div>
- 列設定を行いたい要素に
ecs-data-column
と列設定クラスを設定すると、中に設置した要素の表示列数を増やします - PC表示時用のクラスとスマホ表示時用のクラスを一緒に設定すると、画面幅によって表示列数を変更します
列設定クラス
ecs-content-column- {1~3} | PC表示時の列設定 |
ecs-content-column-sp- {1~3} | スマホ表示時の列設定1列(スマホ表示時) |
データ要素
- データ項目名1
- データ
- データ項目名2
- データ
- データ項目名3
- データ
- データ項目名1
- データ
- データ項目名2
- データ
- データ項目名3
- データ
<div class="ecs-content">
<div>
<dl class="ecs-data">
<dt>データ項目名</dt>
<dd>データ</dd>
<!-- 省略 -->
</dl>
<dl class="ecs-data-num">
<dt>データ項目名</dt>
<dd>データ</dd>
<!-- 省略 -->
</dl>
</div>
</div>
<div>
内に設置した<dl>
にクラスecs-data
を設定すると、データ要素としてレイアウトします<div>
内に設置した<dl>
にクラスecs-data-num
を設定すると、数値データ要素としてレイアウトします。数値データ要素はデータ欄が小さく、文字が右寄せになります。
列設定
- データ名1
- データ
- データ名2
- データ
- データ名3
- データ
<div class="ecs-content">
<div>
<dl class="ecs-data ecs-data-column ecs-data-column-2 ecs-data-column-sp-1">
<dt>データ名1</dt>
<dd>データ</dd>
<!-- 省略 -->
</dl>
</div>
</div>
ecs-data
またはecs-data-num
と一緒にecs-data-column
と列設定クラスを設定すると、データ要素の列数を増やします- PC表示時用のクラスとスマホ表示時用のクラスを一緒に設定すると、画面幅によって表示列数を変更します
列設定クラス
ecs-data-column- {1~3} | PC表示時の列設定 |
ecs-data-column-sp- {1~3} | スマホ表示時の列設定 |
時系列要素
- 時系列項目1
- データ
- 時系列項目2
- データ
- 時系列項目3
- データ
<div class="ecs-content">
<div>
<dl class="ecs-history">
<dt>時系列項目名</dt>
<dd>データ</dd>
<!-- 省略 -->
</dl>
</div>
</div>
<div>
内に設置した<dl>
にクラスecs-history
を設定すると、時系列要素としてレイアウトします
画像要素
正方形・円形
<div class="ecs-content">
<div>
<div class="ecs-content-img-square"><img src="【画像URL】"></div>
</div>
</div>
<div>
内に設置した<div>
にクラスecs-content-img-square
またはecs-content-img-circle
を設定すると、その中に設置した画像を正方形にレイアウトします
正方形・円形(小)
<div class="ecs-content">
<div>
<div class="ecs-content-img-square-sm"><img src="【画像URL】"></div>
</div>
</div>
<div>
内に設置した<div>
にクラスecs-content-img-square-sm
またはecs-content-img-circle-sm
を設定すると、その中に設置した画像を正方形にレイアウトします
縦型
<div class="ecs-content">
<div>
<div class="ecs-content-img-vertical"><img src="【画像URL】"></div>
</div>
</div>
<div>
内に設置した<div>
にクラスecs-content-img-vertical
を設定すると、その中に設置した画像を正方形にレイアウトします
画像横にコンテンツ配置
通常配置
画像横コンテンツ
<div class="ecs-content">
<div>
<div class="ecs-content-outer-img">
<div class="ecs-content-img-square"><img src="【画像URL】"></div>
<div>
<p>画像横コンテンツ</p>
</div>
</div>
</div>
</div>
<div>
内にecs-content-img-square
またはecs-content-img-vertical
を<div class="ecs-content-outer-img">
~</div>
で囲みます
※正方形・円形(小)を使用する場合は、ecs-content-outer-img-sm
にしてくださいecs-content-img-square
またはecs-content-img-vertical
の隣に、画像横に表示したいコンテンツ<div>
~<div>
を設置します
反対配置
画像横コンテンツ
<div class="ecs-content">
<div>
<div class="ecs-content-outer-img-reverse">
<div>
<p>画像横コンテンツ</p>
</div>
<div class="ecs-content-img-vertical"><img src="【画像URL】"></div>
</div>
</div>
</div>
<div>
~<div>
とecs-content-img-square
またはecs-content-img-vertical
の位置を入れ替え、ecs-content-outer-img
をecs-content-outer-img-reverse
に変更すると、画像の位置を反対にしてレイアウトします
※正方形・円形(小)を使用する場合は、ecs-content-outer-img-sm-reverse
にしてください
スマホ表示で解除
画像横コンテンツ
<div class="ecs-content">
<div>
<div class="ecs-content-outer-img ecs-content-outer-sp-none">
<div>
<p>画像横コンテンツ</p>
</div>
<div class="ecs-content-img-square"><img src="【画像URL】"></div>
</div>
</div>
</div>
ecs-content-outer-img
またはecs-content-outer-img-reverse
と一緒にecs-content-outer-sp-none
を設定すると、スマホ表示時は上下にレイアウトします