Classic Paragraph・クラシックエディタで表を作る【WordPress】

セルのプロパティ
WordPress
Advertisements

Gutenberg(グーテンベルク)のテーブル

テーブルブロックでも表は作れますが、まだテーブルブロックでできることが少なく、Classic Paragraph やクラシックの方が使い易いです。

Classic Paragraph とテーブルブロックと TablePress の比較
WordPressで…

そこで、Classic Paragraphやクラシックエディタの使い方を記載しておきます。

Advertisements

TinyMCE Advanced の確認

Classic Paragraphやクラシックエディタ で表を作るためには、TinyMCE Advancedによって機能が拡張されていることが前提となります。 TinyMCEがインストールされていない場合はクラシックエディタのビジュアル編集にはテーブルのアイコンはありません。

Gutenbergのクラシックブロック
のクラシックブロックだけではテーブルのボタンはない

TinyMCE Advancedのインストール

GutenbergとTinyMCE Advanced の設定
プラグインのインスト…

ビジュアル編集で表(テーブル)を作る

投稿編集画面で⊕を開き、ブロックエディタからClassic Paragraphまたはクラシックエディタを選びます。

  1. メニューバーのテーブルまたはテーブルのアイコンをクリック
  2. テーブルにカーソルを合わせる
  3. 必要なセルの数を青く反転させてクリックする

以上で投稿記事内にテーブルが挿入されます。

Gutenbergの設定
Gutenbergのクラシックブロック

(例)3×2のテーブル

aaabbbccc
dddeeefff

テーブル作成の時のグリット表示について

テーブル作成のグリット表示(青く反転させた部分、格子状の線)はTinyMCEの設定により表示されています。

TinyMCEをインストールしていれば、デフォルトでは表示される設定になっています。

グリット表示の設定の手順

  1. ダッシュボードのメニュー→設定
  2. Tiny MCE Advanced をクリック
  3. エディター設定
  4. Advanced options for tablesへ
  5. When inserting a table show a grid‥にチェックを入れる

チェックを外すとグリット表示でなくなります。

テーブルの周囲の境界線

Tiny MCE の設定でチェックを入れるだけで、テーブル周囲の境界線を入れることができます。

テーブルの周囲に境界線を入れる手順

  1. ダッシュボードのメニュー→設定
  2. Tiny MCE Advanced をクリック
  3. エディター設定
  4. Advanced options for tablesへ
  5. When inserting a table set the HTML border attribute to 1にチェックを入れる

チェックを入れるとborder属性が1に設定されます。但し、テーマで指定されている場合、テーマの方が優先度が高くなります。

表(テーブル)のヘッダーを指定する

  1. 表にカーソルを置く
  2. テーブル→表のプロパティを開く
  3. セルの種類でヘッダーを選ぶ
セルのプロパティ
セルのプロパティ 表のヘッダー指定

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

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

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

テーブルの反応をよくするために、幅を設定するときにパーセント値を使用してください。

表のプロパティ
表のプロパティ

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

  1. 変えたい部分(セル・行・列のどれか)にカーソルを合わせる
  2. テーブル→表・セル・行・列、変えたい部分のプロパティを開く
  3. プロパティの高度な設定タブを開く
  4. 枠線の色、背景色をのをクリック
  5. 色設定のダイアログが開く
  6. 色を設定しOKを
TinyMCE 高度な設定
TinyMCE 高度な設定
Classic Paragraph とクラシックブロック
Classic Paragraph とクラシックブロック

高度な設定はTinyMCEの設定により表示されています。

TinyMCEをインストールしていれば、デフォルトでは表示される設定になっています 。

高度な設定タブ表示の手順

  1. ダッシュボードのメニュー→設定
  2. Tiny MCE Advanced をクリック
  3. エディター設定
  4. Advanced options for tablesへ
  5. Show the advanced tabs in the table properties dialogs にチェックを入れる

表(テーブル)の文字の色を変える

  1. 変えたい文字を選択するか、文字を入れるセルにカーソルを置く
  2. エディタのテキスト色をクリック
  3. 指定したい色をクリック
Classic Paragraph とクラシックブロック
テキスト色をクリック

表(テーブル)に画像やリンクを貼る

  1. リンクを貼るセルにカーソルを置くか、リンクする文字を選択し反転させる
  2. エディタのリンク挿入をクリック
  3. URLを入力する
Gutenbergの設定
Gutenbergの設定 リンク

表(テーブル)に画像やリンクを貼る

  1. 画像を貼るセルにカーソルを置く
  2. エディタのメディアを追加をクリック
  3. 画像を選ぶ

TinyMCE のテーブルオプション

TinyMCE の設定にテーブルオプションがあり、テーブルの機能やデザインを指定することができます。

  1. ダッシュボードのメニュー→設定
  2. Tiny MCE Advanced をクリック
  3. エディター設定
  4. Advanced options for tables(テーブルオプション)へ

マウスでドラッグするとテーブルの行や列のサイズが変更する

デフォルトではこの設定にチェックが入っており、ドラッグするとサイズが変更します。

必要ない場合、テーブルオプションの「Enable resizing of tables, rows, and columns by dragging with the mouse」のチェックを外します。

Gutenbergの設定
Gutenbergの設定 表

その他の機能

TinyMCEのテーブルオプションではその他次の設定もできます。

  • Tabキーで次のセルにジャンプする(デフォルトではジャンプする設定)

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

表の縦線が表示されない時は、作表時にエディタで実践を入れる方法とスタイルシート(style.css)にソースコードを記述する方法とがあります。

下のリンクをご参考ください。

Gutenberg 表の縦線が表示されない時の表示方法【WordPress】
WordPressで…
Advertisements
タイトルとURLをコピーしました