[WordPress] Gutenberg ギャラリーブロック左側の空きを修正
WordPressのギャラリーってなにげに便利ですよね。テーマの機能やプラグインと組み合わせてスライドショー的な使い方も出来るので私もよく利用していますが、そのギャラリーをGutenbergのブロックに置き換えてしばらく経ってからなにげにギャラリーが右に寄っているような…と言うか左側に微妙な空間が出来ている事に気がつきました。
前からこんなんだったっけ？といくつかのテーマで確認してみたところ、どうやらそうなるテーマとならないテーマがあるようです。
そんなわけで当エントリーではGutenbergのギャラリーブロックで「なんかちょっと左側空きすぎじゃね？」となった場合の対応方法について書いてみたいと思います。
原因はギャラリーブロックのulタグ
主に箇条書きのようなリストに使われるタグですね。Gutenbergのギャラリーブロックはこのulとliタグで構成されています。
このulタグは大抵どんなテーマでも何かしらスタイルが設定されている事が多いので、それがGutenbergのギャラリーブロックにも適用されてしまうとその分のマージンやパディングが取られる事になります。
私が試してみたのは以下の6つの無料WordPressテーマですが
- Cocoon
- Emanon Free
- Lightning
- LIQUID LIGHT（試用版）
- Luxeritas
- yStandard
この中でブロックギャラリーの左側に空きが発生したのはLuxeritasとEmanon Freeの2つのテーマでした。
Luxeritasの場合
左が通常、右がFirefoxの開発ツールで確認した画像です。
左側に30pxのパディングが設定されています。
.post ul, .post ol {
padding: 0 0 0 30px;
}Emanon Freeの場合
こちらも同様に左が通常、右がFirefoxの開発ツールで確認した画像です。
左側に24pxのマージンが設定されています。
.article-body ul {
margin: 0px 0px 40px 24px;
}ギャラリーブロックの問題を修正
以下のCSSをカスタマイザーの追加CSSかstyle.cssにコピペするだけでOKです。
ul.blocks-gallery-grid {
margin : 0;
padding: 0;
}利用しているテーマによってマージンかパディングかは違ってきますし、左側に限らず上や下にも設定されている場合があるので汎用性を持たせる為にあえてここでは全て0にしてあります。
修正箇所は最小限にしたいという事であれば、親テーマのstyle.cssか開発ツールで確認して margin-left のように改変したり不要な行は削除していただければと思います。
尚、これはGutenbergブロックギャラリーのulタグにしか適用されないので、通常のulタグに影響が出る事はありません、念の為。
ギャラリーブロック対応 for Luxeritas AMP
こちらは当エントリーのおまけ的な感じですが、ギャラリーブロックのLuxeritas AMP対応です。今まで全く気にしてませんでしたがこうなってたようです…
そう言えばLuxeritasのAMPではブロックライブラリ用のCSSは読まない仕様でしたね…AMPのCSS容量制限がちょっとばかし緩和されたとは言え厳しい事には変わりないのでそれも納得出来る話ではありますけど。てか他のブロックも気がついてないだけでやっぱレイアウト崩れてたりするんでしょうか、ホントAMPって…（以下自重）
これはLuxeritasに限った話ではないので、Gutenbergの標準ブロックを利用している場合はAMPで何らかのレイアウト崩れが発生する可能性があります。
という事でLuxeritas AMP用のCSSがこちら。
ul.blocks-gallery-grid {
padding-left: 0;
list-style: none;
}
ul.blocks-gallery-grid li {
margin-bottom: 20px;
}ギャラリー左側のパディングを無しにして「・」を非表示に、ついでに画像（正確にはliタグ）の下にマージンをとっただけですが何もしないよりはいいんじゃないかと思います。もうこれ以上AMPでムダに消耗したくないんですよね、かなり切実に…
Gutenberg ギャラリーブロック対応でした
別に少しくらい右や左に寄ってようが実害は無いんですが、変に細かいところが気になってしまう性分ゆえにちゃちゃっと直してみました。
「これ、気になってたのよねー」という方が私以外にもいるかはわかりませんが、とりあえずそんな方に当エントリーがお役に立てば幸いです。