my gallery

parts

基本の形

<div class="emg-base">
    <div><img src="【画像URL】"></div>
</div>
  • 親要素のclassemg-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を設定した要素に修飾設定用クラスを設定
  • 枠線と影は併用可能

修飾設定用クラス一覧

枠線emg-border
emg-shadow

新着マーク

<div class="emg-base">
    <div class="new"><img src="【画像URL】"></div>
</div>
  • emg-base直下のdivclass="new"を設定

キャプション

<div class="emg-base emg-caption">
    <div data-text="テキスト"><img src="【画像URL】"></div>
</div>
  • emg-baseを設定した要素にemg-captionを設定
  • emg-base直下のdivdata-text="テキスト"を設定
  • キャプションが長い場合は省略表示
タイトルとURLをコピーしました