CSS Class List – wordpress “Twenty Twenty”

Twenty Twenty 定義済 クラス 2.

ギャラリーのスタイルを定義済なクラス

適用されるHTMLコードの例

<div class="widget_media_gallery">
    <div class="gallery gallery-columns-3">
        <figure class="gallery-item">
            <div class="gallery-icon">
                /* ここにギャラリー用のアイテム（画像）を配置 例: <img src="" /> */
            </div>
            <figcaption class="gallery-caption">
                /* ここはアイテムのキャプションを配置 例: <p></p> */
            </figcaption>
        </figure>
        <figure class="gallery-item">
            <div class="gallery-icon">
                /* ここにギャラリー用のアイテム（画像）を配置 例: <img src="" /> */
            </div>
            <figcaption class="gallery-caption">
                /* ここはアイテムのキャプションを配置 例: <p></p> */
            </figcaption>
        </figure>
        <figure class="gallery-item">
            <div class="gallery-icon">
                /* ここにギャラリー用のアイテム（画像）を配置 例: <img src="" /> */
            </div>
            <figcaption class="gallery-caption">
                /* ここはアイテムのキャプションを配置 例: <p></p> */
            </figcaption>
        </figure>
    </div>
</div>

gallery gallery-columns-n

; ギャラリーとして表示する全体のクラス。 ※nはカラムの数 2~9が定義済

.gallery {
	display: flex;
	flex-wrap: wrap;
	margin: 3em 0 3em -0.8em;
	width: calc(100% + 1.6em);
}

	/* VANILLA GALLERIES */

	.gallery-columns-2 .gallery-item {
		max-width: 50%;
	}

	.gallery-columns-3 .gallery-item {
		max-width: 33.33%;
	}

	.gallery-columns-4 .gallery-item {
		max-width: 25%;
	}

	.gallery-columns-5 .gallery-item {
		max-width: 20%;
	}

	.gallery-columns-6 .gallery-item {
		max-width: 16.66%;
	}

	.gallery-columns-7 .gallery-item {
		max-width: 14.28%;
	}

	.gallery-columns-8 .gallery-item {
		max-width: 12.5%;
	}

	.gallery-columns-9 .gallery-item {
		max-width: 11.11%;
	}

gallery-item

; ギャラリー内のアイテムに設定するクラス

.gallery-item {
	margin: 0.8em 0;
	padding: 0 0.8em;
	width: 100%;
}

gallery-caption

; ギャラリーのキャプション クラス

.gallery-caption {
	display: block;
	margin-top: 0.8em;
}