https://wjs-hugo-stack.pages.dev/ja/tags/photoswipe/ Recent content in Photoswipe on Hugo Theme Stack Hugo -- gohugo.io ja Mon, 26 Jan 2026 00:00:00 +0000 https://wjs-hugo-stack.pages.dev/ja/p/image-gallery/ Mon, 26 Jan 2026 00:00:00 +0000 https://wjs-hugo-stack.pages.dev/ja/p/image-gallery/ <img src="https://wjs-hugo-stack.pages.dev/" alt="Featured image of post 写真ギャラリー" /><p>Stack テーマには、写真ギャラリー機能が内蔵されています。複数の画像を並べて配置するだけで、美しいギャラリーを作成できます。</p> <h2 id="ギャラリーの例">ギャラリーの例 </h2><p><img src="https://wjs-hugo-stack.pages.dev/p/image-gallery/florian-klauer-nptLmg6jqDo-unsplash.jpg" width="667" height="1000" loading="lazy" alt="Photo by Florian Klauer on Unsplash" class="gallery-image" data-flex-grow="66" data-flex-basis="160px" > <img src="https://wjs-hugo-stack.pages.dev/p/image-gallery/luca-bravo-alS7ewQ41M8-unsplash.jpg" width="1000" height="667" loading="lazy" alt="Photo by Luca Bravo on Unsplash" class="gallery-image" data-flex-grow="149" data-flex-basis="359px" ></p> <p><img src="https://wjs-hugo-stack.pages.dev/p/image-gallery/helena-hertz-wWZzXlDpMog-unsplash.jpg" width="1000" height="750" loading="lazy" alt="Photo by Helena Hertz on Unsplash" class="gallery-image" data-flex-grow="133" data-flex-basis="320px" > <img src="https://wjs-hugo-stack.pages.dev/p/image-gallery/hudai-gayiran-3Od_VKcDEAA-unsplash.jpg" width="667" height="1000" loading="lazy" alt="Photo by Hudai Gayiran on Unsplash" class="gallery-image" data-flex-grow="66" data-flex-basis="160px" ></p> <h2 id="仕組み">仕組み </h2><p>ギャラリーは <strong>Photoswipe</strong> と独自の内部スクリプトによって動作します。画像の縦横比に基づいて、最適なレイアウトが自動的に計算されます。</p> <p>ギャラリーを作成するには、同じ行（または同じ段落）に複数の画像を配置するだけです。</p> <h3 id="構文">構文 </h3><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">![<span class="nt">画像 1</span>](<span class="na">image1.jpg</span>) ![<span class="nt">画像 2</span>](<span class="na">image2.jpg</span>) </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">![<span class="nt">画像 3</span>](<span class="na">image3.jpg</span>) ![<span class="nt">画像 4</span>](<span class="na">image4.jpg</span>) </span></span></code></pre></td></tr></table> </div> </div> <blockquote> <p><strong>注意</strong>: Markdown で画像が同じ行に保持されるように、画像の間には 2 つのスペースを入れる必要があります。</p> </blockquote> <hr> <p>ギャラリーの構文は <a class="link" href="https://typlog.com/" target="_blank" rel="noopener" >Typlog</a> にインスパイアされています。</p>