2カラム以上で、縦並びになると上下のカラムがくっつく
2カラム以上で、縦並びになると上下のカラムがくっつく
- このトピックには5件の返信、3人の参加者があり、最後に
により4年、 9ヶ月前に更新されました。
-
投稿
-
Lightning Skin Varietyを使用しています。
カラムブロックで2カラム以上を設定した場合、横並びではカラム間に隙間があるのですが、モバイル等で縦並びになるとカラムの上下に隙間がなくなり、ぴったりとくっついてしまいます。
以前からこのようになっていましたでしょうか？
もしそうであれば上下の隙間を開ける方法を教えてください。
よろしくお願いします。Lightning Pro バージョン: 3.2.2
Lightning Skin Variety バージョン 6.0.3追記：改めて確認しましたが、他のテーマにすると、縦並びで上下のカラムの隙間が空きます。lightningのバグでしょうか？
ご回答ありがとうございます。
こちらの説明が不十分だったようです。
ブロック・レイアウト要素の「カラム」を使って、そのブロック内に2カラム以上のカラムを設定し、
画像等をレイアウトします。
PC等の大きめのディスプレイでは各カラムの間に隙間ができ横並びしますが、
モバイル等の小さなディスプレイでレスポンシブルで縦に並ぶと、今まで上下に隙間があったのが、
隙間が無くなりレイアウトされます。
この症状はwordpressのバージョンが5.3.2になってからです。
テーマをTwenty Twentyにすると同じレイアウトでも上下に隙間ができます。
参考の画像を添付します。度々の問い合わせでお手数をおかけしますが、ご検討のほどよろしくお願いします。
どうやらWordPress のコア側で
.wp-block-columnに下マージンが設定されていないのが原因のようです。
開発者ではない私としては応急処置として下記 CSS コードを下記のいずれかに記述することを提案します。- 子テーマの style.css
- 外観 ＞ カスタマイズ ＞ 追加CSS
- ExUnit ＞ CSS カスタマイズ
.wp-block-column { margin-bottom:1em; }1em の部分は適当に決めたので、40px 等適当な値に変えてください。
この件、仕様の判断が難しいですね。
１カラム時に下部に余白をつけてしまうと、余白をなしにしたい場合にcssを手書きしないといけなるので、手動でスペーサーブロックを入れた方が好みの余白に出来るけれども、
現実には毎回スペーサーブロック入れるよりも適当に余白が空いた方が楽な場面が多い。
でも余白入れてしまうと余白なしにしたい時にやりにくい…と、言うことで、余白アリ、ナシを制御出来るように機能追加を検討しますが、他の優先実装事項もありますので、当面は上記のコードを記載いただくか、レスポンシブスペーサーブロックなどを左側のカラムの最下部などに配置して対応お願いできればと思います。
- このトピックに返信するにはログインが必要です。
