<
スポンサーリンク

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

Classic Paragraph とクラシックブロック WordPress
Classic Paragraph とクラシックブロック
WordPress
この記事は約8分で読めます。

WordPressで表を作る方法

WordPressで表を作る方法は?

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

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

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

表を作るのは簡単

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

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

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

テーブルの作り方で比較

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

テーブルの機能で比較

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

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

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

Gutenberg のテーブルブロックと Classic Paragraph (またはクラシックブロック)と TablePressを比較してみます。

  • テーブルブロック
  • Classic Paragraph
  • クラシックブロック
  • TablePress

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

  • ビジュアル編集ではヘッダーの指定ができない
  • ビジュアル編集ではセルの結合ができない
  • 行の並べ替えを簡単にできない

セルの結合

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

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

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

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

TablePressのセルの結合

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

TablePress 線の結合
TablePress 線の結合

リンクの挿入

  • 簡単にリンクできる

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

文字の色を変更する

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

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

Gutenberg の文字の色の指定

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

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

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

TablePress の文字の色を指定

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

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

背景色を変更する

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

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

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

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

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

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

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

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

aaa bbb ccc
d e f

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

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

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

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

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

TablePress の背景色の指定

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

TablePress
TablePress

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

aaabbbccc
def
リボン風見出し

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

  • いずれも簡単

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

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

   
     

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

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

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

TablePressで画像を貼る

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

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

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

  • Classic Paragraph は簡単
  • テーブルブロックはHTMLで編集
  • TablePress はHTMLで編集

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

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

セルのプロパティ
セルのプロパティ 表のヘッダー指定
aaa bbb ccc
ddd eee fff

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

クラシックブロックでヘッダーを指定する場合は、 ビジュアル編集で編集でできないので、HTMLとして編集を選択し、HTMLで記述します。

  • td を th に変える
テーブルブロック 行のタイトル
テーブルブロック 行のタイトル(ヘッダー)

1行目をヘッダーにしました。上のソースです。

aaabbbccc
dddfffggg

TablePressのヘッダー指定

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

TablePress
TablePress 見出し

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 スクロールを設置
タイトルとURLをコピーしました