WordPressでコンテンツボックスを作成する方法

コンテンツボックスは、特定のコンテンツを枠で囲むことで、視覚的に際立たせることができるコンテナです。重要な特集情報や特別なお知らせを強調することができ、ユーザーの注意を重要な詳細に向けさせることができます。

コンテンツボックスは、コールトゥアクションのセクション、体験談、レビュー、製品やサービスの主な特徴を紹介するのに適しています。WordPressのウェブサイトでコンテンツボックスを作成するには、いくつかの方法があります。

次の記事では、WordPressでコンテンツボックスを作成する3つの便利な方法をご紹介します。最後までお付き合いください。

方法1：列ブロックを使う

WordPressのデフォルトのカラムブロックを使って、基本レベルのコンテンツボックスを作成し、デザインすることができます。以下の手順に従ってください。

ステップ01：エディターに列ブロックを追加する

を探す 列ブロック を押すことで、Gutenbergブロックライブラリからダウンロードできます。 プラス（＋）ボタン をエディターに追加する。

利用可能なオプションから1セルの列を選択する。

ステップ02：カラムにコンテンツブロックを追加する

カラム・ブロックは、その中に他のブロックを追加することができます。コンテンツをキュレーションするために好きなブロックを追加することができます。

をクリックする。 プラス（＋）アイコン をクリックします。Gutenbergのブロックライブラリが開きますので、そこから パラグラフブロック.

すでにカラム・ブロックにテキスト・コンテンツが追加されていることがわかる。この後、好きなようにカラムにブロックを追加することができます。例えば、画像ブロックを追加してみましょう。

をクリックする。 列アイコン ツールバーのを押す。 プラス（＋）アイコン.を見つけて選択する。 イメージブロック 図書館から。

カラム・ブロックに画像が追加されているのがわかるだろう。

ステップ03：列ブロック全体のカスタマイズ

列セクション全体を選択 をクリックしてください。をクリックする。 設定タブ.を調整することができます。 幅 それぞれのオプションから列の

次に スタイルタブ.テキストの色、背景色、タイポグラフィ、ブロックの寸法を変更するオプションが表示されます。

セクションを下にスクロールすると、さらに以下のオプションが表示されます。 ブロック間隔 そして ボーダー を列ブロックに追加する。

方法2：TableBergプラグインを使う

TableBergは、WordPressのデフォルトのテーブル作成ソリューションをパワーアップできる強力なテーブル作成プラグインです。このプラグインを使えば、魅力的なコンテンツボックスを作ることもできる。その方法を見てみよう。

ステップ01: TableBergプラグインのインストールと有効化

上記の方法と同様に プラグイン > 新規プラグインの追加.を見つける。 TableBergプラグイン 検索ボックスにその名前を入力してください。 インストール そして アクティブ化 それだ。

ステップ02：エディターにTableBergブロックを追加する

プラグインにはTableBergというブロックが付属しています。エディタに追加してください。

テーブルを作ることを考えれば、デフォルトのテーブル・ブロックのように、ここで行数と列数を定義することができる。

しかし、コンテンツボックスを作成するので、行1と列0を選択する。レイアウトが即座に作成されたことがわかります。

ステップ03：TableBergボックスにコンテンツを追加する

TableBergでは、コンテンツブロックを追加することで、行や列にさまざまな種類のコンテンツを追加することができます。

ボックスの上にカーソルを置くと、右下にブロックオプションが表示されます。

ボックスに追加したいブロックを1つずつ選択し、希望のコンテンツをキュレーションします。まず、画像ブロックを追加します。

次に、商品についての説明文を追加しているのがわかります。ここでは 段落ブロック そのためだ。

最後に、CTAボタンを追加しました。

ステップ04：TableBergボックスをカスタマイズする

TableBerg ボックスに追加した各ブロックを個別にカスタマイズできます。その後、TableBerg ボックス全体をカスタマイズしてスタイル設定できます。

チュートリアルが長くなるので、個々のブロックのカスタマイズ方法は紹介していません。チュートリアルが長くなってしまうので、個々のブロックのカスタマイズ方法は紹介していません。

ツールバーのTableBergアイコンをクリックしてボックス全体を選択する。

設定タブで、ボックスの幅を設定できます。

より スタイルタブボックスの背景色、パディング、マージン、スペースをカスタマイズできます。

このように、TableBergプラグインでコンテキストボックスを作成することができます。

方法3：Ultimate Blocksプラグインを使う

Ultimate Blocksは、Gutenbergエディタをパワーアップさせる25以上のカスタムブロックを備えた有望なコンテンツマーケティングプラグインです。あなたのサイトにさらに見栄えの良いコンテンツボックスを作成できる、魅力的なブロックをいくつか備えています。

ステップ01: Ultimate Blocksプラグインをインストールして有効化する

こちらへ プラグイン > 新規プラグインの追加.を見つける。 Ultimate Blocks プラグイン 検索ボックスにその名前を入力してください。 インストール そして アクティブ化 プラグインが下に表示されたら

ステップ02: Gutenbergエディタにプラグインのスタイル付きボックスブロックを追加する

Ultimate Blocksプラグインには、以下の名前の専用ブロックが含まれています。 スタイリング・ボックス を使ってコンテンツボックスを作成します。それを見つけてエディタに追加します。

このブロックには4種類のボックスがあります。お好きなものを選んでメッセージを表示してください。それぞれユニークな機能を備えています。

チュートリアルでは フィーチャーボックス.

フィーチャー・ボックスでは、画像、タイトル、説明を追加できる。あなたがそれらを自分でできることを願っています。

ステップ03：ブロックにコンテンツを追加する

デフォルトでは、このブロックは1つの商品を表示し、その特徴を説明することができます。しかし、このブロックで複数の商品を追加して表示することができます。 カラムタイプを選択 表示したい商品の数を定義します。

のオプションにコンテンツを追加します。 スタイルド・ボックス・ブロック.

ブロックにコンテンツが追加されているのがわかるだろう。

ステップ 04: スタイルボックス・ブロックのカスタマイズとスタイライズ

に来てほしい。 設定タブ.より モードオプションを選択Featureボックスは、通知ボックス、ボーダーボックス、ナンバーボックスなど、上記のような他のスタイルのボックスに変更することができます。

その後 レスポンシブ・コントロール・オプション特定のデバイスタイプからブロックを非表示にすることができます。

次に スタイルタブ.を変更することができます。 パディング そして マージン このタブからブロックの

このように、Ultimate Blocksプラグインを使ってコンテンツボックスを作成することができます。

フィニッシング・ノート

Ultimate BlocksとTableBergは、Gutenbergシステムに革命を起こし、ユーザーが簡単に洗練されたコンテンツを作成できるようにすることを目的とした2つの多機能プラグインです。

TableBergはまだ開発途中であり、近々多くの先進的な機能を追加する予定である。一方、Ultimate Blocksはすでに世界中の60K以上のウェブサイトで使用されている人気のプラグインです。

もし何かご質問があれば、いつでもコメント欄からお気軽にご質問ください。