ドキュメントJourney OptimizerJourney Optimizer ガイド

垂直方向の整列とパディングの調整 alignment-and-padding

Last update: Wed Dec 10 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

  • 初心者
  • 中級
  • ユーザー

この例では、3 つの列で構成される構造コンポーネント内のパディングと垂直方向の整列を調整します。

  1. メール内で構造コンポーネントを直接選択するか、左側のメニューで使用可能な​ ナビゲーションツリー ​を使用します。

  2. ツールバーから、「列を選択」をクリックし、編集する列を選択します。構造ツリーから選択することもできます。

    その列の編集可能なパラメーターが、「スタイル」タブに表示されます。

  3. 整列​で、「上」、「中央」、または「下」を選択します。

  4. 「パディング」で、すべての辺のパディングを定義します。

    パディングを微調整する場合は、「各辺に異なるパディングを使用」を選択します。鍵アイコンをクリックして、同期を解除します。

  5. 同じようにして、他の列の位置揃えとパディングを調整します。

  6. 変更を保存します。

TIP
Android デバイスの Gmail のメールコンテンツを設計する際は、画像と区切り線に大きな固定マージンではなく列パディングを使用します。Android の Gmail では、多くの場合、大きすぎる画像やマージンが誤ってレンダリングされ、レイアウトがオーバーフローしたり、区切り線が短くなったりすることがあります。一貫性のある表示を実現するには、画像の幅を小さくするか、列ベースのパディングに依存します。

パンくずナビゲーションによるフラグメントのパディングの管理 fragment-padding-breadcrumb

メールDesignerで ​ フラグメント ​ を使用する場合、デスクトップとは異なるモバイルレンダリングに影響する非表示または残余のパディングが発生する場合があります。 これは、フラグメントのロックが解除された場合や、残りのスタイル設定が基になる列やテキストコンポーネントに残る可能性があるので、​ 継承が壊れた ​ 場合に特に一般的です。

フラグメント内の残りのパディングを識別して編集するには：

  1. ナビゲーションツリー を使用するか、エディターで要素を直接クリックして、フラグメント内の親構造または列をそれぞれ選択します。 これにより、モバイルデバイスに固有の非表示のパディングまたは余白を見つけるのに役立ちます。

  2. パンくずリストの要素を選択した後、右側の スタイル タブに移動します。

  3. パディング の設定を確認し、必要に応じてパディングを削除または再調整して、モバイルを正しく整列します。

  4. フラグメントを再利用しても位置揃えの問題が解決しない場合は、フラグメント内の他の列またはテキストコンポーネントに対してこのプロセスを繰り返します。

NOTE
この動作は、フラグメントが繰り返し挿入および削除される場合に発生します。これは、スタイル設定ルールが蓄積する可能性があるためです。 特にモバイルデバイスをターゲティングする場合は、パンくずナビゲーションを使用して、パディング値を常に検証します。
recommendation-more-help
b22c9c5d-9208-48f4-b874-1cefb8df4d76