WordPress ギャラリー on Luxeritas の CSS の微調整
単なる CSS の微調整。ただ備忘録も兼ねて残しておく。
WordPress の「ギャラリー」を使ってみた。
【完成】HG バイアラン・カスタム【過去作】の投稿から WordPress の「ギャラリー」というものを使ってみた。これは画像を見せるためのブロックの一種だが、単なる「画像」とは違い、画像をクリックすることでスライドやポップアップによって画像ファイルをより大きく表示出来るというもの。記事の参考程度の画像などは普通の「画像」で十分だが、ガンプラの製作物や風景などの写真はこれが活きてくる。
で、この「ギャラリー」の細かい挙動は使用しているテーマによって変化するらしい。本ブログは Luxeritas （公式サイト） を使用させて頂いているが、以下のように非常に気なる箇所があった。
サムネイル左側の謎の空白。中央依りにしても左側に空白が出来てしまう。これが非常に気になって夜も寝れない。設定を色々と試行錯誤しても解消されないので、CSS を弄ることとした。弄った CSS の内容はテーマのアップデートでリセットされてしまうので正直やりたくないのだが、仕方ない。
CSS を弄ってみる。
Google Chrom のデベロッパーツールで、原因箇所と特定し CSS を編集する。デベロッパーツールの詳しい使い方は初心者向け！Chromeの検証機能（デベロッパーツール）の使い方が参考になる。
なるほど、ここですか。何故か左に 30px となっている。これを wordpress の管理画面の「Luxeritas」->「子テーマの編集」から「スタイルシート」の末尾に下記を追記する。
.blocks-gallery-grid, .wp-block-gallery {
padding: 0 0 0 0px !important;
}
これを保存してページを見てみると….
左側の余白が消えている！これで寝れる。
【おまけ】Luxeritas でのギャラリーの挙動と設定
冒頭で「ギャラリー」の挙動はテーマに依ると言いました。Luxeritas には７つのキャラリーの挙動があるみたく、デフォルトの設定だと PC ではいい感じに拡大・スライドが出来るのですが、モバイルではスライドがどうもうまくいかず、以下のように「Floatbox」にしてみたらいい感じになりました。
インストールされているバージョンやプラグインなど環境によって変わってくるかもしれませんが、参考になれば幸いです。