HubSpotのランディングページ(LP)作成時にFont Awesomeを使う方法(CDN)

こんにちわ、@taichi_kimuraです。

インターネットマーケティングをする上で、今後欠かせなくなるであろう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のヘッダーにコードを追加してあげます。

Font Awesomeのキットコードが生成されます

ランディングページ(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の導入支援、運用支援を行っております。

ご興味がございましたらお気軽にお問い合わせください。

この記事を書いた人

木村 太一

ドットワンの代表です。1979年生まれ。3女の父。ゴルフと筋トレが趣味。立川にあるキヤノン代理店に就職後、1万件以上飛び込み営業したのち独立。たくさんの企業を見てきた経験と自分自身も零細企業の経営者ということを活かし、相手の立場に立ったDX推進、ITコンサルを行っております。

お気軽にお問い合わせください

ホームページ、ネットショップの集客方法から、IT機器や、顧客管理、採用に関することまでご相談ください。
WEBマーケティングのノウハウを生かして、お客様のお悩みを解決します。