FAQ

配信テンプレートの画像をモバイルでも横並びにしたい(ビジュアルエディタ)

配信テンプレート作成時、ビジュアルエディタで利用している外部ツールの仕様上
画像を2つ以上設定した場合PCでは配列が横並びですが、mobileにすると縦並びになる状態となっております。
HTMLにて記述することでmobileでも画像を横並びにすることが可能となります。

【現在の設定】
「ビジュアルエディタ>columns」などで画像を設定するとPCでは横並びの状態

2025-09-26 12.41の画像.jpeg

mobileにすると縦並びの状態

2025-09-26 12.42の画像.jpeg

HTMLで横並びにする設定

  1. 「ビジュアルエディタ>HTML」をエディタ内にドラッグ&ドロップして配置する

    2025-10-03 13.32の画像.jpeg
  2. HTMLの記述例はecforce AIに作成依頼を行ってください。
    ecforce AIに作成依頼を行う際は画像のリンクやサイズ等も踏まえ指示をしてください。

    2025-10-03 13.34の画像.jpeg

     

    ※ecforce AIへの指示例

    メールクライアント(Gmail、Outlook、iOS/Android標準メール等)で必ず2枚の画像が横並び(折り返しなし)になるよう、テーブルレイアウト+HTML属性幅指定+インラインCSSだけで完結するHTMLスニペットを教えてください。
    画像URLは下記2つです。①https://t3.ftcdn.net/jpg/00/40/58/44/360_F_40584432_gbw5nJUrC5a7ljsPqg0YifnRtwPMWh22.jpg
    ②https://t3.ftcdn.net/jpg/00/60/74/28/360_F_60742803_3eeweNr2zzclXSZmRAa4tdFfMOvMxjEr.jpg 
    横幅50%ずつ、中央寄せしてください。

    注意点

    画像の設置する枚数によって、横幅のサイズは適宜調整が必要となります。
    ecforce AIにて依頼したプロント案を参照に、サイズ等の調整はご設定いただくようお願いいたします。
    (例)2枚の場合:横幅は50%、3枚の場合:横幅は33.33%、4枚の場合:横幅は25%など
    また、コーディング内容につきましては、サポート対象外となっておりますため
    ecforce AIのプロント案の修正等につきましては、恐れ入りますが担当コーダー様にご相談くださいませ。

  3. HTMLを記述するとエディタ内に画像が反映する

    2025-09-26 15.30の画像.jpeg
  4. プレビューで確認するとmobileでも横並びの状態になる

    2025-09-26 15.33の画像.jpeg

この記事の目次

このセクションの記事

FAQ