画像カード（上部に画像、その下にタイトルと1行のテキスト）は、マーケティングページで最も一般的なブロックの1つです。これらは Elementor の Image Box ウィジェットに対応しますが、結果が正しく見えるかどうかはいくつかの細部で決まります。
カードが Image Box になるとき
画像1点、見出し1つ、段落が最大1つで、他のコンテンツ要素がないコンテナは、単一の Image Box に変換されます。意図的なガードが1つあります。見出しと段落以外に追加のテキスト（ステップ番号、バッジ、価格など）がカードに含まれている場合、変換はスキップされ、そのブロックは通常のコンテナのまま保持されます。その追加テキストを失うことは、少し深いツリーを維持するよりも悪いからです。
画像を実際にカードいっぱいに表示する
Elementor の Image Box は、デフォルトで画像を幅30%で表示します。変換されたカードでそれが望まれることはほとんどないため、表示幅はカードに対する画像の相対的な幅から明示的に設定されます。全幅画像は100%になります。
元の画像が固定の高さ（またはアスペクト比ボックス）を満たすために object-fit: cover を使用していた場合、それも引き継がれ、レンダリングされた高さと Object Fit = Cover がウィジェットに書き込まれます。実用的な利点はプレースホルダーモードで現れます。設定がすでに配置されているため、後で空のスロットに実際の画像をドロップすると、すぐに切り抜かれてカードいっぱいに表示され、手動でサイズ変更しなければならない小さなサムネイルとして配置されることはありません。
角丸
カードの角丸は通常、カードに対する border-radius と overflow:hidden によって作られ、全幅画像を丸い上部にクリップします。フラット化された Image Box には独自のオーバーフロー制御がないため、画像に直接、一致する半径が設定され、カードの丸いフレームに揃います。
唯一の本当の制限
Elementor の Image Box には、コンテンツのパディングを制御する機能がありません。デザインで、全幅画像があり、テキストがたとえば18px内側に配置されている場合、その内側の余白はウィジェット内で再現できません。ウィジェット自身のパディングは画像も内側に寄せてしまうためです。テキストはカードの端に近い位置になります。
単一のすっきりしたウィジェットよりも、ピクセル単位で正確なテキストの余白が重要な場合は、そのブロックを、個別の Image、Heading、Text ウィジェットを持つコンテナのままにしてください。それぞれが独自のパディングを保持します。これは構造的な整理と正確な間隔との間の本当のトレードオフであり、ページ全体のカードを変換する前に知っておく価値があります。
画像カードのチェックリスト
- まず画像をメディアライブラリにアップロードし、実際の
https://URLを参照してください。手動の手順なしでインポートされます。 - それ以外の場合は、空の画像プレースホルダーを使用します。各スロットは
altテキストをキャプションとして保持するため、どの画像がどこに入るかがわかります。 - 単一ウィジェットの結果が必要な場合は、カードを画像 + 見出し + 1つの段落に保ってください。
- Base64で埋め込まれた画像は避けてください。これらは設計上、プレースホルダーに置き換えられます。