WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです
Various ways to display Gutenberg standard table blocks as you like

Gutenberg標準のテーブルブロックの表示を思い通りにする方法いろいろ

公開日: 使い方など

WordPress5.0から採用されたブロック管理形式のエディタ、Gutenberg。早速切り替えて使っている方も、「どうも使いにくい」とClassic Editorプラグインなどを追加して旧エディタに戻して使っている方も多いと思います。

中でもGutenbergエディタ標準ブロックの1つ、テーブルブロックは別のプラグインで作ってショートコードで挿入・・なんてしなくても、簡単にテーブルを作成できるのが魅力です。

が、このテーブルブロック、基本となるデザインが2つしか用意されていなかったり、レスポンシブ対応させるため?に、列の幅が自動調整されるようになっていたり、逆に固定幅にすると列の幅が均等になって見栄えが悪かったり、文字の大きさが変えられなかったり・・・とちょっと使い勝手が悪いんです。

そこで、実際にテーブルブロックをつかっていくうちに「こんなときどうすれば思い通りのテーブルが作れるの?」と感じた事柄について、私自身の備忘録を兼ね、カスタマイズ方法を紹介しておこうと思います。

1.独自のテーブルデザインを登録しよう

ブロックエディタでテーブルを追加すると、こんな感じの表が挿入されます

テーブルのヘッダーテーブルのヘッダー
内容1内容2
内容3内容4

また、テーブルのスタイルがもう1つあり、同じ表でも「ストライプ」を選択することでこんなデザインの表もできます

テーブルのヘッダーテーブルのヘッダー
内容1内容2
内容3内容4

ただ・・・どちらもなんだかアレな感じがしますよね?はっきり言ってダサい(笑)。

テーブルのデザイン設定がどうなっているかというと、「高度な設定」に追記されるCSSセレクタは

  • 「デフォルト」・・・CSSセレクタは「なし」(テーマなどの指示に従う)
  • 「ストライプ」・・・CSSセレクタには「is-style-stripes」

つまり、「デフォルト」の場合はテーブルブロックに標準で割り当てられる「wp-block-table」というセレクタに、「ストライプ」の場合は「is-style-stripes」というセレクタに対してテーマのCSSにデザイン指示の記述がされていればそのように表示され、されていなければWordPressプログラムの標準デザインが適用されて上のように表示されるということになります。

なんて説明聞いてもやっぱりちょっとアレですよね??

もちろんこれが分かれば「wp-block-table」や「is-style-stripes」に対して追加でデザイン要素をCSSファイルへ追加すればいいのですが、それでは全部の表に対して共通指示になってしまいますし、別のCSSを割り当てるために別のセレクタでデザイン指示を書いておいて、テーブルブロックを追加するたびに、「高度な設定」の「追加CSS」へそのセレクタを記述する・・なんてのも記憶に限界があって難しいですから、今回は独自のデザインパターンを作ってカスタマイズするという方法をとります。

なんだかごちゃごちゃ面倒臭そうと思ってる方、そんなことはありません。以前に公開した

WordPressのテーブルブロックに独自デザインを追加する方法【備忘録】

をご覧いただければ、簡単に独自デザインの追加ができるんです。デザイン追加すると

という風に2種類しかなかったデザイン設定を

のように増やすことができます。目で見て選択できるようになるので便利ですよね。リンク先のページでも紹介している通り、このパターンは任意に増やせるので、あらかじめいろいろなデザインの表を用意しておいてその中から選ぶという使い方ができるようになります。

まずはこの機能を実装した上で、次項で紹介する方法でテーブル要素に対するいろいろな装飾を加えて、思った通りの表を作る&テーブルブロックで簡単に呼び出せるようにするというのが今回の目標です。

2.テーブルの表示方法をカスタマイズしよう

ここからは装飾に関するいろいろなカスタマイズ方法を紹介していきます。前項で紹介した

WordPressのテーブルブロックに独自デザインを追加する方法【備忘録】

の方法でデザインパターンを追加した場合には、それぞれ紹介するCSSコードをテーマのCSSファイルへ追加すれば適用されますが、他の名前(セレクタ)を追加した場合には、コードも置き換えてください。

テーブルに線を入れる方法

外枠に黒の太線、内側に黒の細線を入れるデザインコードです。

.wp-block-table.is-style-border {
	border-collapse: collapse;
}
.wp-block-table.is-style-border table {
    width: 100%;
    border: 3px solid #333;
    border-spacing: 0px;
}
.wp-block-table.is-style-border th,
.wp-block-table.is-style-border td {
	border: solid 1px #333;
}

2行目の「border-collapse: collapse;」でテーブル内の隣り合うセルの線を1本に見えるようにしています

5行目~7行目で、テーブルの幅を横幅いっぱいに設定し、周りに黒で3pxの枠線を引き、「border-spacing: 0px;」で周囲の線とセルの外側の線が1本に見えるようにしています

11行目で、セルのth(見出し)、td(データ)のそれぞれに黒で1pxの枠線を引いています

特定の列の幅を任意の幅にする方法

.wp-block-table.is-style-border tr td:nth-child(1) {
    width: 100px;
}

1行目で対象となるテーブルを指定し、tr td:nth-child(1)で列を指定しています

2行目で幅を100pxに指定しています

※tr td:nth-child(1)の括弧内の値を変更することで左からいくつめの列なのかの指定ができます

特定のセルの文字を装飾する方法

テーブルブロック内のセルでは、文字の色は設定できるようになっていますが大きさの変更などはできません。また、文字列として扱うように設定されているため、HTMLとCSSで装飾しようとしても、HTMLが文字として認識されてしまい、うまくいきません。

そんな時は、一旦HTML形式での編集にしてからclassを付加したHTMLタグを挿入し、元の状態に戻すことで解決できます。

Gutenberg標準のテーブルブロックの表示を思い通りにする方法いろいろの画像|Knowledge Base

画像のように「・・・」をクリックして「HTMLとして編集」をクリックするとテーブルとして見えていたところがHTMLタグに変わりますから、spanタグなどでclass指定をしておき、CSSで装飾するようにします。例えば

<span class="table-cel-design">入力例</span>

というのをHTML編集のテーブル内へ挿入し、CSSへ

.table-cel-design(
background:#000;
font-size:1.6em;
)

を追記すれば、「入力例」という文字の背景が黒になり、文字が通常の1.6倍で表示されます。

※この後通常のテーブル表示に戻した場合には、装飾された「入力例」という文字が表示された状態になっているので、この部分に実際に表示させる文字列を上書きするようにします。「入力例」という文字列を先に消してしまうと、設定したcss classがクリアされ、通常の文字デザインに戻ってしまいますから注意しましょう。

偶数(奇数)行だけに背景色を入れる方法

.wp-block-table.is-style-border td {
	background: #eee;
}
.wp-block-table.is-style-border tr:nth-child(odd) td {
	background: #fff;
}

上のデザインコードでは、1~3行目で背景をすべて薄いグレーに指定してから、4~6行目で偶数行の背景を白にしています。

4行目の:nth-child(odd)を:nth-child(even)にすると、奇数行が白になります。

この例では背景すべてに色を付けてから白い場所を指定していますが、逆の考え方でも構いません(全部白にしておいて、〇数行に色を付ける)


いかがでしたか?デザインパターンを増やすのにテーマのfunctions.phpへ追記するスキル、デザインの変更にCSSの基本知識が必要ではありますが、最低限この程度のカスタマイズができれば、WordPressの標準テーブルブロックの使い勝手が格段に上がると思います。

WordPressのカスタマイズ・不具合対応などご相談ください

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

【スポンサーリンク】