WordPressテーマにアイコンフォントを簡単に追加する方法

通常の画像ファイルをアイコンに使用しているWordPressウェブサイトを見ると、もっと良いものを見逃しているのではないかと思わざるを得ません。

それは、フォントアイコンの方が賢い選択だからです。読み込みが速く、どの画面でもシャープに見え、数回のクリックでサイズや色を簡単に変更できます。

多くのウェブサイト所有者は、より簡単な選択肢について知らないため、今でも昔ながらの画像アイコンを使用しています。最新のアイコンフォントのおかげで、サイトを遅くすることなく、見た目の良いアイコンを追加できるようになりました。

このガイドでは、WordPressテーマにアイコンフォントを追加する最も簡単な方法を紹介します。これらの方法は自分でテスト済みであり、使用しているテーマに関係なくうまく機能します。

アイコンフォントとは何ですか？なぜそれらを使用すべきなのですか？

アイコンフォントは、文字や数字の代わりに記号や小さな画像を含んでいます。

これらのアイコンフォントは、さまざまな方法で使用できます。たとえば、ショッピングカート、ダウンロードボタン、フィーチャーボックス、プレゼント企画、さらにはWordPressのナビゲーションメニューなどと組み合わせて使用できます。

実際、WordPressは管理画面でフォントアイコンを使用しています。

ほとんどの訪問者は、一般的に使用されるアイコンの意味をすぐに理解できるため、サイトのナビゲーションが容易になります。また、ほとんどの人が共通のアイコンフォントを話している言語に関係なく理解できるため、多言語ウェブサイトを作成するのにも役立ちます。

画像ベースのアイコンと比較して、フォントアイコンははるかに高速に読み込まれるため、WordPress の速度とパフォーマンスを向上させることができます。

無料で使用できるオープンソースのアイコンフォントセットはいくつかありますが、このガイドでは、最も人気のあるオープンソースアイコンセットであるFont Awesomeを使用します。

それでは、WordPressテーマにアイコンフォントを簡単に追加する方法を見ていきましょう。使用したい方法に直接ジャンプするには、以下のクイックリンクを使用してください。

• 方法1. WordPressプラグインを使用してアイコンフォントを追加する（無料で簡単）
• Method 2. Using Icon Fonts with SeedProd (More Customizable)

方法1. WordPressプラグインを使用してアイコンフォントを追加する（無料で簡単）

WordPressにカスタムアイコンフォントを追加する最も簡単な方法は、Font Awesomeプラグインを使用することです。

このプラグインを使用すると、WordPressのテーマファイルを変更することなく、ページや投稿で無料のアイコンフォントを使用できます。プラグインを更新するたびに、新しいFont Awesomeアイコンも自動的に取得できます。

まず最初に行う必要があるのは、WordPressにFont Awesomeを追加することです。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

有効化すると、Font Awesomeアイコンを任意のショートコードブロックに追加できます。アイコンフォントを表示したいページまたは投稿を開き、「+」アイコンをクリックするだけです。

「ショートコード」を検索し、表示されたら適切なブロックを選択できるようになりました。

これが完了したら、次のショートコードを使用してFont Awesomeアイコンを追加できます。

[icon name="rocket"]

「rocket」を、表示したいアイコンの名前に置き換えるだけです。名前を取得するには、Font Awesome ライブラリにアクセスし、使用したいアイコンをクリックしてください。

表示されるポップアップで、アイコンをクリックしてください。

Font Awesome は、名前を自動的にクリップボードにコピーします。

これが完了したら、ショートコードに名前を貼り付けるだけです。これで、「公開」または「更新」をクリックしてアイコンフォントを公開できます。

時には、テキストブロック内にアイコンフォントを表示したい場合があります。例えば、ブランド名の後に「コピーライト」記号を表示する必要があるかもしれません。

これを行うには、ショートコードを任意の段落ブロック内に貼り付けるだけです。

その後、右側のメニューの設定を使用して、テキストブロックのオプションをカスタマイズするのと同様にアイコンをカスタマイズできます。たとえば、テキストの色、フォントサイズ、WordPressの背景色を変更できます。

WordPressはショートコードをFont Awesomeアイコンに変換し、テキストの横に表示します。

他のオプションとして、ショートコードをウィジェット対応エリアに追加することもできます。

例えば、ショートコードブロックをサイトのサイドバーや同様のセクションに追加できます。

詳細については、WordPressサイドバーウィジェットでショートコードを使用する方法に関するガイドをご覧ください。

アイコンショートコードを列に追加して、美しい機能ボックスを作成することもできます。

WordPressでアイコン付きのフィーチャーボックスを追加する方法については、WordPressでアイコン付きのフィーチャーボックスを追加する方法のガイドをご覧ください。

多くのウェブサイトでは、訪問者がサイト内を移動しやすくするために、メニューにアイコンフォントを使用しています。アイコンを追加するには、WordPressダッシュボードで新しいメニューを作成するか、既存のメニューを開いてください。

WordPressでのナビゲーションメニューの追加方法については、WordPressでのナビゲーションメニューの追加方法の初心者向けガイドをご覧ください。

外観 » メニュー ページで、「画面オプション」をクリックし、「CSSクラス」の横にあるチェックボックスをオンにします。

これが完了したら、アイコンを表示したいメニュー項目をクリックして展開します。

新しい「CSS クラス」フィールドが表示されるはずです。

アイコンのCSSクラスを取得するには、Font Awesomeのウェブサイトでアイコンフォントを見つけてクリックするだけです。必要に応じて、さまざまな設定をクリックしてアイコンのスタイルを変更することもできます。

ポップアップには、HTMLコードスニペットが表示されます。CSSクラスは、引用符の間のテキストです。例えば、次の画像では、CSSクラスはfa-solid fa-address-bookです。

引用符内のテキストをコピーし、WordPressダッシュボードに戻ってください。

テキストを「CSSクラス」フィールドに貼り付けることができます。

アイコンフォントを追加するには、上記と同じ手順に従ってください。

メニューの設定が完了したら、「保存」をクリックします。これで、WordPressウェブサイトにアクセスすると、更新されたナビゲーションメニューが表示されます。

方法 2. SeedProd でアイコンフォントを使用する（よりカスタマイズ可能）

サイトのどこにでもフォントアイコンを使用する自由が欲しい場合は、ページビルダープラグインの使用をお勧めします。

SeedProdは、市場で最高のドラッグ＆ドロップWordPressページビルダーであり、1400以上のFont Awesomeアイコンが組み込まれています。また、ドラッグ＆ドロップで任意のページに追加できる、すぐに使えるアイコンブロックもあります。

当社のパートナーブランドのいくつかは、このツールを使用してウェブサイト全体を作成しており、素晴らしい経験をしています。詳細は、SeedProd のレビューをご覧ください。

まず、プラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法の初心者向けガイドをご覧ください。

有効化したら、 SeedProd » 設定 に移動してライセンスキーを入力します。

この情報はSeedProdウェブサイトのあなたのアカウントで見つけることができます。ライセンスキーを入力したら、「キーの検証」ボタンをクリックしてください。

次に、SeedProd » Pagesにアクセスし、「新しいランディングページを追加」ボタンをクリックする必要があります。

次に、ページの基盤として使用するテンプレートを選択できます。SeedProdには、WordPressブログまたはウェブサイトのニーズに合わせてカスタマイズできる350以上のプロフェッショナルにデザインされたテンプレートがあります。

例えば、バイラル待機リストのランディングページ、スqueezeページ、あるいはカスタム404エラーページを作成して、ユーザーを惹きつけることができます。

テンプレートを選択するには、マウスカーソルをテンプレートに合わせ、次に「チェックマーク」アイコンをクリックします。

すべての画像で「Ebook Sales Page」テンプレートを使用しています。これはデジタル製品の販売に最適です。ただし、好きなデザインを使用できます。

次に、カスタムページの名称を入力します。SeedProdはページのタイトルに基づいてURLを自動的に作成しますが、このURLは好きなものに変更できます。

入力した情報に満足したら、「保存してページの編集を開始」ボタンをクリックします。

次に、SeedProdのドラッグアンドドロップページビルダーに移動し、そこでテンプレートをカスタマイズできます。

SeedProd エディタは、右側にデザインのライブプレビュー、左側にブロック設定を表示します。

左側のメニューには、デザインにドラッグできるブロックもあります。

ボタンや画像などの標準ブロックをドラッグアンドドロップしたり、お問い合わせフォーム、カウントダウン、ソーシャルメディア共有ボタンなどの高度なブロックを使用したりできます。

ブロックをカスタマイズするには、レイアウトでそれをクリックして選択するだけです。

左側のメニューに、そのブロックをカスタマイズするために使用できるすべての設定が表示されます。たとえば、背景色を変更したり、背景画像を追加したり、ブランドに合わせて配色やフォントを変更したりすることができます。

ページにアイコンフォントを追加するには、左側の列にある「アイコン」ブロックを見つけて、レイアウトにドラッグするだけです。

SeedProdはデフォルトで「矢印」アイコンを表示します。

別のFont Awesomeアイコンを表示するには、アイコンブロックをクリックして選択するだけです。

左側のメニューで、アイコンの上にマウスカーソルを合わせ、表示される「アイコンライブラリ」ボタンをクリックします。

これで、選択できるさまざまなFont Awesomeアイコンが表示されます。

使用したいフォントアイコンを見つけてクリックするだけです。

SeedProd は、アイコンをレイアウトに追加します。

アイコンを選択した後、左側のメニューの設定を使用して、その配置、色、サイズを変更できます。

左側のメニューの「リンク」フィールドに入力することで、フォントアイコンにリンクを追加することもできます。

もう一つの選択肢は、SeedProdの既製のアイコンボックスを使用することです。

これにより、テキストを入力し、その横にフォントアイコンを表示できるため、フィーチャーボックスに最適です。

左側のメニューからアイコンボックスを見つけて、レイアウトにドラッグするだけです。

その後、ブロックをクリックして選択し、上記と同じプロセスに従ってアイコンを変更できます。

その後、ヘッダーテキストと本文テキストを入力できます。

「詳細設定」タブを選択すると、ブロックのパディングとマージンを変更したり、CSSアニメーションを追加したりすることもできます。

左側のメニューでさらにブロックを追加し、それらのブロックをカスタマイズすることで、ページでの作業を続けることができます。

ページの見た目が気に入ったら、「保存」ボタンをクリックします。その後、「公開」を選択してページを公開できます。

代替案：SVG アイコンを使用する

WordPressにアイコン画像を追加する別の方法として、SVGアイコンを使用する方法があります。Scalable Vector Formatの略で、ベクターグラフィックスによく使用される画像形式です。

多くの人が、アイコンに複数の色を追加したい場合に、アイコンフォントよりもSVGベクターアイコンを使用しています。これらのファイルは、よりSEOフレンドリーであり、他の画像アイコンよりも読み込みに必要なサーバーリクエストが少ないことでも知られています。

SVG についてさらに詳しく知りたい場合は、WordPress に SVG 画像ファイルを簡単に追加する方法に関するステップバイステップガイドをご覧ください。

このチュートリアルでWordPressテーマにアイコンフォントを追加する方法を学べたことを願っています。また、最適なWordPressテーマビルダーやWordPressテーマのフォントを変更する方法に関するガイドも参照してください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。