『Gutenberg:グーテンベルグ』で複雑なテーブル(表)を簡単にカスタマイズして書く方法

Pocket

2019.10.20⇅

ワードプレス新エディタ、Gutenberg(グーテンベルグ)でプラグイン無しでも普通のテーブル(表)は書けるようになってますが、

テーブルをカスタマイズしたり複雑に変形させるのってよくわからなくないです?笑

っていうか私はGutenberg(グーテンベルグ)自体に備わってる簡易テーブルカスタマイズの仕方がわからんかったです 笑

ということで今回は、

◆ワードプレスのグーテンベルグで、複雑なテーブルも簡単に書きたい時のやり方

についてです!

table
〜〜目次〜〜〜〜〜〜〜〜〜

❤︎1、グーテンベルグで、複雑なテーブルを自由にカスタマイズするには、
『Classic Paragraph』と『TinyMCE Advanced』を使う

1-1、ワードプレスで『TinyMCE Advanced』のエディタ設定をする

1-2、グーテンベルグで『Classic Paragraph』を呼び込む

1-3、テーブル表示左右幅がはみ出ないように設定する

1-4、セルの結合・分割

1-5、テーブルでセンター合わせや左右の余白を設定する

1-6、セルの背景色や枠色の指定

1-7、中央・Middle・左右・上下指定

❤︎2、グーテンベルグで複雑なテーブルを簡単に書くためのまとめ

〜〜〜〜〜〜〜〜〜〜〜〜

スポンサーリンク

❤︎1、グーテンベルグで、複雑なテーブルを自由にカスタマイズするには、
『Classic Paragraph』と『TinyMCE Advanced』を使う

やり方は色々あるのですが、複雑なテーブルをより直感的にカスタマイズして書くには『Classic Paragraph』で『TinyMCE Advanced』を使うのが楽だったりします。

これを使うメリットとしては、

  • Gutenbergエディタ内でやれる
  • 複雑なテーブルも直感的にカスタマイズしやすい
    (難しいコード知識・理解力は必要ない)
  • スマホ表示にも対応できる
  • 再利用ブロック』に保存して、再利用・一括管理もできる

などです。

デメリット(リスク)

  • バグるときもある
  • 『Classic Paragraph』,『クラシック』のブロックはなくなる可能性がないとは言えない

あたり….

ただ、クラシックエディタはなくなるけど、グーテンベルグの中にある『Classic Paragraphブロック』は『ブロック』として無くならないんじゃないかなと…..

なのでクラシックエディタを使い続けるよりは断然いいように思えます。

グーテンベルグ(Gutenberg)自体のテーブル機能でもテーブル(表)はかけるのですが、カスタマイズ性に欠け、自由度がないです。。。。
(ってかカスタマイズできるの?笑)

で、

エクセルで書いて、コピペやインポートが可能ならそれもいいかもしれません。

んが、

ワードプレスの新エディタ『グーテンベルグ(Gutenberg)』内でやれるようになっとくのも便利です。

ということで。。。。。そのやり方について….↓

1-1、ワードプレスで『TinyMCE Advanced』のエディタ設定をする

テーブルプラグインはTablePressが有名ですが、

今回は TinyMCE Advanced というエディター機能拡張プラグインの一部をいます。

かなり優れてて『TablePressより使いやすい』のでたすかりますyo

ってことでまず、

TinyMCE Advanced かま〜ん!

プラグインをインストールして有効にする↓

tinymce-advance-min

ワードプレスダッシュボード>設定>TinyMCE Advancedで、自分に必要なタブをドラッグして設定しておく、
(テーブルタブは必須)↓

TinyMCE Advancedの設定

         ↓

TinyMCE Advancedエディタ設定

▲目次へ戻る

1-2、グーテンベルグで『Classic Paragraph』を呼び込む

ワードプレス投稿画面で、
Classic Paragraph(クラシックパラグラフブロック)』を呼び込む↓

Classic Paragraphを呼び出す

別に『クラシックブロック』でも同じようなことができるのでそれでもいいのですが、クラシックエディタはいずれなくなるので、なんとなく『クラシックブロック』もなくなり、『クラシックパラグラフブロック』は残るかも?とか勝手に思ってるので『クラシックパラグラフブロック』の方を私は使ってます。

でも、両方ともグーテンベルグの『ブロック』なので残るでしょうし、逆に『クラシックパラグラフブロック』がなくなるのかもしれないので別にどちらでもいいんですけどね 笑、そのあたりは感覚でどちらでも良いかなと思うす 笑

で、クラシックパラグラフブロックでは、グーテンベルグ内でもこれまでの旧エディタと同じように使えるので、これまで使ってきた人はこれまで通りでテーブルを書ける。

この『TinyMCE Advanced』のテーブルは地味に直感的に複雑なテーブルにカスタマイズできるので断然便利だと思うんですよね。。。

    ↓

1-3、テーブル表示左右幅がはみ出ないように設定する

テーブルって列数が多かったり、アレソレ書いてるうちにスマホ表示では横幅はみ出まくってた!笑

なんてことがよく起こりますよね 笑

でも『TinyMCE Advanced』のテーブルではHTMLできちっと指定しなくても簡単に直せたりする。。。。

まず、『TinyMCE Advanced』のテーブルタブは下図のタブですが、タブをクリックするとカスタマイズできる項目がひらけますが、

単純なテーブルなら普通に書ける↓

tinymce-advance-sonyuw-min

(これはグーテンベルグのテーブルでも同じく簡単)

で、

スマホ表示でも表の左右がはみ出ないようにするには、

テーブルタブ>表のプロパティ>一般>を『100%』にしておく↓

表の左右幅を100%にする

通常100%になってると思うんだけど…..

左右幅範囲100%で表示しておくれってことですね….

ものすごい数の列数とか、無理な文字数にするとか、大きな画像を無理に入れたりすると横幅に無理が生じておかしくなるけど、基本的にはこれで横幅がはみ出るのを回避できたりします。

これを『%』ではなく、単位で指定しちゃうと、表示する媒体で変わってきちゃってはみ出たり狭くなったりします。。。

で、書き込んでるうちにこの左右表示幅率がくるっちゃって崩れてはみ出たりするので、

まず最初に確認と、最後にここが(100%)なってるか&スマホでも確認した方がいい感じ。

こうしておくとスマホでも100%に納めてくれる。。。。

これは、表のプロパティ>高度な設定>スタイルの欄に、

table border="1" width="100%"

としてもOK

(borderは枠、 widthは幅 )

例えば、3行4列のテーブルを上の画像のように指定してHTML表示にすると、1行目は下のようになる↓

<table style="width: 100%; border-collapse: collapse;" border="1">
<tbody>
<tr>
<td style="width: 25%;"> </td>
<td style="width: 25%;"> </td>
<td style="width: 25%;"> </td>
<td style="width: 25%;"> </td>
</tr>
<tr>
<td style="width: 25%;"> </td>
<td style="width: 25%;"> </td>
<td style="width: 25%;"> </td>
<td style="width: 25%;"> </td>
</tr>
<tr>
<td style="width: 25%;"> </td>
<td style="width: 25%;"> </td>
<td style="width: 25%;"> </td>
<td style="width: 25%;"> </td>
</tr>
</tbody>
</table>
border-collapse: collapse;

は、隣接するセルのボーダー間を空けずに重ねて表示という指定。

でもここではHTMLを理解してなくてもOK
(そんなもんかぐらいでOK笑)

ただ、HTMLで記述する際も、1行目に上記のを入れるとOKってことなのでコピペメモしておくとあとあと使えて便利かも….

で、各列の幅も、列ごとに%で指定できトータルで100%になるようにすると、うまく収まる。
(指定したい列を選択>セル>セルのプロパティ>一般>幅で指定していける)↓

列ごとの幅指定

※例えば4列なら、35%,15%,30%,20%で計100%とか調整できる
(列幅を列幅ごとに変えてバラバラに指定してもトータル100%になるようにすればはみ出ない)

▲目次へ戻る

1-4、セルの結合・分割

結合・分割させたいセルを選択して>テーブルタブ>セル>セルの結合・分割
で簡単にできる↓

セルの結合・分割

1-5、テーブルでセンター合わせや左右の余白を設定する

例)左右の余白1%、1、2行目の文字は左合わせ、3行目はセンター合わせ、4行目は右合わせたりとか。。。

table-rei-min

これの場合はスタイル欄に記述する必要があるけど、これも『』で考えるとわかりやすいし、表示媒体が変わってもおかしくなりづらい。そして記述も超単純です。

セルの余白設定,,,,,
セルの左右の余白を1%とる場合は、( 余白は padding )

padding-left: 1%; padding-right: 1%; 

例えば左合わせの文字にした場合、左が枠線ぴったりに来すぎて見づらい

なので、少しだけ余白をつけた方がいいので、1%余白にしてみました。

右合わせでも同じことが言える

だから左右1%の余白設定w

テーブルタブ>セルのプロパティ>高度な設定>スタイルで書き込める
対象のセルを一括選択してから指定すると一気にできる↓

セルのプロパティにスタイルを記述

つまり、

テーブルプロパティセルのプロパティで設定
テーブルを選択して、テーブルタブをクリックすると色々カスタマズできる項目が出てくる

そこで感覚的にカスタマイズできるってことですね。

▲目次へ戻る

1-6、セルの背景色や枠色の指定

例)↓

table-coler-tukeru

セルのプロパティで指定するだけw↓

背景色や枠線カラーを指定

カラーの部分の四角いとこをクリックすると、カラーパレットが表示されるので、視覚的に好きな色を選択でき、コード知識なしに変更できる。

1-7、中央・Middle・左右・上下指定

位置を指定したいセルを選択>テーブルタブ>セル>セルのプロパティ>一般>横縦配置で指定 ↓

中央・Middle・左右・上下指定

これもただ選択するだけでできる。

▲目次へ戻る

❤︎2、グーテンベルグで複雑なテーブルを簡単に書くためのまとめ

  • 『クラシックパラグラフブロック(Classic Paragraph)』に『TinyMCE Advanced』を設定しておいて、
    『TinyMCE Advanced』拡張ツールのテーブルでカスタマイズすると簡単にできる
  • テーブル・列の幅は、テーブルタブ>表のプロパティ>一般>幅で『%』で指定するとわかりやすい。
    →テーブル表示左右幅を100%に指定し、列幅が合計100%になるように調整する
    →スマホでもテーブルがはみ出ない。
  • 余白(padding)も『%』で指定するとわかりやすい

作ったテーブルは、

再利用ブロック』に保存しておくと、

  • 違うページ内でもすぐ呼び込めるし、
  • それらを一括で修正することもできる

ので便利w

再利用ブロック』の活用の仕方については下記のページを参照↓

▲目次へ戻る

ってことで

楽しいクリエイトあれ!

しゃらんるああぁあ❤︎

\(`^`)b

スポンサーリンク

 

REACH_rh.jam project / Creative Support
REACH_rhがあなたのクリエイトをサポートします
サポート内容をチェックしてみる ↓

rhjampj_v-min

 

❤色々やり散らかしております、宜しくどうぞ御贔屓に<(_ _)><(_ _)><(_ _)>

Twitter-REACH_rh Facebook-REACH_rh G+ -REACH_rh Insta-REACH_rh note-REACH_rh

YouTube-REACH_rh SoundCloud-REACH_rh PIXIV-REACH_rh CREATORS BANK_REACH_rh

関連コンテンツ

Pocket