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

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

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

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

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

  • ウェブサイトページ：HubSpotアカウントにて、［マーケティング］＞［ウェブサイト］＞［ウェブサイトページ］の順に進みます。
  • ランディングページ：HubSpotアカウントにて、［マーケティング］＞［ランディングページ］の順に進みます。
  • ブログ：HubSpotアカウントにて、［マーケティング］＞［ウェブサイト］＞［ブログ］の順に進みます。

• ページまたは投稿にカーソルを合わせ、[ 編集 ]をクリックします。 
• アイコンを表示したい場所で、［リッチテキストモジュール］をクリックします。
• リッチテキストツールバーの右上で、［挿入］ドロップダウンメニューをクリックして、［アイコン］を選択します。

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

アイコンの編集

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

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

  • ウェブサイトページ：HubSpotアカウントにて、［マーケティング］＞［ウェブサイト］＞［ウェブサイトページ］の順に進みます。
  • ランディングページ：HubSpotアカウントにて、［マーケティング］＞［ランディングページ］の順に進みます。
  • ブログ：HubSpotアカウントにて、［マーケティング］＞［ウェブサイト］＞［ブログ］の順に進みます。
• ページまたは投稿にカーソルを合わせ、[ 編集 ]をクリックします。 
• コンテンツエディターで、［アイコン］をクリックしてアイコンエディターを開きます。

1. • アイコンの色を編集するには、backgroundColor アイコンの色ドロップダウンメニューをクリックし、色を選択します。16 進値 または RGB カラー値を入力するには、 [詳細] [詳細] タブをクリックします。 
   • indent インデント iconiconiconアイコンを使ってアイコンを左右に移動する。
   • blockAlignmentBottom整列アイコンを使って、テキストブロック内のアイコンの位置を調整します。 
   • アイコンにリンクを追加するには、linkリンクアイコンをクリックし、リンクを挿入。
   • アイコンのサイズを変更するには、エディタでアイコンのコーナーをクリックしてドラッグするか、ツールバーで幅と高さにピクセル値を入力します。

• リッチテキストモジュールからアイコンを削除するには、画像をクリックし、deleteのゴミ箱アイコンをクリックします。.
• アイコンを置き換えるには、画像をクリックし、replace アイコンを置き換えるをクリックして、新しいアイコンを追加します。

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

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

• コンテンツエディターで、［アイコン］をクリックします。
• edit 編集アイコンをクリックします。
• ポップアップボックスで、Advancedをクリックする。
• アイコンにリンクがある場合、1つまたは複数のリンクタイプを選択できます。これにより、このリンクとウェブサイトとの関係が検索エンジンに伝わります。リンクの種類について詳しくはこちら。

• 画像に目的を選択する。
  • アイコンが情報を伝えるためのものである場合は、Read by screen readersを選択し、その目的を説明するtitleを追加してください。
  • アイコンが情報を伝えない場合は、Ignored by screen readersを選択してください。 
• ［適用］をクリックします。