<
スポンサーリンク

TablePressの特徴と使い方 WordPress

TablePress セルの指示の変更 WordPress
TablePress セルの指示の変更
この記事は約5分で読めます。

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

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

表を作る手順

  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
TablePressaaabbbcccddd
eeefffggghhhiii
jjjkkkmmm
  • kkkと右隣のセルが結合された
  • iiiとその下のセルが結合された

(注意)#rowspan#または#colspan#を入力したセルの内容は消えます。kkkの右隣のセルにはlllを記載していましたが消えています。

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

列内のセルの結合の手順

  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列目です。

TablePressaaabbbcccddd
eeefffggghhhiii
jjjkkklllmmmnnn

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

タイトルとURLをコピーしました