Images in email campaigns

キ⁠ャンペ⁠ーン内の画像のギ⁠ャラリ⁠ーを表示し⁠、キ⁠ャプシ⁠ョンやクリ⁠ックスル⁠ー リンクを追加します⁠。

最終更新日 2025年1月16日

キ⁠ャンペ⁠ーンに画像をア⁠ップロ⁠ードするには⁠、画像セクシ⁠ョンを使用します⁠。それぞれにキ⁠ャプシ⁠ョンとクリ⁠ックスル⁠ーURLを含む複数の画像を追加したり⁠、様⁠々なレイアウトを選択して画像やキ⁠ャプシ⁠ョンの配置を変更したりできます⁠。

このガイドでは⁠、キ⁠ャンペ⁠ーン内の画像セクシ⁠ョンを設定する方法と⁠、画像が表示される可能性のあるキ⁠ャンペ⁠ーン内の他の箇所について紹介します⁠。

Image formatting

To prevent blurry images⁠, we recommend keeping your image width 750px or less⁠. For more help with image formatting⁠, visit Formatting your images for display on the web⁠.

Multiple images display in a vertical stack⁠, but you can choose different layouts to change the placement of images and captions⁠.

画像セクシ⁠ョンを追加する

To add an image section to a campaign⁠:

  1. Create or open your campaign draft⁠. For more help⁠, visit Building email campaigns⁠.
  2. キ⁠ャンペ⁠ーンのヘ⁠ッダ⁠ーとフ⁠ッタ⁠ーの間の任意の場所で [⁠+⁠] をクリ⁠ックします⁠。
  3. 画像をクリ⁠ックします⁠。
  4. 右側のパネルで⁠、[⁠画像を追加⁠] をクリ⁠ックしてデバイスから最大4件の画像をア⁠ップロ⁠ードするか⁠、[⁠ライブラリ⁠ーから選択⁠] をクリ⁠ックしてライブラリ⁠ーまたはUnsplashから画像を選択します⁠。メ⁠ールキ⁠ャンペ⁠ーンでプレミアム画像のライセンスを取得することはできませんが⁠、以前にライセンス取得済みのGetty Imagesは使用できます⁠。
  5. After uploading at least one image⁠, click Manage Images below the thumbnail to add⁠, rearrange⁠, or delete images⁠.
  6. 画像名の横にある [⁠リンク解除済み⁠] をクリ⁠ックして⁠、クリ⁠ックスル⁠ー URLを追加します⁠。
  7. レイアウトのドロ⁠ップダウン メニ⁠ュ⁠ーをクリ⁠ックして⁠、画像セクシ⁠ョンのレイアウトを変更します⁠。
  8. スタイルを変更するには⁠、[⁠間隔設定⁠] と [⁠セクシ⁠ョンの色⁠] をクリ⁠ックします⁠。
  9. レイアウトに応じて⁠、画像にキ⁠ャプシ⁠ョンを追加します⁠。

All changes save automatically⁠. You can undo or redo changes as long as the draft is open⁠.

ヒント

画像エデ⁠ィタ⁠ーを開くには⁠、下書きのペ⁠ージで⁠、編集する画像にカ⁠ーソルを合わせて鉛筆アイコンをクリ⁠ックします⁠。

Add⁠, rearrange⁠, or delete images

少なくとも1枚の画像を追加したら⁠、[⁠画像を管理⁠] をクリ⁠ックします⁠。ここでは⁠、以下を実行できます⁠。

  • [⁠画像を追加⁠] をクリ⁠ックして⁠、さらに画像を追加します⁠。どのレイアウトでも⁠、最大4件の画像を追加できます⁠。
  • Rearrange images by clicking and holding the six dots to the right of the filename and dragging the image to a new position⁠.
  • Delete an image by clicking - to the left of the filename⁠.

変更を適用したら⁠、[⁠戻る⁠] をクリ⁠ックして [⁠画像⁠] パネルに戻ります⁠。

Add a clickthrough URL

Image clickthrough URLs turn the whole image into a link⁠, so when a subscriber clicks the image⁠, it opens the link⁠.

To add a clickthrough URL⁠:

  1. Click Unlinked beside the images name in the right panel⁠. If an image already has a clickthrough URL⁠, the URL displays beside the image name⁠. If you don⁠'⁠t see Unlinked or a URL beside your image name⁠, you might be in the Manage images panel⁠. Click Back to return to the Images panel⁠.
  2. In the clickthrough URL field⁠, you can add a web address directly⁠, or click the gear icon to open the link editor for more options⁠.
  3. In the link editor⁠, you can link to an external web address⁠, a page on your site⁠, an email address⁠, or a phone number⁠. To learn more about links in Squarespace⁠, visit Adding links to your site⁠.
  4. リンク エデ⁠ィタ⁠ーでURLを設定したら⁠、[⁠保存⁠] をクリ⁠ックします⁠。

代替テキストの追加

代替テキストを画像に追加すると⁠、訪問者が馴染みやすい画像になります⁠。代替テキストは⁠、スクリ⁠ーン リ⁠ーダ⁠ーやその他のアクセシビリテ⁠ィ ツ⁠ールに表示されますが⁠、キ⁠ャンペ⁠ーンには表示されません⁠。

代替テキストは⁠、手動で追加しない限りは表示されません⁠。画像セクシ⁠ョンの画像に代替テキストを追加する方法は以下のとおりです⁠。

  1. 画像セクシ⁠ョンをクリ⁠ックし⁠、右側のパネルで画像フ⁠ァイル名をクリ⁠ックします⁠。
  2. [⁠画像の代替テキスト⁠] の下のフ⁠ィ⁠ールドをクリ⁠ックして⁠、画像の説明を追加します⁠。
  3. 代替テキストは自動的に保存されます⁠。

同じ手順で⁠、ブログ セクシ⁠ョンや商品セクシ⁠ョンに代替テキストを追加することもできます⁠。ベスト プラクテ⁠ィスを含む代替テキスト全般の詳細については⁠、「⁠画像に代替テキストを追加する⁠」をご参照ください⁠。

画像セクシ⁠ョンのレイアウト

レイアウトのドロ⁠ップダウン メニ⁠ュ⁠ーをクリ⁠ックして⁠、画像とキ⁠ャプシ⁠ョンの表示形式を選択します⁠。既定では⁠、新しい画像セクシ⁠ョンを追加すると⁠、そのセクシ⁠ョンは [⁠バナ⁠ー⁠] レイアウトに設定されます⁠。

You can choose from these layouts⁠:

  • Banner - Full-bleed images with captions below⁠.
  • グリ⁠ッド - 画像は小さなサムネイルとしてグリ⁠ッド表示されます⁠。このレイアウトではキ⁠ャプシ⁠ョンは追加できません⁠。
  • Card - Images with captions displaying on an overlapping card⁠. The captions display on alternating sides for each image⁠, starting on the right⁠.
  • List (⁠Left⁠) - Images in a list on the left side with captions on the right⁠.
  • List (⁠Right⁠) - Images in a list on the right side with captions on the left⁠.
  • Side - Images in a list with captions displaying on alternating sides⁠.

各セクシ⁠ョンでは⁠、レイアウト スタイルを1件使うことができます⁠。レイアウトの異なる別の画像を追加するには⁠、新しいセクシ⁠ョンを追加してください⁠。

画像セクシ⁠ョンのスタイルを設定する

サイズ⁠、間隔⁠、色のオプシ⁠ョンを使用して⁠、画像セクシ⁠ョンのスタイルを設定します⁠。レイアウトによ⁠ってオプシ⁠ョンは異なる場合があります⁠。

Image size

グリ⁠ッド⁠、サイド⁠、リストのレイアウトでは⁠、画像サイズを直接編集できます⁠。

[⁠画像サイズ⁠] をクリ⁠ックし⁠、[⁠S⁠]⁠、[⁠M⁠]⁠、または [⁠L⁠] をクリ⁠ックするか⁠、[⁠⁠.⁠.⁠.⁠] をクリ⁠ックしてサイズを手動で設定します⁠。

バナ⁠ーとカ⁠ードのレイアウトでは⁠、[⁠間隔設定⁠] の [⁠サイド パデ⁠ィング⁠] 微調整オプシ⁠ョンを使用して画像の幅を変更します⁠。一部のアプリでは⁠、これらの設定に関係なく⁠、画像が常に全幅で表示されることにご注意ください⁠。

Spacing

[⁠間隔設定⁠] をクリ⁠ックして⁠、画像セクシ⁠ョンのパデ⁠ィングを調整します⁠。レイアウトによ⁠っては⁠、間隔設定のオプシ⁠ョンが異なる場合があります⁠。

  • サイド パデ⁠ィング - 画像の両側に余白を追加します⁠。バナ⁠ーとカ⁠ードのレイアウトの場合⁠、この微調整オプシ⁠ョンを使用して画像の幅を変更します⁠。
  • セクシ⁠ョン間のパデ⁠ィング - 画像セクシ⁠ョンの上部と下部に余白を追加します⁠。
  • Padding between rows - Add vertical white space between images in the section⁠. This only appears if you add multiple images to a single section⁠.
  • 水平方向の配置垂直方向の配置 - グリ⁠ッド レイアウト内で画像の配置を揃えます⁠。
  • Center padding - Add white space between the images and captions in the side and list layouts⁠.

Color

You can change the following section-specific colors⁠:

  • Section color - Change the color that appears behind images and captions⁠. If set to transparent⁠, the content background or email background appears instead⁠.
  • テキストの色 - キ⁠ャプシ⁠ョンの色を変更します⁠。フ⁠ォントとテキストのサイズはグロ⁠ーバル キ⁠ャンペ⁠ーン スタイルに従います⁠。
  • Card color - Change the background of the captions on the card layout⁠.

詳細については⁠、「⁠メ⁠ールキ⁠ャンペ⁠ーンのスタイル設定⁠」をご覧ください⁠。

Add captions

To add captions⁠:

  1. バナ⁠ー レイアウトを使用している場合は⁠、画像パネルで [⁠キ⁠ャプシ⁠ョンを表示⁠] を有効にします⁠。
  2. プレビ⁠ュ⁠ーで [⁠ここにご入力ください⁠.⁠.⁠.⁠] をクリ⁠ックし⁠、テキストを追加します⁠。
  3. Highlight text to format it or add a link⁠.

Keep in mind⁠:

  • グリ⁠ッド レイアウトはキ⁠ャプシ⁠ョンに対応していません⁠。
  • メ⁠ールキ⁠ャンペ⁠ーン内のキ⁠ャプシ⁠ョンは代替テキストにはなりません⁠。
  • Text added to images is image-specific⁠. If you delete an image⁠, its caption is deleted too⁠.
  • Use the side panel to style the text color⁠. The font matches your global fonts⁠.

Add an image without a caption

To add an image without a caption⁠:

  1. 画像セクシ⁠ョンを追加します⁠。
  2. 画像を追加したら⁠、グリ⁠ッドバナ⁠ーのいずれかのレイアウトを選択します⁠。
  3. On the banner layout⁠, switch the Show Caption toggle off to hide the caption⁠.

Can I add an image slideshow⁠?

組み込みのスライドシ⁠ョ⁠ー レイアウトはありません⁠。スライドシ⁠ョ⁠ー効果を追加するには⁠、複数の画像を使⁠ってアニメ⁠ーシ⁠ョン⁠.gifを作成し⁠、画像セクシ⁠ョンにア⁠ップロ⁠ードします⁠。

Header images

ライブラリ⁠ーの画像をキ⁠ャンペ⁠ーンのヘ⁠ッダ⁠ーにア⁠ップロ⁠ードしたり再利用したりできます⁠。また⁠、サイトにロゴがある場合はサイトのロゴを含めることもできます⁠。詳細については⁠、「⁠メ⁠ールキ⁠ャンペ⁠ーンを構築する⁠」をご覧ください⁠。

Blog and product images

ブログおよび商品セクシ⁠ョンでは⁠、ブログ投稿や商品 (⁠投稿や商品のアイキ⁠ャ⁠ッチ画像など⁠) がサイトからキ⁠ャンペ⁠ーンに取り込まれます⁠。

これらのセクシ⁠ョンの投稿または商品のアイキ⁠ャ⁠ッチ画像を変更することはできませんが⁠、アイキ⁠ャ⁠ッチ画像にカ⁠ーソルを合わせて鉛筆アイコンをクリ⁠ックし⁠、画像エデ⁠ィタ⁠ーを開くことができます⁠。別の画像を追加するには⁠、ブログ ペ⁠ージまたはストア ペ⁠ージのアイキ⁠ャ⁠ッチ画像を変更するか⁠、画像セクシ⁠ョンで画像とキ⁠ャプシ⁠ョンを直接選択します⁠。

Footer Image
  • コミ⁠ュニテ⁠ィからサポ⁠ートを受ける

  • 高度なカスタマイズについて⁠、コミ⁠ュニテ⁠ィからサポ⁠ートを受けられます⁠。

  • Squarespace Expertを雇う

  • 経験豊富なデザイナ⁠ーや開発者から力を借りて⁠、オンラインで目を引くサイトを構築しまし⁠ょう⁠。