sponsor

変更する前にバックアップすることをオススメします。

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

Classic Paragraph とクラシックブロック WP 設定
Classic Paragraph とクラシックブロック
WP 設定
sponsor

WordPressで表を作る方法

WordPressで表を作る方法は?

  • Classic Paragraph (クラシックパラグラフ)で作る
  • クラシックブロック で作る
  • テーブルブロック で作る
  • プラグイン TablePress を利用する

Gutenberg(グーテンベルク)はブロック毎に分けて記事を作成します。クラシックブロック(旧 エディタ)でも Classic Paragraph でもテーブルブロックでも表(テーブル)が作れます。

Classic Paragraph はクラシックブロックの機能を拡張したエディターで Advanced Editor Tools (旧TinyMCE)によりブロックに挿入されています。

表を作るのは簡単

Classic Paragraph やクラシックブロック 、テーブルブロックは簡単に表が作れます。

プラグインTablePressはどんな時に必要なのでしょうか? Classic Paragraph 、クラシックブロック、テーブルブロック、TablePressを比較し、TablePressの特徴を記載します。

sponsor

Classic Paragraph ・クラシックブロック・テーブルブロック・TablePress の比較一覧

テーブルの作り方で比較

ClassicテーブルブロックTablePress
セルの結合簡単簡単
リンクの挿入簡単簡単簡単
文字色の指定簡単簡単HTMLで記述
背景色の指定セルのみも簡単全体の背景色HTMLで記述
画像を入れる簡単簡単簡単
ヘッダー簡単簡単簡単
行・列の並べ替え切り取り貼付けは簡単ドラッグで簡単

テーブルの機能で比較

TablePressClassicテーブルブロック
ソート
検索フォーム
表を分割
スクロール

Classic Paragraph とクラシックブロックの作表は同じです。 Classic Paragraph とクラシックブロック の違いは下記リンク参照。

Classic Paragraph とクラシックブロックの違いと便利な使い方
Gutenberg WordPressにはGutenberg (グーデンベルグ)というエディタが標準...
sponsor

テーブルブックでできないこと(欠点)

  • ビジュアル編集ではセルの結合ができない
  • 行の並べ替えを簡単にできない
sponsor

セルの結合

Classic Paragraph やクラシックブロックはセルの結合は簡単です。結合させたいセルを選択して、セルの結合ボタンをクリックするだけです。

Gutenberg のテーブルブロックのビジュアル編集ではセルの結合はできません。HTMLとしての編集または Classic Paragraph やクラシックブロックに変更してセルを結合させます。

Classic Paragraph ・クラシックブロックのセルの結合

Gutenberg セルの結合
Classic Paragraph ・クラシックブロック セルの結合は簡単

TablePressのセルの結合

下の図のようにセルの結合ボタンを押すことで結合できます。

TablePress 線の結合
TablePress 線の結合
sponsor

リンクの挿入

  • 簡単にリンクできる

TablePress、Classic Paragraph (またはクラシックブロック)、テーブルブロック、どれを利用してもリンクのダイアログが開き、簡単にリンクできます。

sponsor

文字の色を変更する

  • Classic Paragraph は簡単
  • テーブルブロックは簡単
  • TablePressはHTMLで記述する

Classic Paragraph (またはクラシックブロック)とテーブルブロックは簡単に文字を変えることができますが、TablePress はコードを記載しなければなりません。

Gutenberg の文字の色の指定

Classic Paragraph (またはクラシックブロック)

Classic Paragraph とクラシックブロック
Classic Paragraph とクラシックブロック、テーブルブロックは簡単に色の変更ができる

テーブルブロックも右のサイドバーで簡単に文字色の変更はできます。

TablePress の文字の色を指定

TablePress は高度なエディターボタンをクリックし、エディターを開き、HTMLで編集しなければなりません。視覚的に確認するにはプレビューを開きます。

TablePress
TablePress はソースコードを記載する
sponsor

背景色を変更する

  • Classic Paragraph は簡単
  • テーブルブロック 全体の背景色の指定は簡単
  • TablePress はHTMLで記述

Classic Paragraph (またはクラシックブロック)とテーブルブロック は簡単に背景色を変えることができますが、テーブルブロックのビジュアル編集では、セル毎に背景色を変えることができません。

テーブルブロックでセル毎に背景色を変えるためにはHTMLで変更しなければなりません。

Classic Paragraph とクラシックブロックの背景色の指定

Classic Paragraph またはクラシックブロックはセル毎に背景色や線のタイプや色を指定できます,

セルのプロパティ高度な設定で簡単に指定できます。

(ヒント)デフォルトでは高度な設定タブが表示されていますが、高度の設定タブはAdvanced Editor Tools (旧TinyMCE)の設定のテーブルオプションによって表示されています。もし高度な設定が表示されていない場合は、Advanced Editor Tools の設定を確認してみて下さい。 →Advanced Editor Toolsの設定
Classic Paragraph とクラシックブロック
Classic Paragraph とクラシックブロックのセルのプロパティ

次のテーブル(表)はClassic Pargraph で編集しています。セル毎の背景色も簡単です。

aaabbbccc
def

テーブルブロックの背景色の指定

テーブルブロック
テーブルブロックの文字の色と背景色

テーブル全体の背景色の指定は簡単ですが、セル毎の背景色の指定はビジュアル編集ではできません。右のサイドバーの色設定で簡単に指定できるのは、テーブル全体の背景色です。

ビジュアルで編集でできないことは、HTMLとして編集を選択して、HTMLで記述します。

テーブルブロック
テーブルブロック HTML

TablePress の背景色の指定

高度なエディターでソースコードを記載しなければなりません。また、視覚的に色の確認はプレビューを開かなければなりません。

TablePress
TablePress

TablePressは上の画像で次のテーブルのように色を付けることができます。

sponsor

表(テーブル)に画像を入れる

  • いずれも簡単

Classic Paragraph とクラシックブロックの画像を貼る

メディアを追加から簡単に画像を入れることができます。

  
   

テーブルブロックで画像を貼る

Gutenbergのテーブルブロックも Inline Image で簡単に画像を入れることができます。

Gutenberg のテーブルブロック
テーブルブロック Inline Imageで画像を追加

TablePressで画像を貼る

TablePress は、高度なエディターのメディアの追加で簡単に画像を入れることができます。

TablePress
高度なエディターのメディアの追加ボタンから画像を追加する
sponsor

行や列をヘッダー(表の見出し)にする

  • いずれも簡単に見出しを指定できる

Classic Paragraph とクラシックブロックのヘッダー指定

セルのプロパティで簡単にヘッダーにすることができます。

セルのプロパティ
セルのプロパティ 表のヘッダー指定

テーブルブロックのヘッダー指定

テーブルブロックの設定で、ヘッダーとフッターの指定ができます。

TablePressのヘッダー指定

テーブルのオプションにチェックを入れるだけで、最初の行を見出しに、最後の行をフッターにすることができます。

TablePress
TablePress 見出し
sponsor

TablePress の利点

何故、TablePressを利用するのか?TablePressの利点は次の5点です。

  1. 行や列を並べ替えできる
  2. ソートできる
  3. 検索フォームを設置し検索できるようにする
  4. 表を複数ページに分割できる
  5. 水平スクロールで見やすくできる

1.行や列をドラッグ&ドロップで移動できる(並べ替え)

テーブルの数字の部分をドラッグ&ドロップすることで行を上下に移動させることができ、テーブルの英字の部分をドラッグ&ドロップすることで列を左右に移動させることができます。

(例)

TablePress
TablePress 数字または英字の部分をドラッグする

2.ソートできる

訪問者がソート(並び変え)できます。ヘッダー(行のタイトル)の▼をタップするとあいうえお順等に並び変えができます。下の画像の場合、ウイイレ2017のチーム名をあいうえお順に並べることができます。

(例)

TablePress
TablePress ▼でソートできる

3.検索フォームを設置し検索できるようにする

表の内容の検索フォームを設置できます。

(例)

TablePress
TablePress 検索フォームを設置

4.表を複数ページに分割ができる

1つの表を2ページ目等に分けて表示できます。また、訪問者が表示件数を指定できます。(下の画像参照)行数が多い時には便利です。

5.水平スクロールで見やすくできる

スクロールを設置できます。

(例)

TablePress
TablePress スクロールを設置
TablePressの特徴と使い方 WordPress
TablePressのインストールから設定まで プラグインの項目から新規追加を選ぶTablePres...