HubSpotコンテンツで画像を使用する

HubSpotコンテンツのリッチテキストモジュールや画像モジュールに画像を追加できます。リッチテキストモジュールは複数のタイプのコンテンツ（画像、テキスト、CTAなど）をサポートしますが、画像モジュールは1つの画像しか含むことができません。 

注: ドラッグ＆ドロップEメールエディターのテキストモジュールおよびカスタムリッチテキストモジュールには、画像を含めることはできません。 

画像を追加する

• コンテンツを開きます。

  • ウェブサイトページ：HubSpotアカウントにて、［コンテンツ］＞［ウェブサイトページ］の順に進みます。
  • ランディングページ：HubSpotアカウントにて、［コンテンツ］＞［ランディングページ］の順に進みます。
  • ブログ：HubSpotアカウントにて、［コンテンツ］＞［ブログ］の順に進みます。
  • ナレッジベース：HubSpotアカウントにて、［コンテンツ］＞［ナレッジベース］の順に進みます。
  • Eメール：HubSpotアカウントにて、［マーケティング］＞［マーケティングEメール］の順に進みます。
• コンテンツの名前をクリックします。 

注: のみ。PNG、.ico、.bmp、.jpg、および.gif iファイルをマーケティングEメールに追加できます

• 画像を挿入します。 
  • リッチテキストモジュールに画像を追加するには、リッチテキストモジュールをクリックし、リッチテキストツールバーのinsertImage ici画像アイコンをクリックします。
  • 画像モジュールに画像を追加するには、画像モジュールをクリックし、プレースホルダー画像の上にあるサイドバーエディターで［置換］をクリックします。 
• 画像を選択します。 
  • 既存の画像を挿入するには、右側のパネルで目的の画像をクリックします。

• • コンピューター上にある画像、またはファイルURLで指定した画像をアップロードするには、右側のパネルで［画像を追加］をクリックします。 Canvaの編集ツールで新しい画像を作成するには、[ Canvaでデザイン]をクリックします。次に、目的の画像をクリックして挿入します。
• 画像を挿入する前に、読み込み時間や解像度に合わせて画像を最適化できます。右側のパネルで、画像の上にマウスポインターを置き、[ 詳細]をクリックします。
• 次に、［画像の最適化］ドロップダウンメニューをクリックし、次のいずれかの最適化オプションを選択します。
  • 高：画像は高解像度で読み込まれますが、読み込み時間が長くなります。
  • 既定：画像は、解像度と読み込み時間の両方に対して最適化されます。
  • 低：画像は低解像度で読み込まれますが、読み込み時間が短くなります。読み込み時間に配慮したページの最適化について詳しくは、開発者ドキュメントをご覧ください。
     

画像を編集する

コンテンツに画像を追加したら、画像サイズの編集、代替テキストやリンクの追加、あるいは読み込み動作の設定を行うことができます。 

リッチ テキスト モジュール内の画像を編集する 

• コンテンツを開きます。

  • ウェブサイトページ：HubSpotアカウントにて、［コンテンツ］＞［ウェブサイトページ］の順に進みます。
  • ランディングページ：HubSpotアカウントにて、［コンテンツ］＞［ランディングページ］の順に進みます。
  • ブログ：HubSpotアカウントにて、［コンテンツ］＞［ブログ］の順に進みます。
  • ナレッジベース：HubSpotアカウントにて、［コンテンツ］＞［ナレッジベース］の順に進みます。
  • Eメール：HubSpotアカウントにて、［マーケティング］＞［マーケティングEメール］の順に進みます。
• コンテンツの名前をクリックします。 
• コンテンツエディターで、画像をクリックし、画像編集ツールバーを表示します。
• 画像を編集する： 
  • テキストが画像をどのように回り込むかを調整するには、inline整列アイコンをクリックします。 

• • 画像のサイズを調整するには、幅と高さの矢印をクリックするか、ピクセル値を入力します。 
  • 画像の周りのパディングを調整するには、Spacingドロップダウンメニューをクリックし、ピクセル値を入力します画像アイコンのエッジの周り。
• リッチテキストモジュールから画像を削除するには、画像をクリックし、delete ごみ箱アイコンをクリックします。 

• リッチテキストモジュールの画像を置き換えるには、画像をクリックし、replace repl置換アイコンをクリックして新しい画像を追加します。

• 画像をリンクしたり、altテキストを追加したり、読み込み動作を設定するには、画像をクリックし、次に、鉛筆アイコンをクリックします。edit:
  • 画像にリンクを追加するには、ポップアップボックスで［リンク先］ドロップダウンメニューをクリックし、目的のリンクのタイプを選択します。下のフィールドに、リンクの宛先を入力します。各種のリンクについて詳細をご確認ください。

• • Altテキストフィールドに、テキストを入力し、検索エンジンやスクリーンリーダーに画像が何であるかを説明します。また、ファイルツールで画像に alt テキストを追加することもできます。 altテキストを追加することで、アクセシビリティーとSEOが向上します。ウェブサイトのアクセシビリティーについて詳しくは、開発者ドキュメントをご覧ください。

注：画像にaltテキストを追加しても、タイトルテキストは追加されません。代替テキストは検索エンジンのランキングとアクセシビリティーに影響を与えるためのものですが、タイトルテキストは、訪問者が画像にカーソルを重ねたときに表示されるものです。 

• 画像の読み込み動作を設定する場合や、検索エンジン用に画像リンクのタイプをカスタマイズする場合は、［詳細設定］をクリックします。 
  • 画像の読み込み動作を設定するには、［画像の読み込み］ ドロップダウンメニューをクリックし、次のいずれかのオプションを選択します。 
    • 遅延：訪問者がページの画像部分に到達したときにのみ、画像が読み込まれます。これにより、ページの読み込みにかかる時間が短縮され、SEOが改善されます。既定では、この設定で画像が読み込まれます。 

• • • ブラウザーの既定値：画像の読み込み動作は、ユーザーのブラウザー設定によって決まります。 
    • 遅延しない：ページが読み込まれるとすぐに画像が読み込まれます。 

• • 画像リンクのタイプをカスタマイズするには、［リンクタイプ］セクションで、次の1つ以上の属性を選択します。
    
    • 通常：このリンクはスポンサーによるものではありません。 
    • 「フォローしない（「フォローしない（「フォローしない（「フォローしない（No follow）」）」）」）」:このリンクはあなたのウェブサイトと関連付けされていません。
    • Sponsored:このリンクはスポンサーリンクまたは広告です。
    • ユーザー生成コンテンツ：このリンクは、ブログのコメントやフォーラムでの議論など、ユーザー生成コンテンツにつながる。 
• ［適用］をクリックして、変更を画像に適用します。

• 右上の「「公開」 or Update」をクリックし、ダイアログボックスの「「公開」 or Update」をクリックすると、変更が反映されます。 

画像モジュール内の画像を編集する

• コンテンツを開きます。

  • ウェブサイトページ：HubSpotアカウントにて、［コンテンツ］＞［ウェブサイトページ］の順に進みます。
  • ランディングページ：HubSpotアカウントにて、［コンテンツ］＞［ランディングページ］の順に進みます。
  • ブログ：HubSpotアカウントにて、［コンテンツ］＞［ブログ］の順に進みます。
  • Eメール：HubSpotアカウントにて、［マーケティング］＞［マーケティングEメール］の順に進みます。
• コンテンツの名前をクリックします。 
• コンテンツエディターで、画像モジュールをクリックする。 
• 現在の画像を削除するには、サイドバーエディターの［画像］セクションで［削除］をクリックします。これにより、現在の画像が画像モジュールから削除されますが、ページからモジュールが削除されることはありません。 

• 現在の画像を置き換えるには、サイドバーエディターの［画像］セクションで［置換］をクリックし、新しい画像を追加します。 
• Altテキストフィールドに、テキストを入力し、検索エンジンやスクリーンリーダーに画像が何であるかを説明します。また、ファイルツールで画像に alt テキストを追加することもできます。 altテキストを追加することで、アクセシビリティーとSEOが向上します。ウェブサイトのアクセシビリティーについて詳しくは、開発者ドキュメントをご覧ください。

注：画像にaltテキストを追加しても、タイトルテキストは追加されません。代替テキストは検索エンジンのランキングとアクセシビリティーに影響を与えるためのものですが、タイトルテキストは、訪問者が画像にカーソルを重ねたときに表示されるものです。 

• 異なるデバイスで画像のサイズを設定するには、サイズドロップダウンメニューをクリックし、オプションを選択します：
  
  • 自動調整:画像は、表示されるデバイスに合わせてサイズが拡大縮小されます。 
  • 正確な高さと幅 : 画像はすべてのデバイスで同じサイズとして表示されます。
• 画像サイズの制限を設定するには、最大サイズドロップダウンメニューをクリックし、オプションを選択します： 
  • 画像のオリジナルサイズ : 画像がオリジナルサイズより大きく表示されることはありません。 
  • カスタム : width and heightフィールドで設定された特定の幅と高さより大きく表示されることはありません。 
• 画像の読み込み動作を設定するには、画像読み込みドロップダウンメニューをクリックし、オプションを選択します： 
  • ブラウザーの既定値：画像の読み込み動作は、ユーザーのブラウザー設定によって決まります。 

• • 遅延：訪問者がページの画像部分に到達したときにのみ、画像が読み込まれます。これにより、ページの読み込みにかかる時間が短縮され、SEOが改善されます。既定では、この設定で画像が読み込まれます。 

• • Eager : できるだけ早く画像をロードする。 
• 画像にリンクを追加するには、［リンク（オプション）］フィールドにリンク先URLを入力します。［リンクを新しいタブで開く］チェックボックスをオンにすると、訪問者が新しいブラウザータブでリンク先URLにリダイレクトされます。
• 変更内容を公開するには、右上の[公開]または[更新]をクリックします。