<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Masonry &#8211; WordPress Memo</title>
	<atom:link href="https://blog.riverforest-wp.info/tag/masonry/feed/" rel="self" type="application/rss+xml" />
	<link>https://blog.riverforest-wp.info</link>
	<description>WordPress に関する覚え書き</description>
	<lastBuildDate>Fri, 09 May 2025 12:48:52 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://blog.riverforest-wp.info/wp-content/uploads/2018/05/cropped-icon-256x256-1-32x32.png</url>
	<title>Masonry &#8211; WordPress Memo</title>
	<link>https://blog.riverforest-wp.info</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>ブロックによるHTMLとCSSだけで動くギャラリープラグイン</title>
		<link>https://blog.riverforest-wp.info/simple-block-gallery/</link>
		
		<dc:creator><![CDATA[Katsushi Kawamori]]></dc:creator>
		<pubDate>Wed, 22 Jan 2020 22:58:32 +0000</pubDate>
				<category><![CDATA[Plugin]]></category>
		<category><![CDATA[Masonry]]></category>
		<category><![CDATA[ギャラリー]]></category>
		<category><![CDATA[スライダー]]></category>
		<category><![CDATA[ブロック]]></category>
		<category><![CDATA[画像]]></category>
		<guid isPermaLink="false">https://blog.riverforest-wp.info/?p=1947</guid>

					<description><![CDATA[はじめに ブロックによるギャラリープラグインです。一番の特徴は、HTML と CSS だけで動く事です。そのため、プラグインを止めても、保存したコンテンツは残り崩れません。 いろいろと凄いギャラリープラグインはありますが [&#8230;]]]></description>
										<content:encoded><![CDATA[
<h3 class="wp-block-heading">はじめに</h3>



<p>ブロックによるギャラリープラグインです。一番の特徴は、HTML と CSS だけで動く事です。そのため、プラグインを止めても、保存したコンテンツは残り崩れません。</p>



<div class="pluginstatsview-card-wrap">
	<div>
		<img decoding="async" src="https://ps.w.org/simple-block-gallery/assets/icon-256x256.png?rev=2231863" alt="Simple Block Gallery のアイコン" class="pluginstatsview-card-icon" />
		<div class="pluginstatsview-after-icon">
			<div class="pluginstatsview-bold"><a href="https://wordpress.org/plugins/simple-block-gallery/" class="pluginstatsview-astyle">Simple Block Gallery</a></div>
			<div class="pluginstatsview-small">画像にタイルとスライダーのエフェクトを追加します。</div>
			<div class="pluginstatsview-small">作者: <a href="https://profiles.wordpress.org/katsushi-kawamori/">Katsushi Kawamori</a></div>
			<div style="clear: both;"></div>
		</div>
	</div>
	<div style="clear: both;"></div>

	<div class="pluginstatsview-small">
		<span class="pluginstatsview-card-left"><a href="https://wordpress.org/plugins/simple-block-gallery/#reviews" title="3.0(5点満点中)" class="pluginstatsview-astyle">	<span class="pluginstatsview-stars">
					<span class="dashicons dashicons-star-filled"></span><span class="dashicons dashicons-star-filled"></span><span class="dashicons dashicons-star-filled"></span><span class="dashicons dashicons-star-empty"></span><span class="dashicons dashicons-star-empty"></span>
			</span>
	</a>(1)</span>
		<span class="pluginstatsview-card-right">最終更新: 3週間 前</span>
	</div>
	<div class="pluginstatsview-small">
		<span class="pluginstatsview-card-left">1,000以上サイトで有効化中</span>
		<span class="pluginstatsview-card-right">検証済み: 7.0</span>
	</div>
	<div class="pluginstatsview-small">
		<span class="pluginstatsview-card-left">ダウンロード: <a href="https://downloads.wordpress.org/plugin/simple-block-gallery.1.29.zip" class="dashicons dashicons-download pluginstatsview-download"></a></span>
		<span class="pluginstatsview-card-right">リリース: 2020-01-22</span>
	</div>
	<div class="pluginstatsview-small pluginstatsview-card-center">
		2026-04-21 08:56 時点の統計	</div>
</div>



<p>いろいろと凄いギャラリープラグインはありますが、そのほとんどが、プラグインを止めるとコンテンツが崩れてしまいます。プラグインのサポートがあるうちは良いですが、サポートが無くなった場合に苦労する場合が多いので、HTML と CSS だけで動くものがあってもいいかな？と思い、作りました。そのため機能は必要最小限です。</p>



<p>さらに細かく調整したい場合は、ブロックメニュー「HTMLとして編集」で HTML と CSS を編集してください。</p>



<h3 class="wp-block-heading">仕様</h3>



<ul class="wp-block-list">
<li>Masonry
<ul class="wp-block-list">
<li>１画像の幅を指定できます。</li>



<li>画像間のスペースを指定できます。</li>



<li>画像の角を丸くできます。</li>
</ul>
</li>



<li>スライダー
<ul class="wp-block-list">
<li>スライド間隔を指定できます。</li>



<li><strong>注意：</strong>CSS のクラスと、@keyframes に、ギャラリーの最初に呼び出される画像の ID を指定していますので、同一投稿内の複数のスライダーの最初の画像に同じ画像を指定すると、表示が乱れます。</li>
</ul>
</li>
</ul>



<figure class="wp-block-gallery aligncenter has-nested-images columns-1 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex">
<figure data-wp-context="{&quot;imageId&quot;:&quot;69e6bf8db724a&quot;}" data-wp-interactive="core/image" data-wp-key="69e6bf8db724a" class="wp-block-image size-large wp-lightbox-container"><img fetchpriority="high" loading="eager" decoding="async" width="1024" height="599" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles" data-id="1951" src="https://blog.riverforest-wp.info/wp-content/uploads/20200122/screenshot-1-1024x599.png" alt="" class="wp-image-1951" srcset="https://blog.riverforest-wp.info/wp-content/uploads/20200122/screenshot-1-1024x599.png 1024w, https://blog.riverforest-wp.info/wp-content/uploads/20200122/screenshot-1-300x175.png 300w, https://blog.riverforest-wp.info/wp-content/uploads/20200122/screenshot-1-768x449.png 768w, https://blog.riverforest-wp.info/wp-content/uploads/20200122/screenshot-1.png 1497w" sizes="(max-width: 1024px) 100vw, 1024px" /><button
			class="lightbox-trigger"
			type="button"
			aria-haspopup="dialog"
			aria-label="拡大する"
			data-wp-init="callbacks.initTriggerButton"
			data-wp-on--click="actions.showLightbox"
			data-wp-style--right="state.imageButtonRight"
			data-wp-style--top="state.imageButtonTop"
		>
			<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
				<path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" />
			</svg>
		</button></figure>



<figure data-wp-context="{&quot;imageId&quot;:&quot;69e6bf8db7782&quot;}" data-wp-interactive="core/image" data-wp-key="69e6bf8db7782" class="wp-block-image size-large wp-lightbox-container"><img loading="lazy" decoding="async" width="1024" height="524" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles" data-id="1952" src="https://blog.riverforest-wp.info/wp-content/uploads/20200122/screenshot-2-1024x524.png" alt="" class="wp-image-1952" srcset="https://blog.riverforest-wp.info/wp-content/uploads/20200122/screenshot-2-1024x524.png 1024w, https://blog.riverforest-wp.info/wp-content/uploads/20200122/screenshot-2-300x154.png 300w, https://blog.riverforest-wp.info/wp-content/uploads/20200122/screenshot-2-768x393.png 768w, https://blog.riverforest-wp.info/wp-content/uploads/20200122/screenshot-2.png 1517w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><button
			class="lightbox-trigger"
			type="button"
			aria-haspopup="dialog"
			aria-label="拡大する"
			data-wp-init="callbacks.initTriggerButton"
			data-wp-on--click="actions.showLightbox"
			data-wp-style--right="state.imageButtonRight"
			data-wp-style--top="state.imageButtonTop"
		>
			<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
				<path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" />
			</svg>
		</button></figure>



<figure data-wp-context="{&quot;imageId&quot;:&quot;69e6bf8db7de6&quot;}" data-wp-interactive="core/image" data-wp-key="69e6bf8db7de6" class="wp-block-image size-large wp-lightbox-container"><img loading="lazy" decoding="async" width="1024" height="524" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles" data-id="1953" src="https://blog.riverforest-wp.info/wp-content/uploads/20200122/screenshot-3-1024x524.png" alt="" class="wp-image-1953" srcset="https://blog.riverforest-wp.info/wp-content/uploads/20200122/screenshot-3-1024x524.png 1024w, https://blog.riverforest-wp.info/wp-content/uploads/20200122/screenshot-3-300x154.png 300w, https://blog.riverforest-wp.info/wp-content/uploads/20200122/screenshot-3-768x393.png 768w, https://blog.riverforest-wp.info/wp-content/uploads/20200122/screenshot-3.png 1517w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><button
			class="lightbox-trigger"
			type="button"
			aria-haspopup="dialog"
			aria-label="拡大する"
			data-wp-init="callbacks.initTriggerButton"
			data-wp-on--click="actions.showLightbox"
			data-wp-style--right="state.imageButtonRight"
			data-wp-style--top="state.imageButtonTop"
		>
			<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
				<path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" />
			</svg>
		</button></figure>
</figure>



<h3 class="wp-block-heading">動作</h3>



<figure class="wp-block-video aligncenter"><video height="720" style="aspect-ratio: 1280 / 720;" width="1280" controls src="https://blog.riverforest-wp.info/wp-content/uploads/20200122/simple-block-gallery.mp4"></video></figure>
]]></content:encoded>
					
		
		<enclosure url="https://blog.riverforest-wp.info/wp-content/uploads/20200122/simple-block-gallery.mp4" length="39784937" type="video/mp4" />

			</item>
	</channel>
</rss>
