コンテンツにカスタムソーシャルアイコンを使用箇所

HubSpotの デフォルトのソーシャルシェアリング モジュールと ソーシャルフォロー モジュールには、一般的なソーシャルネットワーク( Facebook や LinkedInなど)のアイコンが含まれています。デフォルトのソーシャルアイコンを置き換えるには、モジュールを複製してカスタマイズします。次に、カスタムのソーシャルモジュールをページまたはテンプレートに追加します。 

既定のソーシャルモジュールを複製

1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
2. ファインダーで テキスト を入力すると、「 ソーシャルシェアリング 」モジュールまたは 「ソーシャルフォロー」 モジュールが表示されます。
3. [ソーシャルフォロー]モジュールまたは[ソーシャル共有]モジュールをクリックします。 
4. モジュールエディターで、[モジュールは読み取り専用です] アラートで[モジュールを複製]をクリックします。

5. ダイアログボックスに複製したモジュール の名前 を入力し、[複製]をクリックします。モジュールエディター が表示され、そこでソーシャルアイコンのカスタマイズを続行できます。

ソーシャルアイコンを置き換える

1. インスペクターで、[リンク済みファイル]セクションを見つけます。[その他のファイル]フィールドでは、各ネットワークのソーシャルアイコンのファイル名( facebook-color.png や linkedin-color.pngなど)をメモします。
2. カスタムのソーシャルアイコンの画像が PNG形式であることを確認します。
   
3. 新しいソーシャルアイコン画像のファイル名がモジュール内の各ネットワークの既存のソーシャル アイコン ファイルと同じであることを確かめます(facebook-color.pngやlinkedin-color.pngなど)。
4. [X]をクリックして、既存のソーシャル アイコン ファイルを削除します。
5. [その他のファイル]フィールドの横にある [追加]をクリックします。

6. 右側のパネルにある ファイルマネージャーに カスタムソーシャルアイコン があります。デバイスからファイルをアップロードするには、[アップロード]をクリックします。
7. ファイル名をクリックして、アイコンをモジュールに追加する。
8. ソーシャルモジュールをプレビューするには、 モジュールエディターの右上にある[ プレビュー]をクリックします。
9. 完了したら、[変更を公開]をクリックします。 

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

ソーシャルモジュールを公開したら、ドラッグ&ドロップテンプレートまたはコードテンプレートに追加できます。

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

1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
2. ファインダーで、テンプレート の名前をクリックします。 
3. インスペクターで、[+追加]をクリックします。 
4. 新しい ソーシャルモジュールをクリックし、 テンプレート上の位置にドラッグします。 
5. 完了したら、右上の [変更を公開]をクリックします。

コードテンプレート

1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
2. ファインダーで、新しい ソーシャルモジュールをクリックします。
3. [アクション ]ドロップダウンメニューをクリックし、[ スニペットをコピー]を選択します。
4. ファインダーで、 コードテンプレートをクリックします。 
5. コードエディターで、モジュールを表示する場所に スニペット を貼り付けます。
6. 完了したら、右上の [変更を公開]をクリックします。