こんにちは、木村太一です。
インターネットマーケティングをする上で、今後欠かせなくなるであろうMAツールの中で、弊社はHubSpotのパートナーとして、自社でも利用しお客様にもご紹介させていただいております。
さて、今回は表題のとおりです。
ランディングページ（LP）を作って、広告からアクセスさせて、コンバージョンを得るというのがインターネットマーケティングでは基本となります。
そのランディングページ（LP）を作る際にFont Awesomeを利用する方法を共有させていただきます。
HubSpotのランディングページ（LP)作成時にFont Awesomeを使う設定の所要時間は約5分です。簡単に設定できますが、英語なのがちょっとネックですね。
Font Awesomeのキットをつくる
Font Awesome のバージョン 5.9 以降を利用するにはメールアドレスを登録してアカウントを作成する必要があります。
5.9 以降では、Kit（アイコンやスタイル、設定などの一式）という仕組みが導入され、初回アカウント作成時に Kit を使用するためのコード（Kit Code）が発行され、それを読み込むことでアイコンフォントを使用することができます。Kit は個別に設定が可能で、また、アカウントに紐付けられているので Font Awesome 側では各アカウントの使用状況（表示回数）なども把握できるようになっているようです。
今回はCDNで利用しますので、まずはアカウント登録して、キットを作成しましょう。
キットといっても面倒なことはなく、アカウント登録すれば自動的に作成されます。
公式サイトの「start」ページより、メールアドレスを入力してアカウントを作成しましょう。
HubSpotでヘッダーにコードを追加
キットが作成できたら、HubSpotのヘッダーにコードを追加してあげます。
ランディングページ（LP）ごとにコードを追加する方法と、ドメインに一括して追加する方法があります。
本来はページごとに読み込んだほうが軽量化などの面でよいかと思いますが、私は面倒なのでドメインに一括して読み込みをしました。
特定のドメインの全コンテンツのヘッダーにコードを追加する
HubSpotの管理画面に入って以下の操作を行います。
- HubSpotアカウントにて、ナビゲーションバーに表示される［設定アイコン］をクリックします。
- 左のサイドバーメニューで、［ウェブサイト］>［ページ］に移動します。
- 左上にある［設定を編集するドメインを選択］ドロップダウンメニューをクリックし、ドメインを選択します。HubSpotでホスティングされている全コンテンツに同じコードを適用するには、［すべてのドメインの既定の設定］を選択します。 私は取り急ぎランディングページ（LP）のみに使用したかったので、ランディングページ（LP）用のドメインを選択しました。
- 特定のドメインのヘッダーまたはフッターを編集するには、［サイトのヘッダーHTML］または［サイトのフッターHTML］のセクションで［既定の設定を上書き］をクリックします。既定の設定に追加されたコードは、このドメインのコンテンツには適用されなくなります。
- Font Awesomeのキットコードを入力します。
- 左下の［保存］をクリックします。
Font Awesomeをつかってアイコンを追加する
これで下準備は整いましたので、あとはコードを記載するだけです。
FontAwesomeのコードを追加しましょう。
例えば電話アイコンは以下の様に追加します。
<i class="fa-solid fa-phone"></i> 042-519-6960表示結果↓
042-519-6960上手く設定できましたでしょうか？
ドットワンではHubSpotの導入支援、運用支援を行っております。
ご興味がございましたらお気軽にお問い合わせください。