WordPressにアイコン付きのフィーチャーボックスを追加する方法

成功しているビジネスウェブサイトのいずれかを見てみれば、主要なサービスを強調するアイコン付きのフィーチャーボックスが表示されている可能性が高いです。

これは、機能することが証明されている、私たちが数え切れないほど使用してきたデザインパターンです。訪問者は、長いテキストブロックを読むことなく、あなたのビジネスを特別なものにしているものを素早く見ることができます。

多くのWordPressユーザーのサイト改善を支援してきた経験から、これらのプロフェッショナルな機能ボックスの作成は面倒に思える可能性があることを私たちは知っています。

しかし、ほとんどの人が気づいていないのは、美しい特徴ボックスをサイトに追加するために、デザイナーや開発者である必要はないということです。

このガイドでは、WordPressでアイコン付きのフィーチャーボックスを作成する最も簡単な方法をご紹介します。

アイコン付きフィーチャーボックスを追加する理由

アイコン付きフィーチャーボックスは、重要な情報をスキャンしやすく、視覚的に魅力的にします。ほとんどの訪問者は、テキストが多いページではすべての単語を読むわけではなく、最も重要な情報を見つけるためにすばやくスキャンします。

機能ボックスは要点を強調し、多くの場合アイコンと組み合わせて使用されるため、ユーザーは製品やサービスを一目で理解できます。また、行動喚起ボタンを含めて、ユーザーが特定の機能についてさらに詳しく知るように促すこともできます。

WPForms が、その最大のセールスポイントを紹介するために機能ボックスをどのように使用しているかをご覧ください。

それでは、WordPressにアイコン付きのフィーチャーボックスを追加する方法を説明します。以下のクイックリンクを使用して、使用したい方法に直接ジャンプしてください。

方法1：WordPressブロックエディターを使用してアイコン付きフィーチャーボックスを追加する（無料の方法）

標準のコンテンツエディターとカラムブロックを使用して、WordPressサイトにアイコン付きの機能ボックスを追加できます。

ページビルダーを使用せずにシンプルなレイアウトを作成したい場合に最適なオプションです。

ステップ1：ページを開き、カラムブロックを追加する

開始するには、機能ボックスを追加したいページを開きます。次に、「+」ブロック追加アイコンをクリックします。

次に、検索ボックスに「カラム」と入力します。

適切なブロックが表示されたら、クリックしてページに追加します。

WordPress は、さまざまなカラムブロックをすべて表示するようになります。数字は、各カラムがブロック内で占めるスペースの量を示します。たとえば、「50/50」は、それぞれ利用可能な幅の 50% を占める 2 つのカラムを作成します。

例として、幅が等しい3つの列を提供する「33/33/33」の列ブロックを選択しますが、好きなレイアウトを使用できます。

ステップ2：カラムにアイコンを追加する

その後、列にアイコンを追加する準備が整います。

これを行う最も簡単な方法は、アイコンフォントを使用することです。これは、ウェブサイトの読み込み速度を低下させない、サイズ変更可能なシンボルです。無料アイコンのコレクションが最も多いFont Awesomeの使用をお勧めします。

WordPressテーマにアイコンフォントを追加したら、ショートコードを使用してカラムに簡単に表示できます。

「カラム」の「+」アイコンをクリックして「ショートコード」と入力します。正しいブロックが表示されたら、クリックしてレイアウトに追加します。

その後、次のショートコードを入力できますが、「bus」を使用したいアイコンの名前に置き換えることを忘れないでください。

[icon name="bus"]

利用可能なアイコンの完全なリストを確認するには、Font Awesomeのアイコンライブラリにアクセスしてください。

アイコンを見つけたら、それをクリックしてそのアイコンの名前を確認してください。

例えば、次の画像では、「address-book」という名前のアイコンを見ています。

この名前をショートコードに追加できるようになりました。

ショートコードの操作方法について詳しくは、WordPressにショートコードを追加する方法に関する初心者向けガイドをご覧ください。

WordPressメディアライブラリの画像を使用したい場合は、アイコンフォントの代わりに画像ブロックを追加できます。

これを行うには、最初の列の「+」をクリックし、ショートコードブロックの代わりに「画像」ブロックを追加します。

メディアライブラリから画像を選択するか、コンピューターから新しいファイルをアップロードできます。検索エンジンやスクリーンリーダーのためにアイコンを説明する適切な代替テキストを追加することを忘れないでください。

ステップ3：機能ボックスにテキストを追加する

すべてのアイコンを追加したら、次のステップはフィーチャーボックスにテキストを追加することです。

これを行うには、カラムブロック内の「+」ボタンをクリックします。次に、段落ブロックを追加します。

その後、段落ブロックにテキストを入力するだけです。

同じプロセスを繰り返すことで、他のカラムにアイコンやテキストを追加できます。

ステップ4：複数の行を作成する（オプション）

フィーチャーボックスを複数行にしたいですか？

列ブロックをクリックし、ツールバーの3つの点を選択するだけです。その後、「複製」を選択できます。

これにより、Columnsブロックのコピーが作成されます。

次に、上記と同じプロセスに従って、2番目の行にコンテンツを追加します。

ステップ5：機能ボックスを公開する

機能ボックスに満足したら、製品の画像やカテゴリとタグなど、他のコンテンツをページに追加できます。

機能ボックスをライブにするには、「更新」または「公開」ボタンをクリックするだけです。

これで、ウェブサイト、ブログ、またはオンラインストアにアクセスして、機能アイコンボックスが実際にどのように機能するかを確認できます。

これは、人々があなたのWordPressブログを訪れたときに見る例です。

方法2：ページビルダープラグインを使用してアイコン付きの機能ボックスを追加する（推奨）

シンプルなフィーチャーボックスを作成したい場合は、WordPressのブロックエディターが適しています。しかし、完全にカスタムデザインの高度なボックスを作成したい場合は、ページビルダープラグインが必要です。

SeedProdは、ドラッグアンドドロップエディターを使用してカスタムページを作成できる、市場で最高のWordPressページビルダーです。

素早く美しいページを作成するために使用できる300以上のプロフェッショナルにデザインされたテンプレートがあります。また、ワンクリックでフィーチャーボックスに追加できるアイコンのライブラリ全体もあります。

これは、SeedProdの既製のブロックとアイコンを使用して作成された機能ボックスの例です。

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

ステップ1：SeedProdのインストールと有効化

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

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

この情報は、SeedProdアカウントにログインすることで確認できます。

ステップ2：プロフェッショナルにデザインされたテンプレートを選択する

開始するには、SeedProd » ランディングページに移動し、「新しいランディングページを追加」をクリックします。

次の画面でテンプレートを選択できます。これらのテンプレートはすべてSeedProdのドラッグアンドドロップビルダーを使用してカスタマイズできますが、目標に合ったテンプレートを選択することをお勧めします。

SeedProdのすべてのテンプレートは、 近日公開 キャンペーンやリード獲得キャンペーンなど、さまざまなキャンペーンタイプに整理されています。SeedProdのテンプレートを使用して、404ページを改善することもできます。

このガイドでは「空白テンプレート」を使用しますが、好きなテンプレートを使用できます。

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

これにより、ページに名前を付けることができるポップアップが表示されます。SeedProdはページ名をURLに使用しますが、必要に応じてこのリンクを変更できます。たとえば、関連キーワードを含めることで、WordPressのSEOを改善することができます。

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

これで、SeedProd のドラッグ＆ドロップページエディターでテンプレートが開きます。

ステップ3：機能ボックスのレイアウトをデザインする

空白テンプレートを使用しているため、最初のステップはレイアウトの選択です。これを行うには、いずれかのカラムレイアウトをクリックするだけです。

その後、左側のメニューで「アイコン」ブロックを見つけます。

このブロックを最初の空の列にドラッグアンドドロップできるようになりました。

これにより、デフォルトのアイコンが選択された状態で、アイコンブロックがレイアウトに追加されます。

アイコンを変更するには、それをクリックしてから「画像を選択」ボタンを選択します。

これにより、数百のアイコンから選択できるアイコンライブラリが表示されます。検索バーを使用して特定のアイコンを探したり、リスト全体を閲覧したりできます。

使用したい画像を見つけたら、カーソルを合わせ、「+」ボタンをクリックしてページに追加するだけです。

アイコンをカスタマイズするには、クリックして選択してください。

左側のメニューの設定を使用して、このアイコンの配置、サイズ、色などを変更できるようになりました。

その他のオプションを表示するには、「詳細設定」タブをクリックします。

ここでは、間隔を変更したり、境界線を追加したり、CSSアニメーション効果を追加したりできます。

ステップ4：機能テキストを追加する

それが終わったら、アイコンの下に「テキスト」ブロックを追加してください。

左側のメニューにある「テキスト」ブロックを見つけて、ドラッグ＆ドロップでアイコンの下に配置するだけです。

テキストを追加するには、ブロックをクリックして選択します。その後、左側のメニューにある小さなテキストエディタに入力できます。

ここでは、リンクを追加したり、テキストの配置を変更したり、テキストの色を変更したりできます。

ステップ5：行を複製して公開する

他のカラムをカスタマイズするには、上記と同じ手順に従ってください。

アイコン付きの機能ボックスの別の行を追加したい場合は、セクションにマウスを重ねてから「行を複製」ボタンをクリックしてください。

セクションを好きなだけ複製することで、アイコン付きのフィーチャーボックスをすばやく作成できます。

上記と同じ手順で、新しいアイコンとテキストを追加できます。

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

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

アイコン付きフィーチャーボックスの追加に関するよくある質問

WordPressでアイコン付きの機能ボックスを追加することについて、読者からよく寄せられる質問をいくつかご紹介します。

WordPressにアイコンを挿入するにはどうすればよいですか？

アイコンを挿入する最も簡単な方法は、Font Awesomeのようなプラグインをインストールするか、SeedProdのようなページビルダーを使用することです。プラグインを使用したくない場合は、標準の画像ブロックを使用してSVGアイコンファイルを直接アップロードできます。

WordPressに記号を挿入するにはどうすればよいですか？

記号を挿入するには、特殊文字挿入
プラグインをインストールしてアクティブ化する必要があります。アクティブ化すると、ツールはWordPressブロックツールバーに「Ω」（オメガ）ボタンを追加します。

これを使用して特殊文字メニューにアクセスできます。詳細については、WordPressの投稿に特殊文字を追加する方法に関するチュートリアルを参照してください。

WordPressでプラグインなしでメニューアイコンを追加する方法は？

プラグインなしでメニューアイコンを追加するには、外観 » メニューページの右上にある「画面オプション」タブで「CSSクラス」を有効にします。次に、メニュー項目に特定のCSSクラスを追加し、カスタムCSSコードをカスタマイザーで使用してアイコンの背景画像を表示します。

WordPressでカスタムソーシャルアイコンを追加する方法は？

ソーシャルアイコンを追加するには、WordPressエディター内のネイティブ「ソーシャルアイコン」ブロックを使用するだけです。ブロック内の「+」ボタンをクリックしてFacebookやTwitterなどのネットワークを選択し、プロフィールのリンクを直接フィールドに貼り付けます。

WordPressメニューにソーシャルメディアアイコンを追加するにはどうすればよいですか？

ナビゲーションメニューにソーシャルアイコンを追加するには、メニュー画像のようなプラグインを使用してアイコンをメニュー項目に直接アップロードすることをお勧めします。または、「カスタムリンク」をメニューに追加し、フォントアイコンのHTMLコードをナビゲーションラベルフィールドに貼り付けます。

興味がある場合は、WordPressメニューにソーシャルメディアアイコンを追加する方法に関するガイドをご覧ください。

この記事がWordPressでアイコン付きのフィーチャーボックスを追加する方法を学ぶのに役立ったことを願っています。また、WordPressサイトの色をカスタマイズする方法や、モバイルフレンドリーなWordPressサイトを作成する方法に関するガイドも参照してください。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。