表の枠線・スタイルの変更【TablePress Gutenberg】

表の縦線が表示されない

Gutenberg のテーブルブロックでは表の縦線の表示を選択できますが、プラグインのTablePressで作表した場合、縦線が表示されません。

縦線が表示されない表

縦線を入れた場合

Gutenberg 表の色や枠線のスタイルの変更方法

ブログは閲覧者が見やすいよう、且つ速く表示できるようにシンプルになってきていますが、表の色や枠線のスタイルの変更方法を記載しておきます。

表の色やスタイルを指定する方法

• スタイルシート（style.css）で指定する
• テーブル毎、作表時にエディタで変更する
• Advanced Editor Tools （旧TinyMCE）で設定する

Advanced Editor Tools （旧TinyMCE）で設定

Advanced Editor Tools （旧TinyMCE）をインストールしている場合、Advanced Editor Tools の設定でボーダーを追加できます。

1. 設定→Advanced Editor Toolsを開く
2. テーブル用の高度な設定へ
3. テーブル挿入時の HTML 枠線属性を1に設定にチェックを入れる
4. 変更を保存

テーマで上書きされなければテーブルの周りにボーダーを追加します。

Advanced Editor Tools

クラシックエディタで作表

Advanced Editor Tools （旧TinyMCE）で設定をインストールしている場合、Classic Paragraphやクラシックブロックのエディタ（ビジュアル編集）で色や枠線のスタイルを簡単に変更することができます。

1. 枠線の色やスタイルを変えるセルまたは行を選らぶ
2. テーブルアイコンをクリック
3. セルはまた行のプロパティをクリック
4. 高度な設定を開く
5. Border style を選ぶ
6. 枠線の色・背景色を選ぶ

上の画像のように、セルとテーブルのプロパティで枠線を指定した場合、次の画像のようになります。

上の画像のように、セルとテーブルのプロパティで枠線を指定した場合、次の画像のようになります。

枠線のスタイル

プロパティで選択できる線のスタイルです。

TablePress で表の縦線を表示させる

TablePressのプラグインオプションにソースコードを記述します。

TablePressで表の縦線を表示させる手順

1. TablePressを開く
2. プラグインオプションをクリックする
3. フロントエンドオプションのカスタムCSS
4. ソースコードを記述する
5. 変更を保存

TablePressで表の縦線を表示させるソースコード

.tablepress tbody td,
.tablepress tbody th {
border: 1px solid #ccc;
}

「border: 1px solid #000」は「太さ・スタイル・色」です。好きな色などに変更してください。

スタイルシートで指示する

テーブルブロックはスタイルシート( style.css ）にソースコードを記述します。

1. 外観→テーマエディッタ
2. style.css にソースを記述

Classic Paragraph・クラシックブロックで表の線を変更する

.entry-content td,
.entry-content th {
border: 1px solid #000;
}

「border: 1px solid #000」は「太さ・スタイル・色」です。好きな色などに変更してください。

テーブルブロック で表の線を変更する

table.wp-block-table td,
table.wp-block-table th {
border: 1px solid #000;
}

「border: 1px solid #000」は「太さ・スタイル・色」です。好きな色などに変更してください。

（例）表の線をスタイルシートで指示

スタイルシートに次のように記述