WordPressでテーブルに画像の背景を追加する方法(3つの簡単なステップ)

WordPressでテーブルに画像の背景を追加する方法」という質問に対する答えを探しているなら、直接的な答えは見つからないだろう。また、直接追加するオプションもありません。

しかし、あなたが十分に創造的であれば、WordPressに提供されている他のコアブロックの助けを借りて、簡単にそれを行うことができます。今日は、3つのステップでWordPressのテーブルに背景画像を追加する方法を紹介しよう。

WordPressでテーブルに背景画像を追加したい理由

WordPressでテーブルに背景画像を追加すると、デザインの目的や表示するコンテンツに応じて、いくつかの目的を果たすことができます。

以下は、それを検討する一般的な理由である:

  • ビジュアル・アピールの強化:背景画像は、無地の表をより魅力的で視覚的にアピールすることができます。特に、テーブルがランディングページや視覚的にリッチな投稿の一部である場合は、創造性のレイヤーを追加し、コンテンツを目立たせることができます。
  • ブランドの一貫性:あなたのウェブサイトが特定のデザインテーマやブランディング(色、パターン、イメージ)に従っている場合、テーブル内の背景画像は一貫性を維持するのに役立ちます。
  • クリエイティブ・プレゼンテーション:背景画像は、イベント・タイムライン、製品カタログ、ポートフォリオ・ショーケースなど、クリエイティブなコンテンツや非技術的なコンテンツを表示するテーブルに便利です。テーブルを純粋に機能的なものから、不可欠なデザインの一部へと昇華させることができます。

さて、メインパートに向かおう。

WordPressでテーブルに画像背景を追加する方法

今日のチュートリアルでは、Tablebergを使用します。もしご存じなければ TablebergはGutenberg専用のテーブルプラグインです。 Gutenbergの中で美しくレスポンシブなテーブルを作ることができます。

を追加することができる。画像、星の評価、ボタン、リボン、カスタムHTML、テキスト、スタイル付きリスト、 など、Gutenbergブロックエディタ内で機能的で踊るようなテーブルを作ることができます。さらに、セルの結合と分割、セルの高さと幅の定義、スティッキーヘッダーなどの高度な機能を備えている。繰り返しますが、テーブルテンプレートを使えば、すぐに始めることができます。

美しいテーブルを作る
ブロックエディター付き

ステップ1:まずグループを作る

TablebergとCore tableのWordPressブロックでは、画像の背景を追加することができません。 グループ・ブロック そして カバーブロック.

テーブルを作成する前に、まずグループを作成する。

投稿に向かい、まずグループブロックを挿入します。グループブロックを挿入するには "+「アイコン (ブロックアイコンを追加) エディタ内 (1) と入力してください。グループ「検索ボックス内の (2).クリック 「グループ エディタに挿入する(3).

ここで、最初のレイアウトを選択する。

を打つ。 ブロック追加ボタン グループ・ブロック内 (1). Type 「カバー 検索ボックス内 (2) そして 選ぶ その カバーブロック (3).

画像をアップロードするオプションを選択します。

画像を挿入したら、カバーブロック内のタイトルブロックを削除します。

ステップ 2: テーブルの作成

今すぐだ、 Coverブロック内にテーブルを作成する.をクリックします。 "+「アイコン (ブロックアイコンを追加) エディタ内 (1) と入力してください。テーブルバーグ「検索ボックス内の (2).をクリックします。 「Tableberg エディタに挿入する(3).

Tablbergのテーブル・テンプレートを挿入します。 (1) すぐに始めて、それに応じてデータを変更する。

では、テンプレート・ライブラリーから選んでみよう。

以下はその様子である。

ステップ3:カバーブロックをカスタマイズする

次に、誰でも簡単にテーブルのデータを理解できるように、カバー画像をカスタマイズする必要があります。表紙画像を選択する。 テーブルの外側をクリックするだけで、ブロックをカバーできる。 に移動する。 設定 (1) > ブロック (2) > スタイル (3).

を変更する。 オーバーレイの不透明度 ニーズに合わせて (1).

マージンとパディングを"なし(1).marginとpaddingがnoneに設定されているのがわかるが、もう一度自分で設定する必要がある。そうしないと、その画像はテーブルの外に残ってしまう。(N.B. 以下の場合は任意である。 前のステップに問題がなければ)

テーブルの背景のデモは以下の通り。


最終的な感想

WordPressでテーブルに背景画像を追加することは、単に美観のためだけではありません。

この記事がお役に立てたなら幸いです。さあ、テーブルの背景を追加して、ウェブサイトのデザインに合わせましょう。

下のコメント欄で感想を聞かせてください。また、チュートリアルに関する質問も遠慮なくどうぞ。喜んでお手伝いさせていただきます。この記事が役に立ったら、ソーシャルメディアを通じてお友達とシェアしてください。

続きを読む



テーブルバーグ・チーム