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

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

更新日時 2023年 1月 19日

対象製品

すべての製品とプラン

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

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


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

  • HubSpotアカウントで、ブログ、ランディングページまたはウェブサイトページに移動します

  • ブログ記事の名前の上にカーソルを置き、[編集]をクリックします。 
  • アイコンを表示したい場所で、[リッチテキストモジュール]をクリックします。
  • リッチテキストツールバーの右上で、[挿入]ドロップダウンメニューをクリックして、[アイコン]を選択します。

insert-a-new-icon


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

アイコンの編集

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

    1. アイコンの色を編集するには、backgroundColorアイコンのカラードロップダウンメニューをクリックし、色を選択します16進値またはRGBカラー値を入力するには、[詳細]タブに進みます。 
    2. indentインデントiconiconiconアイコンを使用して、アイコンを右か左に移動します。
    3. blockAlignmentBottomアラインメント(位置合わせ)アイコンを使用して、テキストのブロック内でアイコンの位置を調整します。 
    4. 画像にリンクを追加するには、linkリンクアイコンをクリックします。
    5. アイコンのサイズを変更するには、エディターでアイコンの角をクリックしてドラッグし、ツールバーの幅と高さにピクセル値を入力します。
insert-an-icon-1
  • リッチテキストモジュールからアイコンを削除するには、画像をクリックしてからdeleteゴミ箱アイコンをクリックします
  • アイコンを置換するには、画像をクリックしてからreplace置換アイコン
    をクリックして新しいアイコンを追加します。

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

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

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