Gallery
◆同幅のブロックを並べる時に使う(キャプション付き画像も)
※margin は ブロック外の余白~ブロック幅 25% + margin:10px; =25% + 10px・・・3ブロックしか並ばない
※padding はブロック内の余白~ブロック幅 25% + padding:10px; =25%・・・4ブロック並ぶ
テーマ「Edge」は、左右の余白が margin なので padding に修正
display: inline-block; を追加 text-align: center; は好みで
/*————————————————————–
13.2 Galleries 変更
————————————————————–*/
.gallery-item {
float: left;
margin: 0 4px 4px 0;
overflow: hidden;
position: relative;
}
↓ に変更
.gallery-item {
float: left;
display: inline-block;
padding: 0 20px 24px;
text-align: center;
overflow: hidden;
position: relative;
}
/*————————————————————–
20.0 追加
————————————————————–*/
@media only screen and (max-width: 768px) {
.gallery-columns-4 .gallery-item { width: 50%;}
@media only screen and (max-width: 480px) {
.gallery-columns-2 .gallery-item,
.gallery-columns-3 .gallery-item,
.gallery-columns-4 .gallery-item { width: 100%;}
}
ul class=”gallery-columns-2″ 数字は列数
li class=”gallery-item”
◆ gallery-columns-2
◆ gallery-columns-3
◆ gallery-columns-4