Morning&Lunch
配信とインテリアの実話映画
PCとスマホとゲーム
WordPressを簡単に
Morning&Lunch
Morning&Lunch

モーニング&ランチ

配信とインテリアの実話映画
配信とインテリアの実話映画

Style Note

PCとスマホとゲーム
PCとスマホとゲーム

webNote

WordPressを簡単に
WordPressを簡単に

WordPress

previous arrow
next arrow
Shadow

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

GutenbergのクラシックブロックWP CSS
Gutenbergのクラシックブロック
WP CSS

表の縦線が表示されない

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

縦線が表示されない表

WordPress 表の縦線
WordPress 表の縦線

縦線を入れた場合

WordPress 表の縦線
WordPress 表の縦線

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. 枠線の色・背景色を選ぶ
Gutenbergのクラシックブロック
Gutenbergのクラシックブロック

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

aaabbbccc
111222333
あああいいいううう
WordPress 表の縦線
WordPress 表の縦線

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

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

枠線のスタイル

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

Solid実線
Dotted点線・・・
Dashed破線ーーー
Double二重線
Groveくぼんだ線
Ridge隆起した線
Insent左と上が暗い線
Outset右と下が暗い線
なしなし
Hiddenブラウザで表示しない

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

3
aaabbbccc
111222333
あああいいいううう

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

Wordpress 表の縦線
WordPress 表の縦線

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

表の縦線 ソースコード
表の縦線 ソースコード
Wordpress 表の縦線
WordPress 表の縦線
タイトルとURLをコピーしました