ほとんどの訪問者は、読むかどうかを決定する前にページをスキャンします。主要なメリットが長文のテキストの中に埋もれていると、多くの人がそれを見ずに離脱してしまう可能性があります。
フィーチャーボックスは、各メリットを小さなアイコンと短い説明とペアにすることでこれを解決し、訪問者が提供するものを一目で理解できるようにします。各ボックスにコールトゥアクションボタンを追加して、読者を詳細に誘導することもできます。
このガイドでは、WordPressで組み込みのブロックエディターまたはページビルダープラグインを使用して、アイコン付きフィーチャーボックスを追加する方法を説明します。
フィーチャーボックスを追加するには、どちらの方法を使用すべきですか？
既存のページまたは投稿に1つまたは2つのフィーチャーセクションを追加する場合は、ブロックエディターメソッドを使用してください。これは無料で、WordPress 7.0以降に組み込まれており、別のプラグインを必要としません。
ゼロから完全なランディングページをデザインする場合は、ページビルダーの方が適しています。すぐに使えるテンプレートと、各アイコンのより多くのスタイリングオプションが得られます。
以下のクイックリンクを使用して、使用したい方法に直接ジャンプできます：
方法1：ブロックエディターを使用してアイコン付きのフィーチャーボックスを追加する（無料）
WordPressのブロックエディターは、段落、画像、ボタンなどの個々のコンテンツピースであるブロックからページを構築します。
WordPress 7.0では、プラグインなしでSVGアイコンを挿入できる組み込みのアイコンブロックが追加されました。SVGはコードから作られた画像形式なので、アイコンはどのサイズでもシャープに表示され、すばやく読み込まれます。
WordPressの古いバージョンを使用している場合、エディターにアイコンブロックが見つかりません。この方法を試す前に、WordPressを更新する必要があります。
ステップ1：カラムブロックを追加する
まず、カラムブロックを追加します。最初に、フィーチャーボックスを追加したいページを開きます。次に、+追加ブロックアイコンをクリックし、カラムを検索して、カラムブロックをクリックして追加します。
WordPressにはいくつかのカラムレイアウトが表示されます。数字は各カラムが占める幅を示します。たとえば、50 / 50は等しい幅の2つのカラムを作成します。
ここでは、3つの等しいカラムを作成するために33 / 33 / 33を選択しますが、コンテンツに適したレイアウトを選択できます。
ステップ2：フィーチャーボックスにアイコンを追加する
次に、カラム内の+ボタンをクリックしてアイコンを検索します。アイコンブロックが表示されたら、クリックして追加します。
WordPressは自動的にインフォアイコンをカラムに追加します。「置き換え」ボタンをクリックして、別のアイコンを選択します。
これにより、アイコンライブラリが開きます。検索バーに写真やストアなどの名前を入力するか、利用可能なアイコンをスクロールできます。
目的のアイコンを見つけたら、クリックしてカラムに追加します。
次に、ブロック設定を使用してアイコンをカスタマイズできます。テーマとセットアップに応じて、アイコンの色、背景色、寸法、境界線を変更できます。ツールバーを使用してアイコンを中央揃えすることもできます。
ステップ3：フィーチャーボックスにテキストを追加する
アイコンが配置されたら、最初のカラムのアイコンの下にある+ボタンをクリックし、フィーチャー名のために見出しブロックを追加します。
次に、その下に段落ブロックを追加し、機能の簡単な説明を入力します。通常、1〜2文で十分です。
他の列についても同じ手順を繰り返します。
ステップ4：フィーチャーボックスの行をさらに作成する（オプション）
複数の機能ボックスの行を追加したい場合は、列ブロックを選択し、ツールバーの3点メニューをクリックします。次に、「複製」を選択します。
これにより、行全体がコピーされます。その後、上記と同じ手順でアイコンとテキストを新しいコンテンツに置き換えることができます。
ステップ5：アイコン付きフィーチャーボックスを公開する
機能ボックスに満足したら、「保存」または「公開」ボタンをクリックして公開します。
その後、ウェブサイトにアクセスして、機能ボックスが動作していることを確認できます。
方法2：ページビルダーを使用してアイコン付きのフィーチャーボックスを追加する
ブロックエディターは、既存のページに機能セクションを追加したい場合にうまく機能します。しかし、ランディングページ全体をデザインしていて、レイアウトとスタイリングをより細かく制御したい場合は、ドラッグアンドドロップのページビルダーの方が柔軟性があります。
この方法ではSeedProdを使用します。なぜなら、私たちは自身のサイトでそれを使用しているからです。Elementorのようなほとんどのドラッグアンドドロップページビルダーは、アイコンボックス要素と組み込みのアイコンライブラリを提供しています。詳細については、SeedProdレビューをご覧ください。
ステップ1：ページビルダーをインストールしてセットアップする
まず、SeedProdプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するガイドをご覧ください。
注意：プラグインには無料版がありますが、アイコンボックスブロックとアイコンライブラリはライセンスプランでのみ利用できるため、有料版を使用します。
プラグインを有効化したら、SeedProd » 設定に移動し、ライセンスキーを入力します。SeedProdアカウントにログインすることで、キーを見つけることができます。
ステップ 2: ランディングページテンプレートを選択する
次に、SeedProd » ランディングページに移動し、「+ 新しいランディングページを追加」をクリックします。
次に、ページの名前を入力します。SeedProdはこの名前を使用してページURLも作成しますが、必要に応じてURLを編集できます。
次の画面で、テンプレートを選択します。各テンプレートはドラッグアンドドロップでカスタマイズできますが、目標に合ったものを選択すると時間を節約できます。
このガイドでは、空白テンプレートを使用します。それをホバーし、チェックマークアイコンをクリックして選択します。
次に、「保存してページの編集を開始」をクリックします。
ステップ3：アイコン付きフィーチャーボックスを作成する
空白テンプレートから始めるので、最初のステップはレイアウトを選択することです。ここでは、機能ボックスの上にヘッダー領域をデザインするために、単一列レイアウトを選択しましょう。
次に、左側のメニューから見出しブロックをページにドラッグします。ブロックを選択してテキストを編集し、左側のパネルのオプションを使用して書式設定を調整します。
テキストブロックでも同様の手順を繰り返します。
背景画像を追加したり、書式設定を変更したりしてヘッダーをカスタマイズすることもできます。その他のオプションについては、「高度」タブをクリックして、間隔の調整、境界線の追加、アニメーション効果の追加などを行います。
ヘッダーの作業が終わったら、機能ボックスを作成できます。左側のパネルから列ブロックをエディターにドラッグし、ヘッダー領域のすぐ下に配置します。
その後、レイアウトを選択できます。この例では、3つの均等な列のオプションを使用します。
次に、左側のメニューからアイコンボックスブロックを見つけて、最初の列にドラッグします。
このブロックには、カスタマイズ可能なデフォルトのアイコン、見出し、サンプルテキストが含まれています。
アイコンを変更するには、左側のパネルにある「アイコン/画像」セクションを見つけます。次に、現在のアイコンにカーソルを合わせ、置き換えボタンをクリックします。
これにより、アイコンライブラリが開きます。特定のアイコンを検索したり、利用可能なオプションを閲覧したりできます。気に入ったアイコンを見つけたら、クリックして機能ボックスに追加します。
アイコンを選択したら、クリックして左側のメニューで設定を開きます。ここで、配置、サイズ、色を変更できます。
ステップ4：フィーチャーボックスの内容をカスタマイズする
次に、左側のメニューで設定を開くために、アイコンボックス内のテキストを選択します。
サンプル見出しと説明を独自の機能テキストに置き換えることができます。リンクを追加したり、テキストの配置や色を変更したりすることもできます。
他の列についてもこれらの手順を繰り返し、それぞれに異なるアイコンと機能テキストを追加します。
ステップ5：ランディングページを公開する
機能ボックスの別の行を追加したい場合は、セクションにカーソルを合わせて「行を複製」ボタンをクリックします。次に、アイコンとテキストを新しいコンテンツに置き換えます。
画像、行動喚起ボタン、その他のブロックを追加して、ランディングページの残りの部分をカスタマイズすることもできます。プロセスは同様です。目的のブロックをエディターにドラッグし、左側のパネルからカスタマイズします。
ランディングページに満足したら、「保存」ボタンをクリックし、「公開」を選択して公開します。これで、ランディングページが機能しているのを確認できます。
アイコン付きフィーチャーボックスに関するFAQ
WordPressでアイコン付きの機能ボックスを追加することに関するよくある質問をいくつかご紹介します。
WordPressでアイコンを追加するにはどうすればよいですか？
WordPress 7.0以降を使用している場合は、組み込みのアイコンブロックを使用できます。これにより、WordPressアイコンライブラリを名前で検索できます。Font Awesomeのようなより大きなアイコンセットの場合は、プラグインまたは独自のアイコンライブラリを持つページビルダーが必要です。
WordPressにカスタムアイコンを追加するにはどうすればよいですか？
アイコンブロックにはWordPressライブラリのアイコンのみが表示されるため、それを通じて独自のアイコンをアップロードすることはできません。代わりに、画像ブロックを使用してアイコンをPNGファイルとしてアップロードできます。
この記事がWordPressでアイコン付きのフィーチャーボックスを追加する方法を学ぶのに役立ったことを願っています。また、WordPressサイトの色をカスタマイズする方法や、モバイルフレンドリーなWordPressサイトを作成する方法に関するガイドも参照してください。
この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。
マイケル
とても良い記事で、私の問題を解決するのに役立ちました。しかし、私の質問は次のとおりです。
- この投稿で見られる美しいサイドバーをどのように作成しますか？ブログの開始方法、ウェブサイトのブループリント、ヘルプが必要なこと、役立つWordPressガイド、セール＆クーポンなど。
-ブログの作成方法を読んでいるので、これらのサイドバーの作成について本当に助けが必要です
アシュトシュ・パンダ
素晴らしい記事でした。
大変参考になりました
ロブ
こんにちは。アイコンが列自体の中央に配置されません。中央に配置するために追加できるパラメータはありますか？アイコンのうち2つは中央に配置されますが、2つはWordPressのフォーマットエディタ（プラグインを使用）で中央揃えにしても、左揃えにしかなりません。
ありがとうございます。
ハッサン・ナイタリ
素晴らしい記事です、気に入りました。
それで、質問が一つあります。親テーマのグラフィックで変更を加えて、CSSコードに触れることなく、これらのアイコンを変更して大きくすることはできますか？
ありがとうございます！!
WPBeginnerサポート
ハッサン様
CSS はまだ必要になります。
管理者
クリス
チュートリアルに記載されていることはすべて試しましたが、列に設定される代わりに、すべてが1つの列の下に設定されています。アイコンは単語の横に設定されています。3つの列を作成したかったのですが、すべてが1つの列に積み重なっていました。なぜですか？
Roshni
ありがとうございます。とても参考になります！
ポール
プラグインを使用せずに、CSS、HTML、PHPでこれを行う方法のチュートリアルはありますか？いくつか探しましたが、何も見つからないようです。
ジョン
コンテンツの上にアイコンを中央揃えするにはどうすればよいですか？
エヴァン・ハーマン
WP SVG Icons を使用していて、CSS の記述に慣れていない方は、wp-svg-icons ショートコードに size=”#px” パラメータを渡すことで、アイコンサイズを調整できます。
例:
[wp-svg-icons icon=”ロケット” wrap=”span” size=”100px”]
これにより、アイコンが100pxに設定され、カスタムCSSを記述する手間が省けます。パディングの調整が必要になる場合があります。
アンドレ・ページ
エヴァン、とても参考になりました。ありがとうございます！！
Roshni
ありがとう、エヴァン。うまくいきました。
ボビー
あなたのサイトにとって重要な機能に関する良い記事です。しかし、推奨されているプラグインは2年間更新されていません。私はWordPressに比較的慣れていないのですが、過去1年間更新されていないプラグインからは手を引くように言われました。この記事でプラグインを取り上げているあなたはWordPressに非常に詳しいので、状況によるのでしょうね。ご意見をお聞かせください。
WPBeginnerサポート
Bobby、プラグインは正常に動作することを確認しました。プラグインの作者にも連絡を取り、プラグインを更新できるようにしました。
理想的には、最近更新されたプラグインをインストールする必要があります。ただし、更新を必要としない WordPress プラグインはたくさんあります。プラグインの作成者は、プラグインが壊れておらず、うまく機能しているため、更新する必要はないと考えています。
管理者
ボビー
なるほど、それは良い情報ですね。改めてありがとうございます。
arun
素晴らしい投稿です。私もWordPressブログを運営しています。これらのアイコンを私のブログに適用します。共有してくれてありがとう。
ヘマング・リンダニ
素晴らしい記事です。WordPressは、あらゆる複雑なビジネス要件に対応し、強力なウェブサイトを開発できる優れたエンタープライズコンテンツ管理ソリューションです。何千もの柔軟でカスタマイズ可能、レスポンシブなテーマ、モジュール、プラグインが含まれており、複数のウェブサイトを簡単にデザインできます。競争の激化は、インタラクティブで魅力的なウェブサイトを求めており、そのため、訪問者がページに長く滞在することを奨励するさまざまなツールを含めることが重要です。WordPressのプラグインは、特にページをより面白くすることで、ウェブページに価値を加えます。コールトゥアクションボタンやソーシャルメディアログイン、共有ボタンなどの適切なツールをオンページコンテンツとともに活用することは、ユーザーエクスペリエンスを向上させるのに役立ちます。この記事は、適切なツールを選択し、その力を活用することで、CMS開発者がウェブサイトをより細かく制御できるという点を正しく強調しています。