HubSpot ページまたはテンプレートでカスタムソーシャルアイコンを使用する

HubSpot ページまたはテンプレートの Follow Me モジュールまたはソーシャルシェアリングモジュールでカスタムソーシャルアイコンを使用するには、モジュールのカスタムバージョンを作成して独自のソーシャルアイコンを追加します。

1. 既定のモジュールを複製する

• HubSpotアカウントにて、［マーケティング］＞［ファイルとテンプレート］＞［デザインツール］の順に進みます。
• 左上の検索バーを使用して、既定の Follow Me モジュールまたはソーシャルシェアリングモジュールを検索します。
• モジュールの名前をクリックしてエディターで開きます。
• モジュールエディターのアラートで、[モジュールを複製] をクリックします。

• このダイアログボックスで、複製したモジュールの名前を入力して、［複製］ をクリックします。
  
  

2. アイコンを置換する

• モジュールインスペクターで、［リンク済みファイル］セクションを見つけます。[その他のファイル] で、各ネットワークのソーシャルアイコンファイル名を書き留めます (facebook-color.png など)。
• カスタムソーシャルアイコン画像が PNG 形式であり、モジュールの各ネットワークの既存のソーシャルアイコンファイルと同じ名前であることを確認します (facebook-color.png など)。
• ネットワークの既存のソーシャルアイコンを置換するには、ファイル右側の ［x］ 記号をクリックします。次に、[その他のファイル] の横にある [追加] をクリックします。

• 右側のパネルで、検索バーを使用してファイルマネージャーのカスタムソーシャルアイコンを見つけるか、左下で ［ファイルを追加］ をクリックして ［ファイルをアップロード］ を選択してデバイスからカスタムソーシャルアイコンをアップロードします。
• ファイル名をクリックしてアイコンをモジュールに追加します。

• ソーシャルアイコンファイルを置換した後で、モジュールエディターの右上にある ［プレビュー］ をクリックしてモジュールのプレビューを開きます。
• モジュールの表示に問題がなければ、モジュールエディターの右上にある ［変更を公開］ をクリックします。これで、この新しいカスタムモジュールを HubSpot コンテンツに追加できるようになりました。

3.モジュールをテンプレートに追加する

公開したモジュールは、ドラッグ＆ドロップテンプレートまたはコードテンプレートに追加することができます。

ドラッグ＆ドロップテンプレート

新しいソーシャルシェアリングまたはFollow Meモジュールをドラッグ＆ドロップテンプレートに追加するには、モジュールをテンプレートに追加する方法についてのガイドを参照してください。

コードテンプレート

この新しいモジュールをコードテンプレートに追加するには、次の手順を実行します。

• デザインマネージャーでモジュールを開く。
• 左上の［アクション］ドロップダウンメニューをクリックし、［スニペットをコピー］を選択します。
  
  
• このモジュールを追加するコードテンプレートに移動します。
• コードテンプレートで、モジュールを表示させたいスニペットを貼り付けます。
• 右上の［公開］をクリックします。