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

セルのプロパティWP プラグイン
セルのプロパティ 表のヘッダー指定

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

最近のブログの傾向としては、シンプルな方がいいようです。

シンプルなブログは表示速度が速く、閲覧者にとって見やすく、結果多くの人に閲覧してもらえるかもしれません。

テーブルブロックで作る表はシンプルですが、Classic Paragraph やクラシックでも作表できます。

Classic Paragraph とテーブルブロックと TablePress の比較 - webNote / WPとゲーム
Advertisements- 目次 W...

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

Advanced Editor Tools (旧TinyMCE) の確認

Classic Paragraphやクラシックエディタ で表を作るためには、Advanced Editor Tools (旧TinyMCE)によって機能が拡張されていることが前提となります。

Advanced Editor Tools がインストールされていない場合はクラシックエディタのビジュアル編集にはテーブルのアイコンはありません。

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

Advanced Editor Tools (旧TinyMCE)のインストール

TinyMCE Advanced の設定方法と使い方
WordPressをインストールしただけ...
Advertisements

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

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

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

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

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

(例)3×2のテーブル

aaabbbccc
dddeeefff

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

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

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

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

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

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

テーブルの周囲の境界線

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

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

  1. ダッシュボードのメニュー→設定
  2. Advanced Editor Tools をクリック
  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. プロパティで、表の幅・高さ、枠線の太さ、余白、表の位置を指定する

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

Advanced options for tables
表のプロパティ
表のプロパティ

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

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

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

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

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

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

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

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

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

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

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

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

Advanced Editor Tools (旧TinyMCE) のテーブルオプション

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

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

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

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

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

Gutenbergの設定
Gutenbergの設定 表

その他の機能

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

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

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

表の縦線が表示されない時は下のリンクをご参考ください。

WordPress 表の縦線 が表示されない時の表示方法
TablePressやWordPress...
Advertisements
タイトルとURLをコピーしました