TablePress 特徴と使い方 WP

TablePress 特徴

TablePressのインストールから設定まで

1. プラグインの項目から新規追加を選ぶ
2. TablePressを検索窓で検索しインストール
3. TablePressを有効化する

表を作る手順

1. 左側のメニューのTablePressを開く
2. 新しいテーブルの追加をクリックする
3. テーブルの名前を入力する
4. テーブルの行数、列数を入れる
5. テーブルを追加をクリックする

テーブルの行数と列数は、後で増やしたり減らしたりできます。

テーブルの一覧で識別できるように、名前はわかりやすい名前がいいと思います。

テーブルの内容の記載/TablePress 特徴

画像のように内容を記載します。

投稿記事に表を掲載する

ショートコードで投稿記事内に掲載できます。

• ショートコード ［table id=2 /］

ショートコードの変更

テーブルIDを変更するとショートコードの番号もテーブルIDと同じ番号に変わります。

ショートコードを投稿記事内に使った後に変更した場合、投稿記事内のショートコードも変更しなければなりません。

行や列の追加・並べ替え/TablePress 特徴

行や列の追加はボタンひとつででき、行や列並べ替えも簡単です。

行や列の追加

1. テーブル操作へ
2. 行の追加または列の追加に数字を入れる
3. 追加をクリックする

行や列の並び替え

行の数字や列の英字の部分をドラッグ&ドロップすることで移動できます。

ソートする/　TablePress 特徴

英字の▼で表の内容をあいうえお順にソートできます。並びをあいうえお順に替えて、投稿することができます。

行を見出し・フッターにする/TablePress 特徴

チェックを入れるだけで、行の最初を見出しに行の最後をフッターにできます。

リンクの挿入/TablePress 特徴

簡単です。

1. テーブル操作へ
2. リンクを挿入をクリック
3. リンクを入れるセルをクリック
4. リンクのダイアログが開く
5. リンクする投稿記事を選ぶかURLを入力する
6. プレビューで確認する

画像の挿入/TablePress 特徴

簡単です。

1. テーブル操作へ
2. 画像を挿入をクリック
3. 画像を入れるセルをクリック
4. 画像を選択する
5. プレビューで確認する

セルの結合（２つのセルを繋げる）/TablePress 特徴

2つのセルを結合させる方法です。

• kkkと右隣のセルが結合された
• iiiとその下のセルが結合された

（注意）#rowspan#または#colspan#を入力したセルの内容は消えます。

Data table Javascriptライブラリの使用を有効化しています。 Data Tablesは自動的に無効化されます。

TablePress

列内のセルの結合の手順

1. テーブルの操作へ
2. セルの結合の列内の結合をクリック
3. 結合したい列の下側のセルをクリック
4. セルに、セルを結合するタグ#rowspan#が書き込まれる

行内のセルの結合の手順

1. テーブルの操作へ
2. セルの結合の行内の結合をクリック
3. 結合したい行の右側のセルをクリック
4. セルに、セルを結合するタグ#colspan#が書き込まれる

文字の色や背景色を変更する/TablePress 特徴

1. テーブル操作へ
2. 高度なエディターをクリック
3. 文字の色を変えるセルを選ぶ
4. ソースコードを記述
5. プレビューで確認する

高度なエディターで、太文字・斜体文字・取消し線・insタグ・codeタグはボタンを押すだけで簡単に入力できます。

テーブルの便利機能/TablePress 特徴

オプションで次の設定ができます。

• 訪問者がテーブルの並べ替えができる
• 検索フォームを設置する

テーブルのスタイルの変更/TablePress 特徴

オプションで次の設定ができます。

• 行の色を交互にする
• カーソルで行をハイライト表示する
• 表を複数ページに分割する
• 水平スクロールを設置する

セルの幅を変える/TablePress 特徴

セルの幅を変えるなど、ソースコードを記述する方法は2つあります。高度なエディターまたはプラグインのオプションでセルの変更ができます。

• 高度なエディターを使う
• フロントエンドオプションのカスタムCSSを使う

高度なエディターを使った場合

フロントエンドオプションのカスタムCSSを使った場合

1. プラグインのオプションタブを開く
2. フロントエンドオプションへ
3. カスタムCSSに記述する

カスタムCSSへの記述方法

（例）テーブルID4のテーブル（表）の上から２番目、左から２番目のセルの背景色を変更した場合

.tablepress-id-4
.row-2 .column-2 {
background-color: #88ccef 

（例）テーブルID=4の表の2行目の背景色を変更した場合

.tablepress-id-4 .row-2 td {
background-color: #efefef;
}

（例）テーブルID=4の表の3列目の幅を140pxにした場合

.tablepress-id-4 .column-3 {
width: 140px;
} 

rowとcolumnの説明

• row 行
• column 列

.row-2 .column-2 の場合、row-2は2行目、column-2は2列目です。

テーマで表の指定がされている場合は、テーマの指示が優先されるので、「!important;」を記述します。

表 作表 テーブル TablePress

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

• https://wordpress.news-vouge.com/table-block/

http://wordpress.news-vouge.com/table-block

wordpress.news-vouge.com

TablePress プラグイン公式