wordpress
エディターがGutenberg（グーテンベルク）に変わってから、表の作り方も変わりました。下のリンクに記事を更新しています。
[blogcard url=”https://web.vogue.tokyo/gutenberg-table”]
WordPressの投稿画面のビジュアルエディタで作表する場合、TinyMCE Advancedによってビジュアルエディタが拡張されていることが前提となります。もし、TinyMCE Advancedをインストールしていなければ、下記をご参考にしてください。
ビジュアルエディタのバーに「テーブル」の文字があることを確認して下さい。
[blogcard url=”https://book7.coresv.com/wp-tinymce-advanced”]
これで、表が挿入されます。
縦２×横３で表を作りました。
| a | b | c |
| d | e | f |
表の行の背景色は白とグレーで交互に色付けされて表示されます。交互であった方が見やすいと思います。背景色は変更可能です。背景色の変更については、この後、記載します。
私が使っているテーマだとテーブルの下線に色が付きます。テーマがテーブルのスタイルを指定している場合、テーマの指定の方が優先度が高いので、私のテーマだと下線に色が付きます。
プロパティで、表の大きさや余白、枠線の指定ができます。
幅を500、枠線の太さを5にしました。
| a | b | c |
| d | e | f |
wordpress
セルのプロパティを開く
幅はセルの種類・文字の配置を指定
aの幅を110に指定、abcをヘッダーセルに、枠線を5にしました。そして、eの文字の位置を中央にしました。
| a | b | c |
|---|---|---|
| d | e | f |
詳細タブで色を指定
a~bまでを選択（反転させ）し、セルプロパティで色を指定しました。
| a | b | c |
| d | e | f |
例 aを赤、bを文字に背景を付け、cをサイズを18ptに、dを太字にしました。
| a000 | b000 | c000 |
| d000 | e | f |
ｆに画像を入れました。
| a | b | c |
| d | e | f |
プラグインTablePressやWordPressのビジュアルエディタで表を作ると縦線が表示されません。
WordPressのビジュアルエディタの場合は、ビジュアルエディタで指示することができます。
| a | b | c |
| d | e | f |
スタイルシートで指示することもできます。
| .entry-content td, .entry-content th { border: 1px solid #000; } |
borderのサイズや種類、色は好きなものを変更して下さい。「.entry-content 」はクラス名です。テーマ毎に違います。
| a | b | c |
| d | e | f |
This post was last modified on 02/28/2020 6:03 PM
