更新日時 2024年 8月 8日
以下の 製品でご利用いただけます（別途記載されている場合を除きます）。
すべての製品とプラン
|
ソーシャルフォローまたはソーシャル共有モジュールのカスタムソーシャルアイコンをHubSpotページやテンプレートに追加するには、モジュールのカスタムバージョンを作成して自分のソーシャルアイコンを追加します。
1. 既定のモジュールを複製します
- HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
- 左の列で、ソーシャルフォローまたはソーシャルシェアモジュールをクリックします。
- モジュール・エディタのアラートで、Clone moduleをクリックする。
- ダイアログボックスで、複製するモジュールの名を入力し、Cloneをクリックします。
2. アイコンを置換する
- モジュールインスペクタで、Linked filesセクションを探します。その他のファイルの下で、各ネットワークのソーシャルアイコンのファイル名をメモしてください（例：facebook-color.png）。
- カスタムソーシャルアイコン画像がPNG形式で、モジュール内の各ネットワークの既存のソーシャルアイコンファイルと同じファイル名であることを確認してください（例：facebook-color.png）。
- ネットワークの既存のソーシャルアイコンを置換するには、ファイルの右側にあるxシンボルをクリックします。次に、その他のファイルの隣にある追加をクリックする。
- 右側のパネルで、検索バーを使用して、ファイルマネージャーからカスタムソーシャルアイコンを探すか、左下のファイルを追加をクリックし、ファイルをアップロードを選択して、デバイスからカスタムソーシャルアイコンをアップロードします。
- ファイル名をクリックして、アイコンをモジュールに追加する。
- ソーシャルアイコンファイルの置換後、モジュールエディタの右上にあるプレビューをクリックして、モジュールのプレビューを開きます。
- モジュールの表示に満足したら、モジュールエディタの右上にある変更公開をクリックします。これで、この新しいカスタムモジュールを HubSpot コンテンツに追加できるようになりました。
3.モジュールをテンプレートに追加する
公開したモジュールは、ドラッグ＆ドロップテンプレートまたはコードテンプレートに追加することができます。
ドラッグ＆ドロップテンプレート
- HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
- 左列で、テンプレートの名前をクリックする。
- 右列で、+ Addをクリックする。
- 新規モジュールをクリックし、テンプレートの所定の位置にドラッグします。
- 右上の［変更を公開］をクリックします。
コードテンプレート
- HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
- 左の列で、新しいモジュールの名をクリックする。
- 左上で、Actionsドロップダウンメニューをクリックし、Copy snippetを選択します。
- 左列で、コードテンプレートの名前をクリックする。
- コードテンプレートで、モジュールを表示させたいスニペットを貼り付けます。
- 右上の変更公開をクリックします。
