基本の形
<div class="emg-base">
<div><img src="【画像URL】"></div>
</div>
- 親要素の
classにemg-baseを設定
emg-base直下に<img>を入れた<div>を設置
<div>を増やすとサムネイルが増える
配置の設定
<div class="emg-base emg-center">
<div><img src="【画像URL】"></div>
</div>
emg-baseを設定した要素に配置設定用クラスを設定
- 配置設定用クラスがなければデフォルトの設定を適応
配置設定用クラス
| 左寄せ(デフォルト) | 指定なし |
| 中央寄せ | emg-center |
| 右寄せ | emg-right |
| 均等配置(外余白あり) | emg-evenly |
| 均等配置(外余白なし) | emg-between |
形
<div class="emg-base emg-rounded">
<div><img src="【画像URL】"></div>
</div>
emg-baseを設定した要素に形設定用クラスを設定
- 形設定用クラスがなければデフォルトの設定(四角形)を適応
形設定用クラス一覧
1~5列まで。
設定しない場合1列で表示。
スマホの場合、2~3列は1列、4~5列は2列にして表示する。
| 四角形 | 指定なし |
| 角丸 | emg-rounded |
| 円 | emg-circle |
装飾
<div class="emg-base emg-border">
<div><img src="【画像URL】"></div>
</div>
emg-baseを設定した要素に修飾設定用クラスを設定
- 枠線と影は併用可能
修飾設定用クラス一覧
新着マーク
<div class="emg-base">
<div class="new"><img src="【画像URL】"></div>
</div>
emg-base直下のdivにclass="new"を設定
キャプション
<div class="emg-base emg-caption">
<div data-text="テキスト"><img src="【画像URL】"></div>
</div>
emg-baseを設定した要素にemg-captionを設定
emg-base直下のdivにdata-text="テキスト"を設定
- キャプションが長い場合は省略表示