-
5-4.HTMLメール編集（画像・レイアウト編集）
このページでは、HTMLメールに画像を挿入し、表示サイズやリンクを設定する方法を説明します。
あわせて、配置したコンポーネントの移動・コピー・削除や、画像と文章を横に並べる方法も紹介します。INDEX
画像を挿入する
画像コンポーネントは、メールの横幅に合わせたメイン画像や、見出し用のバナー画像を配置するときに適しています。
手順1コンポーネントの一覧から、「画像」を編集画面へドラッグ＆ドロップします。
手順2下図のように編集画面に、仮の画像が表示されます。
手順3配置した画像にカーソルを合わせます。画像の周囲に編集範囲を示す枠が表示されたら、画像をダブルクリックします。
手順4画像を選択すると、画像の選択や詳細設定に使用するアイコンが左上に3つ表示されます。主に左2つのアイコンで画像の編集を行います。
手順5フォルダアイコン（
）をクリックすると、画像ストレージ ( 画像ライブラリ ) が表示されます。左上の [ ファイル選択 ] をクリックし、パソコンに保存されている画像を選択します。複数の画像をまとめて選択することもできます。アップロードした画像は、画像ライブラリに追加されます。
手順6使用する画像をクリックし、「選択する」をクリックします。選択した画像がHTMLメールに挿入されます。
画像ストレージ ( 画像ライブラリ )の主なルール
仕様
- ファイル名：半角英数のみ対応
- ひとつの画像ファイルの容量：300KBまで
- 対応しているファイルの拡張子：’jpeg’, ‘jpg’, ‘gif’, ‘png’
画像パスと画像ストレージ（画像ライブラリ）の関係
WiLL Mailは、画像ライブラリにアップロードした画像ファイル名を参照して画像URL（画像パス）を確定します。
画像ストレージ（画像ライブラリ）内の既存画像を上書きする際の注意点
WiLL Mailでは、画像ライブラリに登録したファイル名をもとに、画像を表示するURLが決まります。既存の画像と同じファイル名で別の画像をアップロードすると、過去に配信したメールにも新しい画像が表示される場合があります。画像を差し替える場合は、別のファイル名を付けてアップロードしてください。
ファイル名の例
mainvisual_202608.png
product_a_01.jpg
seminar_banner_202609.png
日付や用途を含め、ほかの画像と重複しにくい名前を付けることをおすすめします。
画像の表示を調整する
手順7手順3の操作を参照し、画像編集アイコン（
）をクリックするとイメージプロパティが開きます。イメージプロパティでは、画像の差し替えやサイズの調整、リンク挿入などを行えます。
画像パス 使用中の画像パスが表示されます。[画像選択]をクリックすると、別の画像と差替えられます。 幅 使用している画像の幅をピクセル数で入力できます。未入力の場合、自動調節されます。 高さ 使用している画像の高さをピクセル数で入力できます。未入力の場合、幅に合わせて自動的に同一比率で自動調整されます。 ALT 画像が表示されない場合のメッセージを入力できます。 リンク 画像をクリックした際のリンク先のURLを入力できます。「タグを挿入」からはダウンロードリンク、配信停止リンク、スマートリンクを設定する事ができます。DBの項目も参照できるので、レコメンドメールのような使い方も出来ます。 マージン 画像の上下左右に指定したピクセル分の余白を設定できます。このマージン設定は、ヘッダーに掲載するブランドロゴやフッターに掲載するSNSのロゴなど、左右いずれかに寄せたレイアウトを想定しています。直下の「位置」の指定が必要となります。 位置 画像を左寄せか右寄せかを指定できます。 縮小時の振る舞い スマートフォン閲覧時など、画面サイズが小さいデバイスで閲覧した際、画面サイズに合わせて画像を縮小するか・しないかを選択できます。
デフォルトの「画面サイズに合わせる」を選択すると、スマートフォン閲覧時に画面の横幅に合わせて拡大または縮小します。
「なし」を選択すると、画像はデバイスの大きさ問わず指定の大きさを保った状態になります。「なし」の設定は、SNSのアイコンやヘッダーに挿入するロゴ画像など、画面のサイズを問わず、常に小さく見せたいものに用います。
決定/キャンセル 設定の保存、キャンセルができます。 タグを挿入で使えるリンク一覧
リンクタグ機能 機能概要 ダウンロードリンク
@FILE{ファイル名}「基本設定」でダウンロードファイルを設定した場合に使用できます。ユーザーがこのリンクをクリックするとファイルをダウンロードできます。クリックカウントも取得できます。 配信停止リンク 読者がこのリンクをクリックすると配信停止画面が表示されます。配信停止を行った読者の情報はDBの配信停止リストに記憶され、次回以降のメールは配信されません。 スマートリンク ブラウザ版のHTMLメールを表示できるリンクです。これによりメール受信ソフトがHTMLに対応していない方へもHTMLコンテンツを届けることができます。HTMLコンテンツのクリックカウントも取得できます。
画像についてよくあるご質問
- 小さめの画像を画像コンポーネントで配置すると、左に寄ってしまいます。画像を中央に配置することは出来ますか？
- テキストコンポーネントを使うと、小さい画像を中央に配置出来ます。
テキストコンポーネントを使って画像を中央寄せにする方法
手順1テキストコンポーネントを編集画面にドラッグ&ドロップする。
手順2テキストプロパティを表示させ、デフォルトで入っている文言（ここに文章を入力してください）と、改行2行を削除した後、中央寄せアイコン（
）をクリックし、画像アイコン（）をクリックします。手順3イメージプロパティが表示されるので、[画像選択]から挿入したい画像を選択してください。これで完成です。イメージプロパティの詳細は、前頁をご参照ください。
コンポーネントを編集する
１.コンポーネントの位置を変更する
手順1エディター上で作成したコンポーネントにカーソルを合わせて、赤枠を表示させます。赤枠の右端にカーソルを合わせると十字の移動カーソル（
）が表示されます。手順2赤枠の右端をつまんでドラッグすると、コンポーネント自体の上下レイアウトの移動が出来ます。下図は、上にあるテキストコンポーネントを画像コンポーネントの下に移動させた場合のイメージです。
２.コンポーネントをコピーする
手順1コピーしたいコンポーネントを選択し、右下のコピーアイコン（
）をクリックします。下図のように、同じコンポーネントが直下にコピーされますので、任意の内容に編集して使用します。
３.コンポーネントを削除する
手順1削除したいコンポーネントを選択し、右下のゴミ箱アイコン（
）をクリックします。
横並びのレイアウトを作成する
コンポーネントの分割機能なら、横並びレイアウトも簡単に完成。これまで説明したテキストと画像の設定方法も組み合わせてつくってみましょう。
手順1「画像+テキスト」コンポーネントを編集画面にドラッグ&ドロップします。
手順2プラスアイコン（
）でコンポーネントを分割します。最大4分割まで可能です。分割したものを削除する場合は、ゴミ箱アイコン（）で行えます。手順3フォルダアイコン（
）から利用したい画像を配置します。「画像コンポーネント」と同じ操作で挿入できます。テキスト部分も「テキストコンポーネント」と同じ様に編集できます。手順4左右の矢印アイコン（
、）で、分割したコンポーネントを左右に移動できます。手順5テーブルアイコン（
）で、「テーブルプロパティ設定」を表示させます。パディング(内側の余白)とスペース(外側の余白)の設定ができます。これで、画像と画像にスペースを設けることが出来ます。手順6画像と画像のあいだにスペースを空けるには、テーブルプロパティの「セルスペース」に任意の数値を入力します。”10”と指定して決定をクリックすると、分割したコンポーネントの外側に上下左右に10ピクセル分のスペースが設けられます。
※セルスペース＝外側のスペース、セルパディング＝内側のスペース
手順7ボーダー設定をすると、分割したコンテンツの外側に罫線を引けます。「ボーダー幅（線の太さ）」、「スタイル（線の種類）」、「ボーダーカラー（線の色）」をそれぞれ細かく指定出来ます。
ご質問はこちら
マニュアルで解決できなかったお客様は、お問い合わせフォームよりお問い合わせください。
※お問い合わせいただいたご質問内容は、担当者が確認の上、メールまたはお電話にてご返答させていただきます。ご質問内容や多数お問い合わせをいただいている場合は、返答にお時間をいただく場合がございます。
※お問い合わせいただいたご質問内容は、マニュアルコンテンツとしてWEBサイト上に掲載させていただく場合がございます。予めご了承ください。