WordPress 表の縦線

Gutenberg 表の縦線が表示されない時の表示方法【WordPress】


WordPressで表の縦線が表示されない

Gutenberg のテーブルエディタ、 Classic Paragraphやクラシックエディタ 、プラグインのTablePressで表を作った時、縦線が表示されません。

WordPress 表の縦線
WordPress 表の縦線

上から

  • テーブルブロック
  • クラシックブロック
  • TablePress

どれも縦線が入っていません。次の画像は縦線を入れた場合です。

WordPress 表の縦線
WordPress 表の縦線

枠線を引く方法

  • テーブル毎、作表時にエディタで枠線を引く
  • スタイルシート(style.css)で指定する

Gutenbergのクラシックエディタ、テーブルエディタ、プラグインTablePressの場合を以下に記載します。

クラシックエディタで枠線を引く

Classic Paragraph・クラシックブロックの場合、エディタ(ビジュアル編集)で枠線を引くことができます。

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

表全体に枠を表示する

セルとテーブルのプロパティで枠線を指定すれば、表全体に枠線が入ります。(画像を参照)

  1. セルのプロパティ→高度な設定
  2. Border style と枠線を指定する
  3. テーブルのプロパティ→高度な設定
  4. Border style と枠線を指定する
WordPress 表の縦線
WordPress 表の縦線

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

WordPress 表の縦線 プロパティで枠線を指定

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

Classic Paragraph、クラシックブロック、テーブルブロックはスタイルシート( 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」は「太さ・スタイル・色」です。好きな色などに変更してください。

(例)表の縦線をスタイルシートで指示

1.Classic Paragraph ・クラシックブロックもテーブルブロックも、表の縦線が表示されません。

Wordpress 表の縦線
WordPress 表の縦線

2.スタイルシートに次のように記述しました。

表の縦線 ソースコード
表の縦線 ソースコード

3.Classic Paragraph ・クラシックブロックもテーブルブロックも、表の縦線が表示されました。

Wordpress 表の縦線
WordPress 表の縦線

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

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」は「太さ・スタイル・色」です。好きな色などに変更してください。


About ゆきを

ジャンルに拘らずに、好きなことを書いてます。 趣味であったり、覚書きであったりします。 むずかしい言葉を使わず、流行りの言葉を使わないように書いてます。