WordPressのギャラリーブロックをカスタマイズする方法

はじめに

WordPressのギャラリーブロックはGutenbergブロックエディタに標準搭載されています。CSSで見た目を変更したり、JavaScriptでライトボックスを追加したりすることで、より魅力的なギャラリーを実現できます。

症状・原因

• ギャラリーの余白や列数をデザインに合わせて変更したい
• 画像クリックで拡大表示（ライトボックス）を追加したい
• ホバー時のエフェクトを付けたい
• ギャラリーブロックが崩れて表示される

解決手順

ステップ1：ギャラリーブロックの基本CSSを理解する

/* ギャラリーブロックのHTML構造 */
/*
<figure class="wp-block-gallery has-nested-images columns-3">
  <figure class="wp-block-image size-large">
    <img src="..." alt="...">
  </figure>
  ...
</figure>
*/

/* 子テーマのstyle.css またはLP用CSSに追加 */

/* 余白の調整 */
.wp-block-gallery {
    gap: 12px; /* 画像間の余白（デフォルト: 16px） */
}

/* 画像の角丸 */
.wp-block-gallery .wp-block-image img {
    border-radius: 8px;
    overflow: hidden;
}

/* 列数をレスポンシブに調整 */
@media (max-width: 768px) {
    .wp-block-gallery.columns-3,
    .wp-block-gallery.columns-4 {
        --wp--style--gallery-gap-default: 8px;
    }
    .wp-block-gallery.columns-3 .wp-block-image,
    .wp-block-gallery.columns-4 .wp-block-image {
        flex-basis: calc(50% - 4px) !important;
    }
}

ステップ2：ホバーエフェクトを追加する

/* style.css — ギャラリー画像ホバーエフェクト */
.wp-block-gallery .wp-block-image {
    overflow: hidden;
    border-radius: 8px;
}

.wp-block-gallery .wp-block-image img {
    transition: transform 0.3s ease, filter 0.3s ease;
    display: block;
    width: 100%;
}

.wp-block-gallery .wp-block-image:hover img {
    transform: scale(1.05);
    filter: brightness(0.9);
}

/* オーバーレイエフェクト */
.wp-block-gallery .wp-block-image {
    position: relative;
}

.wp-block-gallery .wp-block-image::after {
    content: '🔍';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.3s;
}

.wp-block-gallery .wp-block-image:hover::after {
    opacity: 1;
}

ステップ3：ライトボックスを追加する

// functions.php — Lightbox2 スクリプトを登録
add_action('wp_enqueue_scripts', function(): void {
    if (!is_singular()) return;

    wp_enqueue_style(
        'lightbox2',
        'https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/css/lightbox.min.css',
        [],
        '2.11.4'
    );
    wp_enqueue_script(
        'lightbox2',
        'https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/js/lightbox.min.js',
        ['jquery'],
        '2.11.4',
        true
    );

    // ギャラリーリンクにdata-lightbox属性を追加するスクリプト
    wp_add_inline_script('lightbox2', "
        document.addEventListener('DOMContentLoaded', function() {
            var galleries = document.querySelectorAll('.wp-block-gallery');
            galleries.forEach(function(gallery, gIndex) {
                var links = gallery.querySelectorAll('a[href]');
                links.forEach(function(link) {
                    if (/\\.(jpg|jpeg|png|gif|webp)/i.test(link.href)) {
                        link.setAttribute('data-lightbox', 'gallery-' + gIndex);
                    }
                });
            });
        });
    ");
});

ステップ4：ブロックエディタにカスタムスタイルを追加する

// functions.php — エディタでもギャラリーのスタイルを反映
add_action('after_setup_theme', function(): void {
    add_theme_support('editor-styles');
    add_editor_style('css/editor-gallery.css');
});

/* css/editor-gallery.css */
.wp-block-gallery .wp-block-image img {
    border-radius: 8px;
    transition: transform 0.3s ease;
}

ステップ5：ギャラリーブロックのデフォルト設定を変更する

// theme.json（テーマルートに配置）
{
    "version": 2,
    "settings": {
        "blocks": {
            "core/gallery": {
                "spacing": {
                    "blockGap": "12px"
                }
            }
        }
    }
}

注意事項

• WordPress 6.0以降、ギャラリーブロックの内部構造が変わりました（
  から

  ネスト構造へ）。古いCSSセレクタが効かない場合はHTML構造を確認してください

  外部CDNのライトボックスライブラリを使用する場合は、サードパーティリソースの読み込みによるパフォーマンスへの影響を考慮してください

  wp-block-gallery.columns-3 などのクラスはエディタで設定した列数に応じて自動付与されます

  まとめ

  ギャラリーブロックのカスタマイズは、.wp-block-gallery と .wp-block-image セレクタへのCSS追加で実現します。ホバーエフェクト・丸角・ライトボックスを組み合わせることで、WordPressのデフォルトを超えるギャラリーが作れます。

  Post Views: 14