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

HubSpotコンテンツに含まれるリッチ テキスト モジュールまたは画像モジュールに画像を追加できます。リッチ テキスト モジュールでは複数の種類のコンテンツ（画像、テキスト、CTAなど）がサポートされていますが、画像モジュールにはそれぞれ1つの画像だけを含めることができます。 

画像を追加する

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

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

• Eメールに画像を追加するには、次のようにします。
  
  • リッチ テキスト モジュール:クラシックエディターを使用するEメールの場合は、リッチ テキスト ツールバーのinsertImage iciimageアイコンをクリックします。ドラッグ＆ドロップEメールエディターでテキストモジュールとカスタム リッチ テキスト モジュールに画像を含めることはできません。
  • 画像モジュール：ドラッグ＆ドロップEメールエディターを使用するEメールの場合は、画像モジュールをクリックし、プレースホルダー画像の上にあるサイドバーエディターで［置換］をクリックします。

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

• ページ、投稿、記事に画像を追加するには、次のようにします。 
  • リッチ テキスト モジュール：リッチ テキスト モジュールをクリックし、リッチ テキスト ツールバーのinsertImage ici画像アイコンをクリックします。
  • 画像モジュール：画像モジュールをクリックし、プレースホルダー画像の上にあるサイドバーエディターで［置換］をクリックします。 

• 画像を選択します。 
  • 既存の画像を挿入するには、右側のパネルで目的の画像をクリックします。

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

画像を編集する

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

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

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

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

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

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

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

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

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

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

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

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

• 変更内容を公開するには、右上の［公開］または［更新］をクリックしてから、ダイアログボックスで［公開］または［更新］をクリックします。 

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

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

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

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

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

• 異なるデバイスでの画像のサイズを設定するには、［サイズ］ドロップダウンメニューをクリックし、次のいずれかのオプションを選択します。
  
  • 自動的に調整：画像のサイズは、それを表示するデバイスに合わせて拡大縮小されます。 
  • 幅と高さを固定：画像は全てのデバイス上で同じサイズで表示されます。
• 画像サイズの制限を設定するには、［最大サイズ］ドロップダウンメニューをクリックし、次のいずれかのオプションを選択します。 
  • 画像の本来のサイズ：画像が本来のサイズよりも大きく表示されることはありません。 
  • カスタム：画像が［幅］および［高さ］フィールドで設定されている特定の幅と高さよりも大きく表示されることはありません。 
• 画像の読み込み動作を設定するには、［画像の読み込み］ドロップダウンメニューをクリックし、次のいずれかのオプションを選択します。 
  • ブラウザーのデフォルト値：画像の読み込み動作は、ユーザーのブラウザー設定によって決まります。 

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

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