基本の形
<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="テキスト"
を設定
- キャプションが長い場合は省略表示