Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

WordPressサイトに美しいアイコンのついた機能ボックスを追加したいですか?

フィーチャーボックスを使えば、製品やサービスの最大のセールスポイントを強調することができます。また、新規カスタマイザーがこの製品やサービスが自分に適しているかどうかを判断できるように、特徴を提示するのに最適な方法です。

この投稿では、WordPressサイトにアイコン付きの機能ボックスを追加する方法を紹介します。

How to add feature boxes with icons in WordPress (2 ways)

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

WordPressのサイトでは、ほとんどの人が個別ページの一字一句を読むことはありません。

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

次の画像では、WPFormsがどのようにフィーチャーボックスを使用してプラグインの最大のセールスポイントを強調しているかがわかります。

WPForms feature box icon example

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

それでは、WordPressでアイコンを使って機能ボックスを追加する方法をご紹介しましょう。以下のクイックリンクから、お好きな方法にジャンプしてください:

方法1:WordPressブロックエディター(プラグイン必須)を使ってアイコン付きフィーチャーボックスを追加する。

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

まずは、フィーチャーボックスを追加したいページを開いてください。次に、「+」ブロック追加アイコンをクリックします。

Add new block to WordPress

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

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

Add columns block

カラムブロックがすべて表示されます。数字は、各カラムがブロック内で占めるスペースです。例えば、’50/50’は、それぞれ利用可能な幅の50%を占める2つのカラムを作成します。

例として、「33/33/33」カラムブロックを選びますが、これは幅が等しい3カラムが得られるからです。

Select three part columns block

これでカラムにアイコンを追加する準備が整った。

これを行う最も簡単な方法は、リサイズ可能なシンボルであり、サイトの表示速度を低下させないアイコンフォントを使用することです。Font Awesomeを使用することをお勧めします。Font Awesomeは無料のアイコンのコレクションが最大級だからです。

WordPressテーマにアイコンフォントを追加したら、ショートコードを使ってカラムに表示させるのは簡単だ。

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

Select shortcode block

その後、以下のショートコードを入力しますが、’bus’を使用したいアイコンの名前に置き換えてください:

[icon name="バス"]]

利用可能なアイコンの全リストを見るには、Font Awesomeアイコンライブラリにアクセスするだけです。

The Font Awesome website

気に入ったアイコンが見つかったら、それをクリックするとアイコンの名前が表示されます。

例えば、次の画像では「アドレス帳」というアイコンを見ている。

An icon on the Font Awesome website

この名前をショートコードに追加することができます。

さらに詳しく知りたい方は、WordPressでショートコードを追加する方法の初心者ガイドをご覧ください。

Add new icon font name to shortcode block

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

これを行うには、最初のカラムの「+」をクリックし、ショートコード・ブロックの代わりに「Image」ブロックを追加するだけです。

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

Add new image block

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

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

Select paragraph block to add text

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

同じ作業を繰り返すことで、他のカラムにもアイコンやテキストを追加できる。

Customize remaining columns

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

カラムブロックをクリックし、ツールバーの3つの点を選択するだけです。そして「Duplicate」を選択します。

Click options and duplicate column

これでカラム・ブロックのコピーが作成される。

あとは、上記と同じ手順で2行目にコンテンツを追加するだけだ。

Final duplicate column example

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

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

Publish or update page to make live

あなたのサイト、ブログ、オンラインストアで、このアイコンボックスを実際にご覧いただけます。

以下は、WordPressブログを訪れた人々が目にするものの例です。

A featured block with icons created using the block editor

方法2:ページビルダープラグインを使ってアイコンのついたフィーチャーボックスを追加する(推奨)

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

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

SeedProdには、プロがデザインした300以上のテンプレートがあり、美しいページを素早く作成することができます。また、アイコンのライブラリも充実しており、個別クリックでフィーチャーボックスに追加できます。

SeedProdの既製のブロックとアイコンを使用して作成したフィーチャーボックスの例です。

SeedProd feature boxes with icons example

最初に行う必要があるのは、SeedProdプラグインをインストールして有効化することです。詳細については、WordPressプラグインのインストール方法についての初心者ガイドをご覧ください。

注: SeedProdには無料版もありますが、今回はより多くの機能があるPro版を使用します。もし、メールマーケティングを使用して商品を宣伝するのであれば、SeedProd Proは多くの最高のメールマーケティングサービスとも統合しています。

有効化した後、SeedProd ” Settingsに進み、ライセンスキーを入力してください。

Enter SeedProd license key

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

プロがデザインしたテンプレートを選ぶ

開始するには、SeedProd ” ランディングページに行き、「新規ランディングページを追加」をクリックします。

SeedProd's page design templates

次の画面では、テンプレートを選択することができます。SeedProdのドラッグアンドドロップビルダーを使えば、これらのテンプレートをすべてカスタマイズすることができますが、やはりあなたの目標に一致するテンプレートを選ぶのが良いでしょう。

SeedProdのテンプレートはすべて、近日公開キャンペーンやリードスクイーズキャンペーンなど、さまざまなキャンペーンタイプに分類されています。SeedProdのテンプレートを使って404ページを改善することもできます。

このガイドでは「ブランク・テンプレート」を使用しますが、お好きなテンプレートをお使いください。

テンプレートを選択するには、マウスオーバーして「チェックマーク」アイコンをクリックするだけです。

Select new SeedProd template

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

その後、’Save and Start Editing the Page’ボタンをクリックします。

Name SeedProd page

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

フィーチャー・ボックスをデザインする

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

Select three column layout

その後、左側のメニューから「Icon」ブロックを見つける。

このブロックを最初の空のカラムにドラッグ・アンド・ドロップすることができる。

Add an icon block

これはアイコンブロックをレイアウトに追加するもので、初期設定のアイコンがすでに選択されています。

アイコンを変更するには、アイコンをクリックし、「Choose Image」ボタンを選択します。

Click icon block twice

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

使いたい画像を見つけたら、マウスオーバーして「+」ボタンをクリックするだけで、ページに追加できます。

Choose icon from icon library

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

このアイコンは、左側のメニューにある設定を使って、配置やサイズ、色などを調整することができます。

Change icon settings

より多くのオプションを見るには、先に進み、’Advanced’タブをクリックします。

ここでは、スペーシングを変更したり、枠線を追加したり、CSSアニメーション効果を追加することもできる。

Adding animations to a feature box using SeedProd

そうしたら、アイコンの下に「テキスト」ブロックを追加する。

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

Add new text block

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

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

Click to edit text block

その他のカラムをカスタマイズするには、上記と同じ手順を踏むだけです。

アイコンのあるフィーチャーボックスをもう一列追加したい場合は、セクションにマウスオーバーして「Duplicate Row」ボタンをクリックします。

このセクションは何度でも複製でき、アイコンの付いた機能ボックスを素早く作成できます。

Duplicate icon and text row

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

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

ページの見た目に満足したら、「保存」ボタンをクリックしてください。その後、’公開する’を選択すると、そのページを公開することができます。

Save and publish page

この投稿が、WordPress でアイコン付きの機能ボックスを追加する方法を学ぶのにお役に立てば幸いです。また、メールマガジンの作成方法に関するガイドと、専門家による中小企業に最適なライブチャットソフトウェアのピックアップもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

18件のコメント返信を残す

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. micahel

    Really nice article and it help solve my problem. But here is my question.

    -How to you create the beautiful sidebars in see in this post such as how to start a blog, website blueprint, I need help with …, useful wordpress guides, Deals & Coupons

    -I really need help with creating this sidebars since am reading how to create a blog

  3. Ashutosh Panda

    It was an awesome article..
    Helped me a lot

  4. Rob

    Hey. My icons won’t centre in the column itself. Is there a parameter we can add to ensure it centres? 2 of my icons centre fine, but 2 will only align left, even if I align it to center using formatting in the WordPress formatting editor (using a plugin).
    Thanks.

  5. Hassan NAITALI

    Great article, i love it,

    so, i have one question, can i make changes to these icons and set them bigger by making change in the parent theme graphicaly and without touching css code ?
    Thank you !!

  6. Chris

    I tried everything that was said in the tutorial but instead of it being set into columns, everything is set under one column. While the icon are set beside the words. I wanted to create three columns and everything in under one another in one column. Why is that that?

  7. Roshni

    Thank you. So useful!

  8. Paul

    Do you have a tutorial on how to do this with css, html and php without having to use a plugin? I’ve looked around but cannot seem to find anything.

  9. john

    How do I get the icon to center over the content?

  10. Evan herman

    For anyone using WP SVG Icons that isn’t comfortable writing CSS, you can actually adjust the icon size by passing in a size=”#px” parameter to the wp-svg-icons short code.

    Example:
    [wp-svg-icons icon=”rocket” wrap=”span” size=”100px”]

    That will set the icon to 100px and avoid the step of writing custom CSS. You may still need to adjust the padding.

    • Andre Page

      That was very helpful Evan, thank you!!

    • Roshni

      Thanks, Evan. That worked.

  11. Bobby

    Good article about an important feature for your site. However, the plugin recommended has not been updated for 2 years. I am relatively new to WordPress and I was told to steer from plugins that have not been updated in the past year. I am guessing that it depends since you are very knowledgeable about WordPress and highlighted the plugin in this article. Let me know your thoughts.

    • WPBeginner Support

      Bobby, the plugin works fine we tested it. We have also reached out to plugin author so that they can update the plugin.

      Ideally you should install plugins that are recently updated. However, there are plenty of WordPress plugins that don’t need updates. Plugin authors feel that since a plugin is not broken and works great, then there is no need for them to update it.

      管理者

      • Bobby

        Ok, that’s good to know. Thanks again.

  12. arun

    Great post, i am also running wordpress blog. i will apply these icons on my blog thanks for sharing.

  13. Hemang Rindani

    Nice article. WordPress is a great enterprise content management solution that can cater to any complex business requirements and develop powerful websites. It contains thousands of flexible, customizable and responsive themes, modules and plugins that can be utilized to design multiple websites effortlessly. Increasing competition demands an interactive and engaging website and thus it is important to include variety of tools that encourage visitors to stay more on a page. Plugins in WordPress adds value to the web page specially by making it more interesting. Utilizing right tools like Call to action buttons and social media login and sharing buttons with on page content helps to enhance user experience. Article rightly highlighted the point that selecting a right tool and utilizing its powers allows a CMS developer to have better control over the website.

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。