メインコンテンツにスキップ
お客さまへの大切なお知らせ:膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。

リッチテキストモジュールでのアイコンの挿入と編集

更新日時 2024年 5月 23日

以下の 製品でご利用いただけます(別途記載されている場合を除きます)。

すべての製品とプラン

ブログ記事やページ上のリッチテキストモジュールFont Awesomeライブラリ内の任意のアイコンを追加することができます。アイコンが追加されると、色、ポジショニング、サイズをカスタマイズすることができます。 

注意事項:マーケティングEメールに直接アイコンを追加することはできません。Eメールにアイコンを使用するには、アイコンを画像として保存し、その画像をEメールエディターに挿入します。 


リッチテキストモジュールのコンテンツにアイコンを追加する

  • コンテンツを開きます。

    • ウェブサイトページ:HubSpotアカウントにて、[コンテンツ]>[ウェブサイトページ]の順に進みます。
    • ランディングページ:HubSpotアカウントにて、[コンテンツ]>[ランディングページ]の順に進みます。
    • ブログ:HubSpotアカウントにて、[コンテンツ]>[ブログ]の順に進みます。
  • コンテンツの名をクリックします。 
  • アイコンを表示したい場所で、[リッチテキストモジュール]をクリックします。
  • リッチテキストツールバーの右上で、[挿入]ドロップダウンメニューをクリックして、[アイコン]を選択します。

投稿またはページにアイコンを挿入する

  • ポップアップ・ボックスで、検索バーからアイコンを検索する。 
  • アイコンをクリックして、リッチテキストモジュールに挿入します。 

アイコンの編集

アイコンが挿入されると、外観、位置、他のコンテンツへのリンクを編集することができます。 

  • コンテンツを開きます。

    • ウェブサイトページ:HubSpotアカウントにて、[コンテンツ]>[ウェブサイトページ]の順に進みます。
    • ランディングページ:HubSpotアカウントにて、[コンテンツ]>[ランディングページ]の順に進みます。
    • ブログ:HubSpotアカウントにて、[コンテンツ]>[ブログ]の順に進みます。
  • コンテンツの名をクリックします。 
  • コンテンツエディターで、[アイコン]をクリックしてアイコンエディターを開きます。
    • アイコンの色を編集するには、backgroundColor アイコンの色ドロップダウンメニューをクリックし、色を選択します。16 進値 または RGB カラー値を入力するには、 [詳細] [詳細] タブをクリックします。 
    • indent 字下げ iconiconiconアイコンを使ってアイコンを左右に移動する。
    • blockAlignmentBottom整列アイコンを使って、テキストブロック内のアイコンの位置を調整します。 
    • アイコンにリンクを追加するには、linkリンクアイコンをクリックし、リンクを挿入
    • アイコンのサイズを変更するには、エディターでアイコンのコーナーをクリックしてドラッグするか、ツールバーで幅と高さにピクセル値を入力します。
アイコンツールバー
  • リッチテキストモジュールからアイコンを削除するには、画像をクリックし、deleteのごみ箱アイコンをクリックします。.
  • アイコンを置き換えるには、画像をクリックし、replace アイコンを置き換えるをクリックして、新しいアイコンを追加します。

詳細アイコンオプションを編集する

アイコンの詳細オプションを編集して、アクセシビリティーテキストを追加するか、アイコンリンクをカスタマイズすることができます。 

  • コンテンツエディターで、[アイコン]をクリックします。
  • edit 編集アイコンをクリックします。
  • ポップアップボックスで、Advancedをクリックする。
  • アイコンにリンクがある場合、1つまたは複数のリンクタイプを選択できます。これにより、このリンクとウェブサイトとの関係が検索エンジンに伝わります。さまざまなリンクタイプについて詳しくはこちら .
  • 画像に目的を選択する。
    • アイコンが情報を伝えるためのものである場合は、「スクリーンリーダーによって読まれる」を選択し、その目的を説明するtitleを追加してください。
    • アイコンが情報を伝えない場合は、「スクリーンリーダーによって無視される」を選択してください。 
  • [適用]をクリックします。 
select-an-icon-purpose-1
この記事はお役に立ちましたか?
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。