ベストセラー人気 WordPress テーマTop 30 詳細

WordPress テーブルテーブルヘッダーの背景色を設定する

Last Updated:2023年1月19日| コメントを残す

WordPressの基本エディタであるブロックエディタ(Gutenberg)はテーブルブロックを提供します。 テーブルブロックを使用してシンプルなテーブルを作成できます。 より複雑なテーブルを作成したい場合は、オンラインテーブルジェネレータを使用してテーブルを作成します WordPress ブロックエディタでカスタムHTMLとして挿入できます。

また、 フレキシブルテーブルブロックなどのプラグインを使用して、複雑なテーブルをテーブルブロックにすることができます。 このプラグインは、複数のセルをマージして、次のように複雑なテーブルを作成することができます。

WordPress 複雑なテーブル(テーブル)を挿入する

複雑なテーブルを作成する必要がない場合は、メインエディタが提供するテーブルブロックを追加し、CSSで背景色、テキストの色などを調整できます。

WordPress テーブルテーブルヘッダーの背景色を設定する

先 WordPress ブロックエディタでテーブル(テーブル)ブロックを使用する方法を見たことがあります。 この記事では、ヘッダーの背景色を設定する方法について説明します。

最後に、次の表をデフォルトエディタを使用して追加する例を説明します。

WordPress テーブルテーブルヘッダーの背景色を設定する

1. まず、ブロックエディタでテーブルブロックを追加します。 段落ブロックから /テーブルを入力してから、テーブルを選択して簡単に追加できます( "時間と効率を向上させる WordPress Gutenberg キーボードショートカット"参照)。

WordPress ブロックエディタテーブルを追加する

2. テーブルが挿入されると 列数行数を指定し、「テーブルの作成」ボタンをクリックします。

テーブル列数行数を設定する

スタイルは 기본ストライプ の中から選択することができます。

3. 右側のテーブルブロック設定パネルで「ヘッダ領域」をチェックして有効にします。

ブロックエディタテーブルヘッダ領域を有効にする

「固定幅テーブルセル」オプションを選択すると、テーブルセルの幅は等しく固定されます。

4. テーブルブロック設定パネルの 高級 セクションに移動して 追加のCSSクラス フィールドにCSSクラスを指定します。 (例: table-style-1)

ブロックエディタCSSクラスを追加する

ここでは例として table-style-4と指定してみました。 CSSクラスは必要に応じて指定できます。

5. WordPress お知らせ»外観»カスタマイズ»追加CSS セクションに次のCSSコードを追加します。

/* WordPress 블록 에디터 테이블 헤더 배경색 설정하기 */

.table-style-4 table,
.table-style-4 td,
.table-style-4 th {
         border: 1px solid gray;	/* 테두리선 */ 
         }

.table-style-4 th {
       background-color: #4d627d; /* 헤더 배경색 */
       color: white; /* 헤더 텍스트 컬러 */
         }


.wp-block-table table {
    border-collapse: collapse;
}

CSSクラス名は、上記で指定したCSSクラスに変更するようにします。 ボーダースタイルやヘッダー背景色、テキストカラーなどは適切に変更してください。

これで、次のようにテーブルヘッダーに背景色が表示されます。

バージョン2023年 1月
PHP 7.35.3%
PHP 7.427.7%
PHP 8.016.2%
PHP 8.138.8%
PHP 8.24.7%

上記の表は、2023年1月時点のPHP使用量統計を示しています。 今はPHP 8.1が最も多く使われていますね。 最新バージョンのPHP 8.2は2022年12月8日に公開され、まだ使用量は多くありませんね。 Bluehost, クラウドウェイズ など海外ホスティングではPHP 8.1がサポートされ、 Cafe24 などはまだPHP 7.4までサポートされています。

最後に、

WordPress 基本エディタであるブロックエディタのテーブルブロックを使用してテーブルを挿入するときに、ヘッダーの背景色とテキストの色を変更する方法について説明しました。

WordPress テーブルブロックはまだ基本的な機能のみを提供しているため、複雑なテーブルを作成するのは困難です。 上記のプラグインを使用するか、オンラインテーブルジェネレータを使用して複雑なテーブルを作成し、カスタムHTMLで複雑なテーブルを挿入できます。

今後、テーブルブロックの機能が強化され、ヘッダーの背景色を指定するオプションが追加されます。 これにより、あえてHTMLコードを使用したり、追加のプラグインをインストールしたりすることなく、複雑なテーブルを作成できます。

参照


コメントを残す

コメント

WordPress Naver カフェを訪れる

ありがとうございます!