簡単３STEP！！メインビジュアル下に【バナーエリア】を設置

CSSデザイン

2020.10.13

メインビジュアル下に【バナーエリア】を設定

ギャラリーをかっこよくバナーエリアを作成したいとおもいませんか？

意外と簡単に設置できますよ

準備 – function.php に追記
ギャラリースタイルCSSの設定
1. アピールエリアの下にバナーエリアを置いてみました。
2. 関連サイト記事

準備 – function.php に追記

//本体ギャラリーCSS停止
add_filter( 'use_default_gallery_style', '__return_false' );

これでまず本体のギャラリー用CSSを使わない設定にしてあげます。

これをやっておかないと、いくら CSS をカスタマイズしてもギャラリーには反映されませんのでご注意です。

ギャラリースタイルCSSの設定

設定→カスタマイズ→追加CSSに保存

.gallery { width: 100%; margin-bottom: 20px!important; overflow: hidden; }
.gallery br { display: none; } 
.gallery-item { float: left; margin-bottom: 0!important; }
.gallery-icon { text-align: center; }
.gallery-icon img { width: 100%; height: auto; margin-bottom: 10px!important; }
.gallery-columns-2 .gallery-item, .gallery-columns-3 .gallery-item, .gallery-columns-4 .gallery-item, .gallery-columns-5 .gallery-item { margin: 0; }
.gallery-columns-1 .gallery-item { width: 100%; margin-right: 0; }
.gallery-columns-2 .gallery-item { width: 50%; }
.gallery-columns-3 .gallery-item { width: 33.33333%; }
.gallery-columns-4 .gallery-item { width: 25%; }
.gallery-columns-5 .gallery-item { width: 20%; }

@media screen and (max-width: 640px) {
	.gallery-icon img { margin-bottom: 0!important; }
	.gallery-columns-2 .gallery-item { width: 50%; margin: 0; }
	.gallery-columns-3 .gallery-item, .gallery-columns-4 .gallery-item { width: 50%; margin: 0; }
	.gallery-columns-5 .gallery-item { width: 31.33333%; margin: 0; }
}