インフォボックスは、重要な情報を明確かつ魅力的に共有する必要があるウェブサイトにとって、今や一般的なツールです。基本的に、特定のプロモーションに注目を集めたい場合、重要な詳細や重要なお知らせに閲覧者の注意を向けさせたい場合、実りあるCTAにユーザーを誘導したい場合、インフォボックスはメッセージを目立たせるシンプルなソリューションを提供します。
インフォボックスは、重要な情報を読みやすい小さなセクションに分けるだけでなく、ユーザーのナビゲーションを誘導する重要な役割を果たします。インフォボックスを追加することで、訪問者を圧倒することなく、整理された、清潔で、親しみやすいフォーマットで、重要なポイントを案内することが容易になります。
さて、あなたがこの記事を読んでいるということは、すでにインフォボックスの概念に精通しているか、あるいは初めてインフォボックスについて知ったということだろう。しかし、あなたの頭の中にはまだ一つの疑問があるかもしれません。そこで、WordPressでインフォボックスを作成する方法の基本をステップバイステップで説明するガイドを用意しました。ここでは、最も適したオプションを選択するのに役立つ2つの異なるアプローチを提供します。さて、なぜ待つのでしょうか？さっそく見ていきましょう。
方法1：カラムブロックを利用する
Gutenbergエディターのカラムブロックは、プラグインの助けを借りずに情報ボックスを作成する簡単な方法です。基本的なコンテンツを構造化された形式で配置することができます。ここでは、この方法を使ってインフォボックスを設置する方法を紹介します：
ステップ1：エディターにカラムブロックを追加する
WordPressで新しい投稿またはページを作成し、Gutenbergエディタで開きます。カラムブロックを追加するには "+"アイコン を選択し 「コラム をブロックオプションから選択する。
では、その中から レイアウト 情報ボックスをどのように表示させるかによって、単一列または複数列を使用します。初心者の便宜を図るため、インフォメーション・ボックスの作成には1カラムを選択した。
ステップ2：コンテンツを追加するためにさまざまなブロックを追加する
次に、列ブロックにコンテンツを追加して、視覚的に明確な情報ボックスを作成します。その際 "+"アイコン をクリックして、お好みのブロックを追加してください。すると、Gutenbergのブロックライブラリが表示されます。例えば、情報ボックスの上部に画像を配置することから始めます。そこで 画像 ブロックを選択します。続けてメディアライブラリから画像をアップロードするか、デバイスからアップロードします。
画像をアップロードしたら alignment をカスタマイズしてください。 size その画像を左、中央、または右に揃えることができます。ここでは、画像を中央に配置していますが、サイズは同じです。
さて、画像を強調するために適切な見出しが必要です。見出しを追加するには 見出し ブロックを選択し、ツールバーを開き、そこから親ブロックを選択します。
親ブロックを選択すると + アイコン が表示される。そこで、＋アイコンを押して 見出し ブロックをクリックしてください。続けて見出しブロックにテキストを追加し、好きなように配置します。
それが終わったら、ブロックを追加する前の手順を繰り返します。ここでは パラグラフブロック そして ボタンブロック を次々に選ぶ。まず パラグラフブロック で、必要なテキストを追加する。それらのテキストを必要だと思われる方法で整列させる。
次の作業はボタンだ。ライブラリからボタンブロックを見つけ、ブロックを選択し、そのボタンに入れるテキストを追加する。
それが終わったら ボタンを揃える 好きなように、そして リンクの追加 をボタンに追加する。
ステップ3：ブロック全体をカスタマイズする
カスタマイズオプションにより、洗練された外観のために様々な面を調整することができます。あなたの カラムセクション全体 をクリックしてください。これで、カスタマイズを開始できます。 width カラムがページレイアウトにうまく収まるようにします。
次に スタイルタブ.ここから カラー テキスト、リンク、背景を変更することができます。 タイポグラフィー をカスタマイズし、ブロックの dimensions.
さらに下にスクロールすると、以下の設定があります。 ブロック間隔 そして 国境、そして影。
テキストと背景色を変更し、パディングを変更し、いくつかのボーダーと半径を導入しました。情報ボックスがパブリッシュされると、最終的な結果が得られます。
方法2：Tablebergプラグインを使用する
Tablebergプラグインは、主にテーブルを作成するために使用されますが、構造化された形式でインフォボックスをデザインするためにも活用できます。ここでは、Tablebergを使ってインフォボックスを作成する方法を紹介します：
ステップ1：Tablebergプラグインのインストールと有効化
WordPressのダッシュボードに移動し、次の場所に移動します。 プラグイン > 新規追加、 を検索する "テーブルバーグをクリックする。 Install Now.インストールが完了したら アクティベート をクリックしてプラグインを有効にしてください。
ステップ2：新規テーブルの作成
をクリックする。 + アイコン を検索してください。 テーブルバーグ プラグインをライブラリから探します。見つけたらクリックしてください。
次に、情報ボックスの列と行の数を選択する必要があります。ここでは、1列のボックスを作成します。 1行1列.
ステップ3：テーブルにコンテンツを追加する
最初の方法と同じように、情報ボックスに画像を追加することから始めます。情報ボックスの + アイコンを検索する。 イメージブロックをクリックし、投稿に追加します。次に、デバイスまたはメディアライブラリから画像をアップロードします。
この場合も、アライメントやサイズの調整が必要であれば、下の写真のように調整する。
次に、画像の後にテキストを配置する。 段落ブロック.記号をクリックし、段落ブロックを検索して追加する。アライメントの変更が必要であれば、変更してください。
最後の作業はボタンの追加です。ボタンを追加します。 親ブロックを見つける。 + アイコンを検索する。 ボタンそしてエディターに追加する。
これを完了したら テキストを追加する をチェックしてください。 整列 ボタンの リンクの追加 to it.
ステップ4：テーブルをカスタマイズする
コンテンツでTablebergボックスを設定したら、ボックス全体のカスタマイズとスタイル設定に進みます。しかし、ここで使用した個々のブロックをカスタマイズすることもできることを覚えておいてください。今のところ、テーブル全体にこだわっています。
をクリックします。 Tablebergアイコン でボックス全体を選択する。次に 設定タブ を調整する。 width あなたのページや投稿のレイアウトに合うようにボックスの
次に スタイルタブ ボックスをカスタマイズするの背景色、パディング、マージン、スペース。
さらに下にスクロールすると、以下のようなオプションがあります。 テーブル、内側とカラムのボーダー、グローバルフォントの色など。
これが完璧なインフォボックスを作る方法です。複数のインフォボックスが必要な場合は、列と行の数を変更し、同じ手順を実行するだけです。
結論
これで、Tablebergのインフォメーションボックスは完璧なスタイルになりました。ほんの少し手を加えるだけで、あなたのコンテンツは平凡なものから人目を引くものへと変化し、重要なところに注目を集めることができます。カスタマイズの可能性は無限大です。色を変えたり、縁取りで遊んだり、仕上げのタッチを加えたりして、どのボックスも視覚的に楽しめるようにしましょう。インフォメーションボックスは、情報を伝えるだけでなく、ウェブサイト全体に華やかさを添えてくれます。
