スポンサーリンク

TablePressの特徴と使い方 WordPress

TablePress セルの指示の変更WP プラグイン
TablePress セルの指示の変更
WP プラグイン
スポンサーリンク

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

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

表を作る手順

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

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

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

TablePress
TablePress すべてのテーブル
スポンサーリンク

テーブルの内容の記載

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

TablePress
TablePressの内容を記載
スポンサーリンク

投稿記事に表を掲載する

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

  • ショートコード [table id=2 /]
TablePress ショートコード
TablePress ショートコード
スポンサーリンク

ショートコードの変更

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

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

スポンサーリンク

行や列の追加・並べ替え

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

行や列の追加

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

行や列の並び替え

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

TablePress
TablePress ボタンで行や列の追加
スポンサーリンク

ソートする

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

スポンサーリンク

行を見出し・フッターにする

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

TablePress
TablePress 見出し
スポンサーリンク

リンクの挿入

簡単です。

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

画像の挿入

簡単です。

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

セルの結合(2つのセルを繋げる)

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

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

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

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

TablePress

列内のセルの結合の手順

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

行内のセルの結合の手順

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

文字の色や背景色を変更する

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

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

スポンサーリンク

テーブルの便利機能

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

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

テーブルのスタイルの変更

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

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

セルの幅を変える

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

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

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

TablePress セルの幅の変更
TablePress セルの幅の変更

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

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

カスタムCSSへの記述方法

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

.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;」を記述します。

SPONSOR
SPONSOR
スポンサーリンク
FOLLOW
WordPress を簡単に
タイトルとURLをコピーしました