mixhost 表を作成に便利なプラグイン「TablePress」でのテーブル作成方法

9月 30, 2021 3月 2, 2022

AREXE

TablePressとは

TablePressとは、テーブルを簡単な操作と設定で便利な機能や閲覧ユーザー側で表示の調整を行うことができるプラグインで、

テーブルの作成方法はプラグインにてテーブル作成を行い、記事内にショートコードを埋め込むことで記事に表示することができます。

プラグインで作成したテーブルをショートコードの埋め込む方式で表示することができ頻繁に同じテーブルを使用する際に、

変更などの管理が一括で行え流用やデータ数が多いテーブルの作成でオススメのプラグインになります。

本記事では、mixhostでTablePressでのテーブルの作成方法と機能について紹介します。

主な特徴

・テーブルのページ分割表示
・文字列検索
・閲覧ユーザーによる表示件数変更や行の並び替え
・テーブルの水平スクロール
・CSV、XLS、XLSXの形式のファイルを使用したテーブル作成

導入方法

プラグイン導入

ダッシュボードより「①プラグイン欄：新規追加」→「②キーワードに【TablePress】と入力」→「③【今すぐインストール】」→「④【有効化】」の順に選択しプラグインの有効化しましょう。

テーブルの作成方法

新規作成

1．TablePressの設定画面へは、ダッシュボードから「①TablePress」を選択しましょう。

2．TablePressの設定画面から「②新規作成」をクリックしましょう。

３．作成するテーブルの名前と予想される行/列数を入力し「テーブルを追加」を選択し編集画面へ進みましょう。

ここで設定する内容は、後述する【テーブルの内容】及び【テーブルの操作】にて変更可能です。

テーブル情報

テーブル情報では、【新規追加】で入力した内容に加え「テーブルID」を指定することができ、

記事に挿入するショートコードをIDで使い分けますが自動で振られるので基本的には変更不要です。

テーブルの内容・テーブルの操作

テーブルの内容

テーブルの内容では、テーブルの「セル」のサイズ・行を詰める、後述する【テーブルの操作】にて操作する「セル」や「行/列」の指定を行うことができます。

※赤色になっている行/列はテーブルとして表示されない非表示状態を示します。

テーブルの操作

テーブルの操作では、以下のテーブルを操作するボタンが用意されておりこれを操作しテーブルのカスタマイズを行います。

項目内容

リンクを挿入

対象となるセルを【テーブルの内容】からクリックし「リンクの挿入/編集」ウィンドウで

URLと表示する文字列及び既存のコンテンツ（投稿記事など）を追加することができます。

画像を挿入

対象となるセルを【テーブルの内容】からクリックし「メディアライブラリ」から選択し

画像の挿入を行います。

高度なエディター

対象となるセルを【テーブルの内容】からクリックし「エディター」ウィンドウから

記事作成のようにショートコードやメディアの挿入が行えます。

セルを結合：同じ列内（rowspan）

セルを結合：同じ行内（colspan）

テーブルのセルは、複数の列または行にまたがるように配置することができます。

※隣接するセルを結合するには、該当するボタンを使用し結合後のセルに残す内容が含まれるセルの

下or右側となるセルを選択し「#colspan#」or「#rowspan#」を追加します。

選択した行：「表示」「非表示」

選択した行：「複製」「挿入」「削除」

【テーブルの内容】のチェックボックスをチェックした行に対して指定した操作を行います。

選択した列：「表示」「非表示」

選択した列：「複製」「挿入」「削除」

【テーブルの内容】のチェックボックスをチェックした列に対して指定した操作を行います。

行を追加

列を追加

テーブルの最下部もしくは右端に指定した行/列を追加します。

テーブルのオプション

テーブルのオプションでは、以下のようにテーブルの表示や上下に説明文を追加するなど設定でき基本的には変更不要です。

項目	内容
テーブルの見出し行	テーブルの最初の行をテーブル見出しに変更します。
テーブルのフッター行	テーブルの最後の行をテーブルフッターに変更します。
行の色を交互にする	連続する行の背景色を別々の色にします。
カーソルのある行をハイライト表示	マウスカーソルを行に合わせている間、行の背景色を変更してハイライト表示します。
テーブル名を表示	テーブル名をテーブルの上or下から選択して表示します。
テーブルの説明の表示	テーブルの説明をテーブルの上or下から選択して表示します。
追加のCSSクラス	スタイルの指定に使用する追加のCSSクラスを、ここに入力できます。

DataTables JavaScriptライブラリ機能

DataTables JavaScriptライブラリ機能は、「DataTablesを使用」を有効とすることで閲覧ユーザーがテーブルの並び替えや検索などが行えるようになり

データ数の多いテーブルを掲載する際にこの設定を有効にしておくのをオススメします。

項目	内容
DataTablesを使用	このチェックボックスにチェックを入れることで以下の設定が使用し可能となります。
並べ替え	テーブルの最初の行に「昇順」「降順」の切替を追加します。
検索/フィルター	検索ボックスを追加し対象の文字列がある行を表示できるようにします。
ページ送り	1ページに表示する行を指定した行数に制限します。
ページ分割の行数を変更	一度にテーブルで表示する行数を「1～10, 25, 50, 100」など閲覧ユーザーで変更をできるようにします。
情報	ページ分割などで現在テーブルに表示している件数などを表示します。
水平スクロール	水平スクロールを有効にし列数が多いテーブルを見やすくすることができます。
カスタムコマンド	カスタムコマンドに追加のCSSを入力することでテーブルデザインを変更することができます。