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

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

更新日時 2023年 6月 22日

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

すべての製品とプラン

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

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


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

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

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

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

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

アイコンの編集

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

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

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

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

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

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