Warning: preg_replace(): Compilation failed: escape sequence is invalid in character class at offset 9 in /home/micodesign/www/ws1/wp-content/plugins/simple-post-gallery/vendor/10quality/wpmvc-core/src/lib/functions.php on line 85

Warning: preg_replace(): Compilation failed: escape sequence is invalid in character class at offset 12 in /home/micodesign/www/ws1/wp-content/plugins/simple-post-gallery/vendor/10quality/wpmvc-core/src/lib/functions.php on line 86

Warning: preg_replace(): Compilation failed: escape sequence is invalid in character class at offset 12 in /home/micodesign/www/ws1/wp-content/plugins/simple-post-gallery/vendor/10quality/wpmvc-core/src/lib/functions.php on line 87

Warning: preg_replace(): Compilation failed: escape sequence is invalid in character class at offset 9 in /home/micodesign/www/ws1/wp-content/plugins/simple-post-gallery/vendor/10quality/wpmvc-core/src/lib/functions.php on line 85

Warning: preg_replace(): Compilation failed: escape sequence is invalid in character class at offset 12 in /home/micodesign/www/ws1/wp-content/plugins/simple-post-gallery/vendor/10quality/wpmvc-core/src/lib/functions.php on line 86

Warning: preg_replace(): Compilation failed: escape sequence is invalid in character class at offset 12 in /home/micodesign/www/ws1/wp-content/plugins/simple-post-gallery/vendor/10quality/wpmvc-core/src/lib/functions.php on line 87

◆同幅のブロックを並べる時に使う(キャプション付き画像も)
※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

Translate »