WordPress投稿エディターでアイコンフォントを使用する方法（コード不要）

WordPress投稿エディターでアイコンフォントを使用しますか？

アイコンフォントを使用すると、テキストに画像やシンボルを簡単に使用できます。軽量でサイトの速度を低下させず、任意のサイズに簡単にスケーリングでき、他のテキストフォントのようにスタイル設定できます。

この記事では、HTMLコードを書かずにWordPressの投稿エディタでアイコンフォントを簡単に使用する方法を紹介します。

いくつかの方法をご紹介します。それぞれ少しずつ異なるアプローチを使用しています。ご自身に最適な方法を選択してください。

方法1. JVMリッチテキストアイコンを使用してWordPress投稿エディタにアイコンフォントを追加する

この方法は、あらゆる種類のWordPressウェブサイトで使用することをお勧めします。使いやすく、ブロックエディターとシームレスに連携します。

まず、JVM Rich Text Icons プラグインをインストールして有効化する必要があります。詳細については、WordPress プラグインのインストール方法のステップバイステップガイドをご覧ください。

有効化すると、WordPressの投稿またはページを編集したり、新しい投稿を作成したりできます。投稿エディタ内で、新しい段落ブロックを追加すると、ブロックツールバーに新しい旗アイコンが表示されます。

これをクリックすると、選択肢のアイコンが表示されるポップアップが表示されます。デフォルトでは、人気のFont Awesomeアイコンフォントを使用しています。

検索機能を使ってアイコンを探すか、単に下にスクロールして目的のアイコンを見つけ、クリックして追加してください。

アイコンフォントを使用する利点の1つは、CSSを使用してスタイルを設定できることです。

ただし、すでにブロックエディターを使用している場合は、組み込みのカラーツールを使用してアイコンをスタイル設定できます。

このプラグインを使用すると、段落、リスト、ボタン、カラム、カバーなど、ほとんどのテキストブロックでアイコンフォントを使用できます。

アイコンフォントとブロックオプションを使用して3つのカラムをスタイル設定する例を以下に示します。

アイコンフォントを使用する別の便利な例は、ボタンです。

今回は、2つのボタンのテキストと共にインラインアイコンフォントを使用しています。

テキストの配置、色、間隔などのブロックエディターツールを自由に使い、アイコンフォントを最大限に活用してください。

方法2. Font AwesomeでWordPress投稿エディターにアイコンフォントを追加する

この方法では、アイコンフォントを表示するために投稿エディターにショートコードを追加する必要があります。WordPressの投稿やページでアイコンフォントを定期的に使用する必要がない場合は、この方法を使用できます。

まず、Font Awesome プラグインをインストールして有効化する必要があります。詳細については、WordPress プラグインのインストール方法に関するステップバイステップガイドをご覧ください。

有効化すると、WordPress で投稿またはページを編集し、次のショートコードを使用してフォントアイコンを追加できます。

[icon name="home"]

ここでのnameパラメータは、Font Awesomeで使用されるフォントの名前です。完全なリストは、Font Awesomeチートシートページで見つけることができます。

追加したら、アイコンはブロックエディターではアイコンとして表示されないため、投稿またはページをプレビューして、アイコンがライブサイトでどのように表示されるかを確認できます。

これは、テストサイトでの表示です。

ショートコードは、段落内や他のテキストとインラインで使用できます。「ショートコード」ブロックを使用して、単独で追加することもできます。

ただし、「ショートコード」ブロックを使用しても、他のテキストブロックで得られるようなスタイリングオプションは得られません。

ショートコードをカラム内に追加して、機能行を作成することもできます。

実際の画像が見えず、エディター内で列の高さが変わり続けるため、少しトリッキーになります。

テストサイトではこのように表示されました。エディターでは同じ高さではありませんが、カラムは同じ高さです。

ユーザーにどのように見えるかを確認するために、新しいブラウザタブで作業をプレビューする必要が何度も出てくるでしょう。

方法 3. WordPress ページビルダーでアイコンフォントを使用する

この方法は、ランディングページを作成している場合や、SeedProdのようなWordPressページビルダーを使用してウェブサイトをデザインしている場合に最適です。

SeedProdは、市場で最高のWordPressページビルダーです。これにより、魅力的なランディングページを簡単に作成したり、完全なウェブサイトテーマをデザインしたりできます。

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

有効化すると、プラグインのライセンスキーの入力が求められます。この情報はSeedProdウェブサイトのアカウントで確認できます。

ライセンスキーを入力して「キーの確認」をクリックすると、ランディングページの作業を開始できます。

単純にSeedProd » ランディングページページに移動し、「新しいランディングページを追加」ボタンをクリックします。

その後、ランディングページのテンプレートを選択するよう求められます。

SeedProdには、開始点として使用できる美しいランディングページデザインが多数用意されています。または、空白のテンプレートから始めて、すべて自分でデザインすることもできます。

このチュートリアルでは、事前にデザインされたテンプレートを使用します。テンプレートをクリックして選択し、続行してください。

次に、ランディングページのタイトルを指定し、URLを選択するよう求められます。

入力後、「保存してページの編集を開始」ボタンをクリックして続行します。

SeedProd は、ページビルダーインターフェイスを起動します。これはドラッグ＆ドロップのデザインツールで、編集したい項目をポイントしてクリックするだけで編集できます。

左側の列からブロックをドラッグアンドドロップして、デザインに新しい要素を追加することもできます。

このチュートリアルのために、アイコンブロックを追加します。

ブロックを追加したら、プロパティを編集するためにクリックするだけです。

左側の列にアイコンブロックのオプションが表示されます。「アイコン」セクションをクリックして、別のアイコン画像を選択したり、色やスタイルを変更したりできます。

SeedProdでアイコンを使用するもう1つの方法は、「アイコンボックス」ブロックを追加することです。

これと以前使用した「アイコン」ブロックとの違いは、「アイコンボックス」では選択したアイコンと一緒にテキストを追加できることです。

これは、製品の機能、サービス、その他のアイテムを表示する際にアイコンを使用する最も一般的な方法の1つです。

アイコンボックスをカラム内に配置し、色を選択し、アイコンサイズをお好みに調整できます。

さらに、SeedProd のフォーマットツールバーを使用して、付属のテキストをフォーマットすることもできます。

ページの編集が終了したら、画面の右上隅にある「保存」ボタンをクリックすることを忘れないでください。

準備ができたら、「公開」をクリックしてページを公開するか、「プレビュー」をクリックして意図したとおりに見えることを確認できます。

また、「テンプレートとして保存」をクリックすると、このデザインをSeedProdでウェブサイトの他の部分で再利用できます。

こちらが、テストウェブサイトでアイコンフォントがどのように表示されたかです。

この記事で、HTMLコードを書かずにWordPressの投稿エディターでアイコンフォントを使用する方法を学べたことを願っています。ウェブサイトの速度を最適化するために、WordPressパフォーマンスガイドや、WordPress向けの最高のランディングページプラグインも参照することをお勧めします。

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