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

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

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

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

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

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

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

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

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

  6. 変更を保存します。

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

パンくずナビゲーションを使用したフラグメントのパディングの管理 fragment-padding-breadcrumb

E メールデザイナーでフラグメントを操作する際に、デスクトップとは異なるモバイルレンダリングに影響を与える非表示のパディングや残余のパディングが発生する場合があります。 これは、フラグメントがロック解除されている場合や継承が破損している場合に特によく発生し、残りのスタイルが基になる列やテキストコンポーネントに残ることがあります。

フラグメントの残りのパディングを特定して編集するには:

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

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

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

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

NOTE
フラグメントを繰り返し挿入および削除すると、スタイルルールが蓄積される場合があるので、この動作が予想されます。 特にモバイルデバイスをターゲットにする場合は、常にパンくずナビゲーションを使用してパディング値を確認します。
recommendation-more-help
journey-optimizer-help