ボタンにアイコンを追加する

ボタンには、クリックトゥコールボタン用の電話アイコン (📞) や、メールアイコン (📧)、続きを読むボタン用の矢印 (⬅️ ➡️) といった、アイコンや画像を追加できます。このガイドでは、ボタンにアイコンを追加する方法について説明します。

ご自分のサイトで使用可能な画像やアイコンを見つけられるサイトはたくさんあります。いくつかの例を紹介します。

• ほとんどの Windows、Mac、モバイル端末には、ボタンに追加できる絵文字が組み込まれています。
• Get Emoji などのサイトから絵文字をコピーすることもできます。
• Google フォントにはアイコンオプションが用意されています。
• Font Awesome は無料および有料のアイコンを提供する人気のサイトです。

画像を使用する場合は、SVG または PNG (透明) のファイルタイプをお勧めします。ボタンを追加する前にアイコンをメディアライブラリにアップロードできるほか、ボタンの追加時にもアイコンをアップロードできます (以下参照）。

WordPress.com のボタンにアイコンまたは画像を追加するには、ボタンブロックと用意したアイコンを使用します。ボタンにアイコンを追加するには、次の手順を実行します。

1. ボタンを追加し、ボタンにテキストとリンクを追加します。
   • クリックして電話するリンクや、クリックしてメールするリンクを作成することもできます。
2. ボタンをクリックし、テキストの前または後にカーソルを置きます。
3. 絵文字と画像のどちらを使用するかに応じて、次を実行します。
   • 絵文字: Windows または Mac のキーボードショートカットを使用し、絵文字を選択します。または、Get Emoji などのサイトから絵文字をコピー & ペーストします。
   • 画像: 表示されたツールバーで、下矢印 (続き)をクリックして「インライン画像」オプションを選択します。
     • メディアライブラリから画像を選択するか、新しい画像をアップロードします。
     • 画像をダブルクリックして画像サイズを変更し、ALT テキストを追加します。
4. 「保存」または「公開」をクリックして変更を保存します。

次の例では、Mac のキーボードショートカットを使用して絵文字を追加しています。Windows のキーボードショートカットも使用できるほか、別のサイトから絵文字をコピー & ペーストすることもできます。