How to Change Table Background Color in WordPress

デフォルトでは、WordPressのテーブルは透明な背景で作成されます。しかし、あなたのウェブサイトのデザインやスタイル化のニーズに応じてテーブルの背景を変更したい場合があります。

これは、まとまりのあるビジュアル・アイデンティティを作成し、読みやすさやユーザー体験を向上させるのに役立ちます。この記事では、WordPressで背景色を変更する2つの簡単な方法を説明します。

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

方法1:デフォルトのテーブルブロックを使う

Below, you can see a dummy table created with the default WordPress table block. Click the Table icon on the toolbar to select the entire table block.

Select the table created by the default WordPress table block

Come to the Styles tab on the right sidebar. Click the Background option under the Color section. A color box will open up. You may select a Solid or Gradient color.  

Once you select a color, you’ll see it’s applied to the background of the table in real-time.

Change the background color of the default WordPress table

方法2:Tablebergプラグインを使用する

テーブルバーグ はWordPress用の有望なテーブルビルダー・プラグインである。様々な種類の情報をテーブルに追加することができ、多目的な用途に使用することができます。

デフォルトのTableブロックとは異なり、Tablebergブロックではヘッダー、フッター、行の背景色を変更することができます。

テーブル・ヘッダーの背景色を変更する

(テーブルには ヘッダー部)

まず、Tablebergブロック全体を選択します。 Tablebergアイコン (1).次に スタイルタブ (2)を右側のオプションパネルから選択する。そして最後に、色を'ヘッダーの背景色‘ (3).

テーブルの偶数行の背景色を変更する

をクリックしてTablebergブロック全体を選択します。 Tablebergアイコン (1).次に スタイルタブ (2)を右側のオプションパネルから選択する。そして最後に、色を'偶数行の背景色‘ (3).

テーブルの奇数行の背景色を変更する

をクリックしてTablebergブロック全体を選択します。 Tablebergアイコン (1).次に スタイルタブ (2)を右側のオプションパネルから選択する。そして最後に、色を'奇数行の背景色‘ (3).

テーブルフッターの背景色を変更する

(テーブルには フッターセクション)

をクリックしてTablebergブロック全体を選択します。 Tablebergアイコン (1).次に スタイルタブ (2)を右側のオプションパネルから選択する。そして最後に、色を'Footer Background Color‘ (3).

以上です。以上、Tablebergプラグインで作成したテーブルの背景色を変更する方法でした。

結論

Hope you can now customize the background colors of your tables in WordPress anytime you want. But remember some colors cause an eye-screaming effect on readers’ eyes and disturb their readability scores. 

Plus, if you fail to use proper contrasting colors, this can also decrease the readability score. Hope you’ll keep these points in mind while changing the background color of your table. 



テーブルバーグ・チーム