my gallery

parts

ホームページのデザインを崩さず、ほぼコピー&ペーストでサムネイルギャラリーを取り入れられるデザインCSS。

イラストや漫画・小説のサムネイル展示に。

設置方法

  1. <head>~</head>の間で「my-gallery.css」を読み込みんでください
    href内のパスは環境に合わせて変更してください 不安な場合は、http://から始まる絶対パスで指定してください)
<link rel="stylesheet" href="my-gallery/my-gallery.css">
  1. ドキュメント(2ページ目にあります)に沿って、HTMLファイル内にタグを記述してください

サイトのデザインに合わせて設定する

このデザインCSSでは以下のカスタムプロパティを変更することでデザインの変更が可能です。

カスタムプロパティ概要初期値
--emg-count-pc1行に表示する枚数(PC)8
--emg-gap-pc画像間のスペース(PC)20px
--emg-count-sp1行に表示する枚数(スマホ)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.
Spotlight.js - Modern HTML5 Image Gallery
WinBox is the web's most easy to integrate lightbox gallery library. Super-lightweight, outstanding performance, no dependencies.
【プログラム配布】サムネイルをクリックすると画像がフワッと出てくる「fuwaimg」 | do - 創作・同人サイト制作支援サイト
創作・同人サイト向けプログラム。LightBoxのような、リンクをクリックすると画像がふわっと表示されるモーダルウインドウ。javascript製、jQuery不使用。

更新履歴

  • 2021.10.20
    公開・配布開始

  • 2022.11.08
    仕様変更
    • 各クラスの接頭語「gl」を「emg」に変更
    • カスタムプロパティの設定項目を追加
    • 「サイズ設定クラス」「余白設定クラス」を廃止
  • 2023.01.17
    guwaimg使用時のサンプル追加
    新着マークとキャプションの併用ができないバグを修正

ドキュメント

次のページにドキュメントをご用意しています。

タイトルとURLをコピーしました