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

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

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

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

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

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

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

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

カラムブロックをエディターに追加する

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

単一セルの列レイアウトを選択する

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

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

カラムにコンテンツ・ブロックを追加する

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

段落ブロックを列ブロックに追加する

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

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

画像ブロックを列ブロックに追加する

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

カラム・ブロックに画像を追加

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

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

列ブロック全体のカスタマイズ

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

カラムブロックをスタイライズする

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

列ブロックにブロック間隔とボーダーを追加する

方法2:Ultimate Blocksプラグインを使う

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

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

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

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

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

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

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

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

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

スタイリングボックス

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

フィーチャーボックスに追加できるもの

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

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

カラムタイプを選択

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

スタイル付きボックス・ブロックにコンテンツを追加する

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

スタイル付きボックス・ブロックに追加されたコンテンツ

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

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

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

スタイルボックス・ブロックをカスタマイズする

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

スタイルボックス・ブロックをスタイライズする

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

方法3:TableBergプラグインを使う

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

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

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

TableBergプラグインをインストールして有効化する

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

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

TableBergブロックを見つけて、Gutenbergエディタに追加します。

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

テーブルの列と行を定義する

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

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

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

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

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

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

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

画像ブロックを追加する

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

ブロックに段落を追加

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

TableBergボックスにCTAボタンを追加する

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

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

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

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

テーブルベルグ・ボックスの設定をカスタマイズする

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

テーブル幅のカスタマイズ

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

コンテンツボックスをカスタマイズする

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

フィニッシング・ノート

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

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

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



テーブルバーグ・チーム

早割キャンペーン実施中
これは通知バーのデフォルトテキストです。