SSL サイトの混合コンテンツ警告を解決する
更新日時 2020年 10月 19日
HubSpot でホストされているウェブサイトが SSL (HTTPS)を使用して設定されている場合、HTTP 経由で読み込まれたアセットはブラウザーからブロックされます。HubSpot では自動的にホストされているすべてのリソースがプロトコルレスで、問題なく読み込まれるようにする。ただし、HTTP 経由で外部サーバーからアセットを読み込んでいる場合、SSL を有効にすると、アセットが読み込まれません。
ブラウザの開発者ツールの Javascript コンソールで、ブロックされるアセットを確認できます。
非 HubSpot ドメインから読み込まれたリソースの混在コンテンツ警告を解決するには、可能であれば HTTPS バージョンの URL を使用します。外部サイトが HTTPS リクエストをサポートしていない場合、コンテンツが HTTPS 経由で使用可能かどうか、そのドメインの管理者に確認する必要があります。ソースファイルが HTTPS をサポートしない場合、ファイルマネージャーにアセットをアップロードし、代わりに URL を参照する。

混合コンテンツ警告のソース
コンテンツ混在警告メッセージの最も一般的な発生元の1つは、サイトのスタイルシート内の非 HubSpot ホストファイルです。
- 外部でホストされているフォントをロードする @font-face 参照
- 背景画像 URL
- 外部スタイルシートの @import
外部アセットを参照するカスタムスクリプトを使用している場合は、これらのファイルも更新する必要があります。
スクリプトとスタイルシート
<head> 外部スタイルシートをサイトのセクションまたはフッターに添付する場合、これらのファイルが HTTPS 要求をサポートするようにする必要があります。これらの参照は、HubSpot の次の場所で追加できます。
ウェブサイトの設定
- HubSpotアカウントにて、ナビゲーションバーに表示される[設定アイコン settings]をクリックします。
- 左のサイドバーメニューで [ウェブサイト] > [ページ] に移動します。
- [修正中] ドロップダウンメニューを使用して、スタイルシートを添付する ドメイン を選択します 。 すべてのドメイン を HubSpot ホストのドメインにスタイルシートを添付するように選択することもできます。
- サイトヘッダー HTML および/またはサイトフッター HTML フィールドを見つけます。
ブログ設定
- HubSpotアカウントにて、ナビゲーションバーに表示される[設定アイコン settings]をクリックします。
- 左のサイドバーメニューで、[ウェブサイト]> [ブログ] の順に進みます。
- [修正するブログを選択] ドロップダウンメニューを使用して、編集するブログを選択します。
- [テンプレート] タブをクリックします。
- HTML セクションを見つけます。
デザインマネージャー
- HubSpotアカウントにて、[マーケティング] > [ファイルとテンプレート] > [デザインツール]の順に進みます。
- ファインダーからテンプレートを選択し、[追加の<head>マークアップ]セクションを更新します。
ページエディター
- ウェブサイトページまたはランディングページに移動します。.
- ページの上にカーソルを置いて [編集] をクリックします。
- [設定] タブをクリックして下さい。
- [詳細オプション]をクリックして、[追加のコードスニペット]セクションまでスクロールダウンします。
画像
外部 URL からロードされる画像がコンテンツに含まれている場合、その src 属性を HTTPS に設定する必要があります。
外部サーバーで HTTPS がサポートされていない場合、これらの画像をファイルマネージャーにアップロードすることができます。アセットをファイルマネージャーにアップロードする方法についてもっと詳しく。
cdn1.hubspot.com
cdn1.hubspot.com 上にホストされているアセットは HTTPS リクエストをサポートしません。この問題を解決するには、ファイルマネージャーのファイルを見つけ、複製する。ファイルを複製した後、新しいファイルのURLをコピーして、参照を更新します。
相対URLの使用
アセットと画像が「//www.mysite.com/myimage.png」や「//www.mysite.com/my-asset-location」といった相対 URL を使用しているかどうか確認します。
相対 URL はプロトコルを使用せず(httpやhttpsが含まれない)、設定されているプロトコルに関係なく対応します。
関連記事
-
GoogleタグマネージャーのコードをHubSpotページに追加する
GoogleタグマネージャーとHubSpotを統合して、一か所の複数のソースからのトラッキングを管理することができます。Googleタグマネージャーの詳細については、Googleのスタートガイド...
ナレッジベース -
HubSpotコンテンツに動画を追加する
HubSpot動画を使用すると、ファイルツールに動画をアップロードし、ページ、マーケティングEメール、ブログ記事、ナレッジベース記事に動画を追加できます。 HubSpot動画は、ドラッグ&ドロップ マーケティングEメール
ナレッジベース -
コンテンツをパーソナライズする
...
ナレッジベース