zakkuri.info
PCで横並びに密着した画像をレスポンシブで縦並びに密着させる(ページビルダー使用) | ざっくりまとめました
PCで見た場合に横に2つ並んだ画像は、スマホ表示の場合に縦積みされることが多いと思います。その際に、画像同士が密着しているケースは少ないかと思いますが、SydneyとSiteOrigin Layoutの場合にどうすれば左右上下の余白をコントロールできるのか、という興味から調べてみたらできたので書いておきます。 以下のteratail質問を目にしたのがキッカケです。WordPressプラグイン「Page Builder by SiteOrigin」のレスポンシブ対応なお、リンク先に記載されていたコードを見る限りは、Sydneyではなく別なテーマを使っているのではないかと思われました。 個人的には、画像それぞれを見せたい場合は、横並びの場合でも、縦積みの場合でも、画像を密着させる必要はないと思います。また、横並びで密着させて見せたい画像であるならば、スマホ表示でも同じ横並びで見せたいような気がします。というわけで、上述のリンク先のようなニーズってどういう時なのだろう。 さて、2画像を横並びにするのは、PageBuilder by SiteOrigin(ブロックエディタの場合は、SiteOrigin Layoutという表記になるので、以下そのように記載します)、一般ブロックのギャラリー、レイアウト要素のカラムを使って実現できます。が、スマホ表示の場合に縦積みになるか、横並びのままかは使用するブロックによって異なります(下記の表を参照)。 使用ブロック PC表示 スマホ表示 個人的見解 SiteOrigin Layout 画像横並び 画像縦積み PCで横並び密着、スマホで縦積み密着させたければコレを使う 一般ブロックのギャラリー 画像横並び 画像横並び 画像が小さくなっても横並びで見せたければコレを使う レイアウト要素のカラム 画像横並び 画像縦積み めんどうくさいので使わない 縦横の表示が表の通りなので、以下を行いました。 SiteOrigin Layoutの場合に、画像横並びの左右マージンをゼロにする(編集画面上で行に対するガターをゼロにすることで実現可能) SiteOrigin Layoutの場合に、画像縦積みの上下マージンをゼロにできるか 一般ブロックのギャラリーの場合に、画像横並びの左右マージンをゼロにできるか