ほとんどのWordPressサイトは、ソーシャルメディアアイコンのぼやけた画像ファイルに依存していると、プロフェッショナルに見えません。より良い解決策は、WordPressにFont Awesomeを追加することです。これにより、数秒で更新できる、鮮明でスケーラブルなアイコンが利用できます。
このガイドでは、セットアップ方法をステップバイステップでご紹介します。これにより、通常のフラストレーションなしで、サイトにシャープでプロフェッショナルなアイコンを取得できます。
カスタマイズ可能なFont AwesomeアイコンをWordPressに追加するための簡単な手順：
Font Awesomeとは何か、そしてなぜそれを使用するのか？
Font Awesomeは、ソーシャルメディアのロゴから矢印やナビゲーションアイコンまで、数千もの既製のデザインを備えた巨大なアイコンライブラリです。かさばる画像ファイルをアップロードする代わりに、常にきれいに見えるシャープでスケーラブルなアイコンをドロップできます。
このライブラリには7,000を超えるアイコンがあり、ベクターベースであるため、品質を損なうことなくサイズ変更できます。これにより、読み込みが速く、軽量になり、WordPressサイトを高速に保つのに最適です。
また、すべての最新ブラウザやデバイスで機能するため、サイトはどこでも一貫して表示されます。さらに、色、サイズ、スタイルをブランドデザインに合わせて簡単に調整できます。
次に、WordPressテーマにFont Awesomeを追加する方法を説明します。
カスタマイズ可能な方法：SeedProdでFont Awesomeを追加する
最初の方法ではSeedProdを使用します。これにより、ウェブサイトでフォントアイコンを使用できる場所について、より自由度が高まります。
SeedProdは、市場で最高のドラッグアンドドロップWordPressページビルダーです。1400以上のFont Awesomeアイコンが組み込まれているだけでなく、HTMLコードやCSSクラスを記述せずに任意のページに追加できるアイコンボックスも付属しています。
SeedProdを使用すると、カスタムWordPressテーマ、ランディングページ、ヘッダー、フッター、サイドバーを作成し、ドラッグアンドドロップでそれらのレイアウトのどこにでもFont Awesomeアイコンを使用できます。
SeedProdでWordPressにアイコンフォントを追加するには、以下の簡単な手順に従ってください。
ステップ1. SeedProdのインストールと有効化
まず、WordPressウェブサイトにSeedProdをインストールして有効化する必要があります。SeedProdには無料版がありますが、このガイドではアイコンボックス機能が含まれているため、プロ版を使用します。
詳細については、WordPressプラグインのインストール方法に関する初心者向けガイドを参照してください。
プラグインをインストールしたら、WordPress管理画面の**SeedProd » Settings**に移動し、プラグインライセンスキーを入力します。
ライセンスキーは、ダウンロードセクションのSeedProdウェブサイトのアカウントで見つけることができます。
ライセンスキーを貼り付けたら、**Verify Key**ボタンをクリックします。
次に、WordPress管理画面の**SeedProd » Pages**にアクセスし、**Add New Landing Page**ボタンをクリックします。
ステップ2. 既製のテンプレートを選択する
次の画面では、ページの開始点として使用するテンプレートを選択できます。180以上のプロがデザインしたテンプレートがあり、あらゆるデザインをウェブサイトのニーズに合わせてカスタマイズできます。
プロのヒント: SeedProdのテーマビルダー機能を使用して、同じページビルダー機能で、ゼロからカスタムWordPressテーマを作成することもできます。
テンプレートを選択するには、サムネイルにマウスカーソルを合わせて「チェックマーク」アイコンをクリックします。
このチュートリアルでは、eBook販売ページテンプレートを使用しますが、お好きなデザインを使用できます。
テンプレートを選択したら、ページに名前を付けることができます。プラグインは入力したタイトルに基づいてURLを自動生成しますが、設定ページでいつでも変更できます。
ページ名とURLに満足したら、保存してページ編集を開始ボタンをクリックします。
ボタンをクリックすると、SeedProdページビルダーに移動し、デザインをカスタマイズできます。
ステップ3. Font Awesomeアイコンを追加する
SeedProdのドラッグアンドドロップエディタは、右側にページのライブプレビュー、左側にいくつかのブロックと設定を表示します。
左側のメニューから、カウントダウンタイマー、ソーシャル共有ボタン、お問い合わせフォームなどの新しいコンテンツブロックをデザインにドラッグできます。
テンプレートが既に使っているブロックをカスタマイズするには、それをクリックすると、左側のサイドバーにカスタマイズ設定が表示されます。
たとえば、ブロックのコンテンツや色を変更したり、背景画像を追加したり、ブランドに合わせて配色やフォントを変更したりできます。
ページにFont Awesomeアイコンフォントを追加するには、左側の列にある「アイコン」ブロックを見つけて、デザインにドラッグします。
デフォルトでは「矢印」アイコンが表示されますが、それをクリックして、ニーズに合ったより良いFont Awesomeアイコンに切り替えることができます。
アイコンブロックが選択された状態で、設定パネルに移動し、「アイコンライブラリ」ボタンにマウスカーソルを合わせてクリックします。
これで、使用できるさまざまなFont Awesomeアイコンのライブラリが表示されます。ライブラリをスクロールするか、検索ボックスに特定のアイコン名を入力して、必要なフォントアイコンを見つけます。
そこからクリックすると、SeedProdがレイアウトに追加します。
アイコンを選択した後、アイコンの色、サイズ、配置、リンクをカスタマイズできます。
または、SeedProdのアイコンボックスを使用して、見出しと説明付きのフォントアイコンを追加することもできます。アイコンブロックと同じ方法でブロックをカスタマイズできますが、訪問者向けの追加情報を含めることもできます。
すべてが満足のいく外観になるまで、ページの作業を続けます。
SeedProdを使用してWordPressテーマ内にアイコンフォントを追加するその他の方法を次に示します。
ソーシャルプロファイルブロックを使用して、ウェブサイトにカスタムソーシャルメディアアイコンを追加します。
ヘッダーをカスタマイズし、メニューカートブロックを使用して、オンラインストアにショッピングカートメニュー項目を追加します。
ステップ4.変更を公開する
ページに満足したら、ページビルダーの保存ボタンをクリックし、「公開」を選択して、WordPressサイトでページを公開します。
そこから、新しいページにアクセスして表示を確認できます。
代替方法：Font Awesomeプラグインの使用
ウェブサイトにアイコンフォントを追加するもう1つの方法は、Font Awesome WordPressプラグインを使用することです。この方法では、投稿やページでアイコンフォントを使用できますが、最初の方法で得られるようなレベルの制御とカスタマイズはできません。
とはいえ、ページビルダープラグイン以外のものを使用したい場合には優れたソリューションです。
開始するには、WordPressプラグインリポジトリからFont Awesomeの最新バージョンをダウンロードし、ウェブサイトで有効化してください。
プラグインを有効化した後、投稿またはページを作成または編集し、ショートコードWordPressブロックを使用してFont Awesomeアイコンのショートコードを追加できます。
「+」アイコンをクリックして「ショートコード」を検索し、ブロックが表示されたらクリックするだけです。
それが完了したら、次のショートコードスニペットをコピー＆ペーストして、任意のアイコンを追加できます。
[icon name= "rocket"]
「rocket」を、表示したいアイコンの名前に置き換えるだけです。アイコン名を取得するには、Font AwesomeウェブサイトのCDN：fontawesome.com/iconsにアクセスし、使用したい無料アイコンをクリックしてください。
そこから、アイコン名をコピーしてクリップボードに保存します。
これで、ショートコードブロックに名前を貼り付け、公開をクリックして変更を公開できます。
これで、投稿にアクセスしてアイコンが機能していることを確認できます。
WordPressにFont Awesomeを追加することに関するFAQ
functions.phpでスタイルシートをエンキューするか、CDNにリンクすることで、手動でFont Awesomeを追加することもできます。[icon name="coffee"]のようなショートコードを追加するか、<i class="fas fa-coffee"></i>のようなHTMLを貼り付けることでアイコンを挿入できます。各方法は、最新のWordPressエディターで機能し、CSSクラスでスタイルを設定できます。fa-2xのようなクラスでより大きなアイコンにしたり、fa-spinのようなクラスで回転効果を付けたりできます。このガイドが、WordPressにFont Awesomeをすばやく簡単に追加する方法を学ぶのに役立ったことを願っています。お帰りの前に、メニュー項目をカスタマイズするためにWordPressでメニューを編集する方法に関するガイドも役立つかもしれません。
お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。
