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

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

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

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

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

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

アイコン付きフィーチャーボックスとは？

ほとんどの人は、WordPressウェブサイトのすべての単語を読むわけではありません。特にページがテキスト中心の場合。

その代わりに、訪問者は探している情報を見つけるためにページをスキャンします。これは、スキャン可能で魅力的な方法で重要な情報を提示する必要があることを意味します。そのため、多くのウェブサイトでフィーチャーボックスが使用されています。

次の画像では、WPFormsがフィーチャーボックスを使用してプラグインの最大のセールスポイントを強調する方法を確認できます。

行動喚起ボタンを追加して、ユーザーが特定の機能についてさらに詳しく知れるようにすることもできます。

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

• 方法1：WordPressブロックエディターを使用してアイコン付きフィーチャーボックスを追加する（プラグイン不要）
• 方法2：ページビルダープラグインを使用してアイコン付きの機能ボックスを追加する（推奨）

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

標準のコンテンツエディターとカラムブロックを使用して、WordPressサイトにアイコン付きのフィーチャーボックスを追加できます。これは新しいWordPressプラグインをインストールする必要がないため、迅速かつ簡単な方法です。

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

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

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

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

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

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

これを行う最も簡単な方法は、リサイズ可能なシンボルであるアイコンフォントを使用することです。これにより、ウェブサイトが遅くなることはありません。アイコンのコレクションが最も多いものの一つであるFont Awesomeの使用をお勧めします。

WordPressテーマにアイコンフォントを追加したら、ショートコードを使用して列に表示するのは簡単です。

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

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

[icon name="bus"]

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

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

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

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

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

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

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

メディアライブラリから画像を選択するか、コンピューターから新しいファイルをアップロードできます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

プロがデザインしたテンプレートを選択する

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

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

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

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

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

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

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

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

特徴ボックスのデザイン

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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