[ 解決済 ] 画像のマージン
[ 解決済 ] 画像のマージン
- このトピックには6件の返信、4人の参加者があり、最後に
により2年、 1ヶ月前に更新されました。
-
投稿
-
■ WordPress のバージョン
6.1■ テーマ・プラグインは全て最新版で確認してください。
確認しました。■ 子テーマをご利用の場合は親テーマに変更して症状が改善するか確認してください。
確認しました。■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit■ テーマのバージョン
14.24.0■ Pro Unit のバージョン
0.23.2■ スキンの種類
Origin III■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。■ 期待する動作
画像に自然なマージン■ 自分で試した事
スペースを一つづつ入れる■ 症状が発生するブラウザ
Mac safari Chrome Firefox などすべて■ 実際の症状
今まで画像の下には自然なマージンがあり文字を記載されていましたが、6.1にしたら全ての画像のマージンがなくなり写真同士は上下くっつき、写真と文字との上下の間もなくなってしまいました。該当URL : https://*********※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます
仕様なのかを確認中です。
取り急ぎですが、カスタマイズ→追加CSSに以下のCSSを追加していただくか、
ブロックを選択していただき、ブロックの余白設定でお好きな余白を設定していただけます。▼余白設定
/*画像下のマージン*/ figure { margin: 0 0 1em; }WordPress 6.1 での仕様変更の影響です。
上書きしようとするとわりとキツめのCSSで補正する必要があり、
それを実施するとユーザー個別で画像にCSSを上書きした場合に効かなくなる弊害もでるため、
テーマの方で補正を実施するべきか迷っていました。やはり影響を受けるサイトが多いので修正版アップしましたので、
14.25.0 にアップデートの上ご確認ください。石川さん、いつもありがとうございます。
中央揃え等の画像の配置を指定したときは以下の HTML が出力されます。
<div class="wp-block-image is-style-default"> <figure class="aligncenter size-full"> <img ...画像の配置を指定しないときの HTML は以下のようになっていて、
wp-block-imageの位置が異なっています。<figure class="wp-block-image size-full"> <img ...これって、使いづらい仕様ですよね。
次の WordPress のアップデートで見直されるかもしれませんが、
後者の場合もmargin-bottom: 1em;が効くようにしていただくとよいかもしれません。これって、使いづらい仕様ですよね。
↑ これは WordPress 6.1 の仕様だと思いましたが、私の勘違いみたいです。
可能であれば、出力のルールを統一していただいた方が使いやすい(カスタマイズしやすい)と思います。
まだどこか勘違いしているかもしれませんが、その場合はご容赦ください。
> 対馬様
お世話になっております。ベクトルの石川でございます。
画像ブロックのHTMLに関してはコアの処理なので手が出せないのですが、
余白の処理についてはご指摘の通り位置指定をした時に 6.1 で余白がなくなっていたので 14.25.1 にて修正いたしました。ご報告ありがとうございました！
まだどこか勘違いしているかもしれませんが、
出力される HTML の挙動がテーマによって違うので、
理由がわからず気になっていたのですが…いくつかのテーマで比べてみたところ、
ブロックテーマとクラシックテーマでなにか違いがあるみたいですね。X-T9 や Twenty Twenty-Two(Three) などのブロックテーマだと、
figure タグだけのカスタマイズしやすい HTML になっていました。WordPress 6.1 になって、ブロックテーマ寄りの仕様になったってことなのかなぁ…？
カスタマイズした部分にどのような影響があるか、とても不安なので、
Lightning で本番稼働しているサイトを WordPress 6.1 にアップデートするのは、
もうしばらく様子を見ようと思います。
- このトピックに返信するにはログインが必要です。
