メインコンテンツにスキップ
お客さまへの大切なお知らせ:膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。
Landing Pages

リッチ テキスト モジュールでの画像の挿入と編集

更新日時 2021年 4月 2日

対象製品

すべての製品とプラン

1つ以上の画像とその他のタイプのコンテンツ(テキスト、CTAなど)と共にリッチ テキスト モジュールに挿入できます。これで、通知をカスタマイズできます。その後、画像の表示と読み込み動作をカスタマイズできます。単一の画像を「画像」の既定のモジュールに追加することもできます。

注意:これらの手順はリッチ テキスト モジュールのみに適用されます。ドラッグ&ドロップEメールエディターのテキスト要素には画像を含めることはできません。 

リッチ テキスト モジュールでコンテンツに画像を追加する

注意:マーケティングEメールに追加できる画像ファイルは、png.ico.bmp.jpg.gif ファイルだけです。

  • HubSpotアカウントで、ブログ、Eメール、ランディングページまたはウェブサイトページに移動します

  • 編集するブログ記事、Eメール、ランディングページ、またはウェブサイトページの名前をクリックします。

  • 画像を表示したい場所で、リッチ テキスト モジュールをクリックします。
  • リッチ テキスト ツールバーの右上にある画像アイコンinsertImage. imをクリックします。
  • 右側のパネルで、次の操作を実行できます。
    • ファイルツールから画像を選択します。
    • [画像を追加]をクリックして、コンピューターまたはファイルURLから新しい画像をアップロードします。
    • [Canvaを使用してデザイン]をクリックして、Canvaで新しい画像を作成します。

画像を編集する

  • メニューバーの画像スタイル制御を有効にするには、リッチ テキスト エディターで画像をクリックします。
    1. 画像の周囲のテキストの位置と回り込みを調整するには、[画像のレイアウト]を選択します。
    2. 画像へのリンクを追加するには、リンクアイコンをクリックします。
    3. 画像のサイズを調整するには、[幅][高さ]矢印をクリックするか、ピクセル値を入力して、画像のサイズを調整します。
    4. 画像の周囲のパディング を調整するには、[間隔]ドロップダウンメニューをクリックして、画像アイコンの境界付近でピクセル値を入力します。

editor-for-rich-text-images

  • リッチ テキスト モジュールから画像を除去するには、画像をクリックした後、ゴミ箱アイコンdeleteをクリックするか、キーボードのDelete/Backspaceキーを押します。
  • 画像を置換するには、画像をクリックし、置換アイコン replace をクリックして新しい画像を追加します。

詳細画像オプションを編集する

画像の詳細オプションを編集して、代替テキストを追加したり、画像リンクをカスタマイズしたり、ページの読み込み方法を制御したりできます。マーケティングEメールの画像では、代替テキストを追加するオプションだけがサポートされています。 

画像を詳細に編集するには、次のようにします。

  • 画像をクリックします。
  • 鉛筆アイコンeditをクリックします。
  • ポップアップウィンドウの右上にある[詳細]をクリックします。
    • 画像が何を示しているかを検索エンジンに伝えるには、代替テキストを追加します
    • 画像がリンクされている場合、リンクタイプをカスタマイズできます。これにより、このリンクとウェブサイトとの関係が検索エンジンに伝わります。
    • 遅延読み込みを適用すると、訪問者がページ上のこのコンテンツの位置までスクロールした場合にのみ画像が読み込まれます。リッチ テキスト モジュールに挿入された画像に遅延読み込みを適用するには、[詳細]ポップアップボックスの[遅延読み込み]ドロップダウン メニューをクリックして、[遅延]を選択します。 

lazy-load-for-inserted-image-1

    • [適用]をクリックして詳細な編集内容を保存します。