ホームページのデザインを崩さず、ほぼコピー&ペーストでサムネイルギャラリーを取り入れられるデザインCSS。
イラストや漫画・小説のサムネイル展示に。
設置方法
<head>~</head>の間で「my-gallery.css」を読み込みんでください
（href内のパスは環境に合わせて変更してください 不安な場合は、http://から始まる絶対パスで指定してください）
<link rel="stylesheet" href="my-gallery/my-gallery.css">- ドキュメント（2ページ目にあります）に沿って、HTMLファイル内にタグを記述してください
サイトのデザインに合わせて設定する
このデザインCSSでは以下のカスタムプロパティを変更することでデザインの変更が可能です。
| カスタムプロパティ | 概要 | 初期値 |
|---|---|---|
--emg-count-pc | 1行に表示する枚数（PC） | 8 |
--emg-gap-pc | 画像間のスペース（PC） | 20px |
--emg-count-sp | 1行に表示する枚数（スマホ） | 3 |
--emg-gap-sp | 画像間のスペース（スマホ） | 10px |
--emg-radius | 角丸サイズ | 10px |
--emg-border-width | 枠線幅 | 1px |
--emg-border-color | 枠線色 | #333 |
--emg-shadow-color | 影色 | rgba(51, 51, 51, 0.25) |
--emg-new-bg-color | 新着マーク背景色 | #333 |
--emg-new-text-color | 新着マーク文字色 | #fff |
--emg-caption-bg-color | キャプション背景色 | rgba(0, 0, 0, 0.2) |
--emg-caption-text-color | キャプション文字色 | #fff |
※rgba設定の項目も、透過させない場合はカラーコードで指定でOK
サンプルに使用している画像モーダルスクリプト
Lightbox2
Lightbox is a script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.
lokeshdhakar.com
Spotlight.js - Modern HTML5 Image Gallery
WinBox is the web's most easy to integrate lightbox gallery library. Super-lightweight, outstanding performance, no depe...
nextapps-de.github.io
【プログラム配布】サムネイルをクリックすると画像がフワッと出てくる「fuwaimg」 | do - 創作・同人サイト制作支援サイト
創作・同人サイト向けプログラム。LightBoxのような、リンクをクリックすると画像がふわっと表示されるモーダルウインドウ。javascript製、jQuery不使用。
do.gt-gt.org
更新履歴
- 2021.10.20公開・配布開始
- 2022.11.08仕様変更
- 各クラスの接頭語「
gl」を「emg」に変更 - カスタムプロパティの設定項目を追加
- 「サイズ設定クラス」「余白設定クラス」を廃止
- 各クラスの接頭語「
- 2023.01.17fuwaimg使用時のサンプル追加
新着マークとキャプションの併用ができないバグを修正
ドキュメント
次のページにドキュメントをご用意しています。
