WordPressの作表について

エディターがGutenberg（グーテンベルク）に変わってから、表の作り方も変わりました。下のリンクに記事を更新しています。

• https://web.vogue.tokyo/gutenberg-table

[blogcard url=”https://web.vogue.tokyo/gutenberg-table”]

表を作る前に確認

WordPressの投稿画面のビジュアルエディタで作表する場合、TinyMCE Advancedによってビジュアルエディタが拡張されていることが前提となります。もし、TinyMCE Advancedをインストールしていなければ、下記をご参考にしてください。

ビジュアルエディタのバーに「テーブル」の文字があることを確認して下さい。

• 参考記事 WordPressのプラグインTinyMCE Advanced

[blogcard url=”https://book7.coresv.com/wp-tinymce-advanced”]

ビジュアルエディタで簡単な表を作る

1. ビジュアルエディタのバーより「テーブル」、または「テーブルのアイコン」をクリックして下さい。
2. 作る表のセルの数の分を青く反転させてクリックします。

これで、表が挿入されます。

例　WordPress-作表

縦２×横３で表を作りました。

表の行の背景色は白とグレーで交互に色付けされて表示されます。交互であった方が見やすいと思います。背景色は変更可能です。背景色の変更については、この後、記載します。

表全体の大きさや位置、余白、枠線を変える

プロパティで、表の大きさや余白、枠線の指定ができます。

1. 表にカーソルを置く
2. エディタのテーブルから表のプロパティを開く
3. プロパティで、表の幅・高さ、枠線の太さ、余白、表の位置を指定する

例　WordPress-作表-幅と枠線の太さを指定する

幅を500、枠線の太さを5にしました。

背景の色枠線の色等を変える

1. 変えたい部分（セル・行・列のどれか）にカーソルを合わせる
2. エディタのテーブルから表・セル・行・列、変えたい部分のプロパティを開く
3. プロパティで、枠線の種類、文字の位置を指定する

wordpress

セルのプロパティを開く

幅はセルの種類・文字の配置を指定

例 WordPress-作表-表のヘッダー、文字の位置を指定する

　aの幅を110に指定、abcをヘッダーセルに、枠線を5にしました。そして、eの文字の位置を中央にしました。

背景の色、枠線の色等を変える

1. 変えたい部分（表全体・セル・行・列のどれか）にカーソルを合わせる
2. エディッタのテーブルから表・セル・行・列、変えたい部分のプロパティを開く
3. 詳細タブを開き、色を指定する

詳細タブで色を指定

例 WordPress-作表-セルに色を付ける

a~bまでを選択（反転させ）し、セルプロパティで色を指定しました。

文字の種類や大きさ、文字の色等を変える

1. 変えたい文字を選択するか、文字を入れるセルにカーソルを置く
2. ビジュアルエディタの「フォントファミリー」や「フォントサイズ」「テキストの色」等で指示する

WordPress-作表-文字に背景を付け、文字の大きさ・太さを指定する

例　aを赤、bを文字に背景を付け、cをサイズを18ptに、dを太字にしました。

表の中に画像やリンクを貼る

1. 画像やリンクを貼るセルにカーソルを置くか、リンクする文字を選択し反転させる
2. 画像を挿入する場合は、メディアを追加をクリックし、画像を選ぶ
   文字にリンクを貼る場合は、リンク挿入のアイコンをクリックし、URLを入れる

例　WordPress-作表-画像を貼る

ｆに画像を入れました。

表の縦線が表示されない時の表示方法

プラグインTablePressやWordPressのビジュアルエディタで表を作ると縦線が表示されません。

例　縦線が表示されない

WordPressのビジュアルエディタの場合は、ビジュアルエディタで指示することができます。

ビジュアルエディタで実践を入れる

1. 実線を入れたいセルを選択する（反転させる）
2. テーブル>表のプロパティ>枠線を選ぶ
3. 枠線に数字を入れる

例　ビジュアルエディタで指定

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

スタイルシートで指示することもできます。

borderのサイズや種類、色は好きなものを変更して下さい。「.entry-content 」はクラス名です。テーマ毎に違います。

例　スタイルシートで指示