ギャラリーブロックが横並びにならず縦一列になる(.wp-block-gallery の –wp–style–block-gap 上書きに対応する gap が出力されていない)
VWSとは › フォーラム › Lightning › ギャラリーブロックが横並びにならず縦一列になる(.wp-block-gallery の –wp–style–block-gap 上書きに対応する gap が出力されていない)
ギャラリーブロックが横並びにならず縦一列になる(.wp-block-gallery の –wp–style–block-gap 上書きに対応する gap が出力されていない)
-
投稿者投稿
-
2026年8月20日 10:40 PM #129907
ebi参加者■ WordPress のバージョン
7.1■ テーマ・プラグインは全て最新版で確認してください。
確認しました。■ 子テーマをご利用の場合は親テーマに変更して症状が改善するか確認してください。
確認しました。■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit■ テーマのバージョン
15.37.1■ Pro Unit のバージョン
0.31.0■ スキンの種類
Origin III■ 関連しそうなプラグインを一つずつ停止して症状が改善するか確認してください。
確認しました。■ プラグインの種類・バージョン
Akismet Anti-spam: Spam Protection 5.7.2
All-in-One WP Migration and Backup 7.109
Lightning G3 Pro Unit 0.31.0
SiteGuard WP Plugin 1.8.9
Smash Balloon Instagram Feed 6.12.0
VK All in One Expansion Unit 9.122.0
VK Blocks Pro 1.125.0
Wordfence Security 9.0.0
Yoast SEO 28.3※ すべて最新版です(管理画面「更新」にて、WordPress本体・テーマ・プラグインいずれも
最新である旨の表示を確認済み)。■ 期待する動作
ギャラリーブロックに画像を2枚入れた場合、公開ページでも編集画面と同じく
1行に2枚が横並びで表示されること(3枚の場合は1行3枚)。
WordPress コア標準のギャラリーブロックの挙動を期待しています。■ 自分で試した事
1. ブラウザの開発者ツールで、ギャラリー要素と各画像の computed style を実測しました。
画像の幅が 930px(親要素と同幅)、gap が 24px、
–wp–style–unstable-gallery-gap の実効値が 0.5em であることを確認しました。2. ページ内の全スタイルシートを走査し、–wp–style–block-gap を定義している
ルールを記述順で洗い出しました。該当は次の2つのみでした。・global-styles-inline-css の :root → 24px
・lightning-common-style-css の .wp-block-gallery → 0.5emプラグイン由来のルールは1件もありませんでした。
また .wp-block-gallery に対して gap を指定しているルールも存在しませんでした。3. 検証として –wp–style–gallery-gap-default を実際の gap と同じ 24px に
設定して再測定したところ、下記の通り症状が解消しました。画像1枚の幅 1行あたりの枚数
設定前 930px 1枚(縦一列)
設定後 453px 2枚(横並び)453 x 2 + 24 = 930px となり、親要素の幅とちょうど一致して折り返しが解消されます。
3枚組のギャラリーについても、同じ設定で1行3枚(各294px)に復帰することを
確認しました。4. 暫定対処として、追加CSSに下記を記述して回避しています。
.wp-block-gallery.has-nested-images {
–wp–style–gallery-gap-default: 24px;
}なお –wp–style–unstable-gallery-gap を直接上書きする方法は機能しませんでした。
追加CSS(wp-custom-css)より後に core-block-supports-inline-css が出力されており、
詳細度が同じ(クラス2つ)ため後勝ちで打ち消されるためです。5. WordPress本体・テーマ・プラグインがすべて最新版であることを
管理画面の「更新」で確認済みです。■ 症状が発生するブラウザ
Brave 1.93.136(Chromium ベース)■ 実際の症状
編集画面では2枚が横並びで表示されるにもかかわらず、公開ページでは
2枚が縦一列に並び、各画像が本文カラムの全幅まで拡大されてしまいます。
3枚組のギャラリーでも同様に縦一列になります。
カラム数は初期値のまま(columns-default)です。当サイトではギャラリーブロックを使用している3ページ・計7箇所すべてで
同じ症状が発生していました。■ 原因として特定した内容
Lightning の下記ファイルが、ギャラリーブロックに限って
–wp–style–block-gap を上書きしています。/wp-content/themes/lightning/_g3/assets/css/style-theme-json.css
(ハンドル: lightning-common-style-css).wp-block-gallery {
–wp–style–block-gap: 0.5em;
}この結果、変数の実効値は次のようになります。
html : 24px
body : 24px
.wp-block-gallery : 0.5em ← Lightning による上書き一方で、ギャラリーブロック専用の gap は出力されていません。
ページ内の全スタイルシートを走査しましたが、.wp-block-gallery に対して
gap を指定しているルールは1つも存在しませんでした。
実際に適用されている gap は、全ブロック共通の下記ルールによる 24px です。:root :where(.is-layout-flex) {
gap: 24px;
}ところが、WordPress コアはギャラリー画像の幅を次のように計算します。
/* wp-block-gallery-inline-css */
.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
width: calc(50% – var(–wp–style–unstable-gallery-gap, 16px) / 2);
}/* core-block-supports-inline-css */
.wp-block-gallery.wp-block-gallery-1 {
–wp–style–unstable-gallery-gap:
var( –wp–style–gallery-gap-default,
var( –gallery-block–gutter-size,
var( –wp–style–block-gap, 0.5em )));
}この変数チェーンが –wp–style–block-gap を参照するため、
Lightning が上書きした 0.5em が拾われます。つまり「幅の計算に使われる値(0.5em=9px)」と「実際に適用される gap(24px)」が
食い違い、下記の通り親要素の幅を超えて flex-wrap による折り返しが発生します。当サイトの実測値(本文カラム幅 930px、フォントサイズ 18px)
画像1枚の幅 : 930 / 2 – 9 / 2 = 460.5px
2枚 + gap : 460.5 x 2 + 24 = 945.0px
親要素の幅 : 930.0px
———
15px オーバーフロー → 折り返し折り返した後は各行に画像が1枚だけとなり、flex-grow: 1 によって
画像が親要素の全幅(930px)まで拡大されます。これが「縦一列」になる理由です。■ その他特記事項
■ 該当URL
(ページ中ほど「3. 根の先端や内部に根腐れが見えたとき」以降に
2枚組のギャラリーがあります)■ 修正のご提案
.wp-block-gallery に –wp–style–block-gap: 0.5em を出力されるのであれば、
同じスコープに対応する gap も併せて出力していただくのが整合的かと思います。.wp-block-gallery.is-layout-flex {
gap: 0.5em;
}あるいは、ギャラリーだけ –wp–style–block-gap を上書きする指定自体を
取りやめ、テーマ設定のブロック間余白をそのまま使う形にすれば、
コア側の計算と自然に一致すると思われます。■ 補足
カラム数を明示指定した場合(columns-2 など)についても同じ変数を参照するため、
同様の事象が起こるものと思われます。該当URL : https://*********※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます
-
投稿者投稿
- このトピックに返信するにはログインが必要です。

