TablePressの使い方とカスタマイズ方法(初心者向け)

アイキャッチブログ運営

TablePressは、ブログ初心者でも簡単に表が作れるプラグインです。

WPにはもとから表を作る機能は備わっていますが、どうにも素っ気なく、素人がカスタマイズするにはちと難しい(気がする)。

ここではTablePressの基本的な使い方と、最初に設定しておくと便利なカスタマイズも紹介していきます。

スポンサーリンク

TablePressをインストールする

まずはTablePress をインストールします。

管理画面の「プラグイン」→「新規追加」から右上の検索欄に「TablePress」と入力し、表示されたプラグインをインストールして「有効化」するだけです。

TablePressのインストール

TablePress の使い方

有効化すると管理画面に「TablePress」と表示されるようになるので、「新しいテーブルを追加」を選択します。

Tablepressの新しいテーブル

テーブルの名前」は自分でわかるように、説明はなくてかまいません。「行数」と「列数」は後から追加・削除できるので、適当でも大丈夫です。

テーブルを追加をクリックすると、テーブルID とショートコードが表示されますが、ショートコードを投稿記事に入力すると、ここで作成した表が挿入できます。

Tablepressのショートコード

その下にある「テーブルの内容」にデータを入力していき、「テーブルの操作」で行数と列数の変更や、セルの結合なども行えます。

Tablepressのデータ入力

試しに、行の結合をしてみましょう。

セルを結合の右側にある「同じ行内(colspan)」をクリックすると、説明のようなものが出てくるので、OKを押します。

Tablepressのセル結合の説明

その後、結合したいセルを選択すると、「#colspan#」と入力されます。もちろん、自分で入力してもかまいません。

Tablepressのセル結合

これでプレビューを見てみると…

Tablepressのプレビュー

このような感じで、セルが結合されてアップルとなりました(?!)。簡単に見た目をよく編集できますね。

テーブルのオプション」では、テーブルの見出し行はチェックしておくと、一行目を表の見出しとして設定できます

一行目を見出しにしてコードを追加すると、先ほどのプレビュー画面の一行目のように色を変えたりもできます。

Tablepressのオプション設定

フッター・行の色やカーソルのある行をハイライトするは、どっちでもいいですね。見た目の問題なのでお好みに合わせてどうぞ。

Datatables Javascriptライブラリの機能」は、読者が表の並べ替えや検索機能などを使えるようにするかの設定です。

Tablepressのライブラリ機能の設定

一番上の「このテーブル以下で~」のチェックをはずすと、すべての機能が無効となります。これもお好みで設定するかどうかですね。

入力し終えたら、プレビューで最終確認し、間違いがなければ変更を保存をクリックし、出来上がりです。

投稿画面でショートコード[Table id=258/]と入力すれば、表を挿入できます。※Tは小文字ですが、ここでは表にならないよう大文字にしています。

見出し1見出し2見出し3見出し4見出し5
サンプルサンプルサンプルサンプルサンプル
サンプルサンプルサンプルサンプルパイナップル
サンプルサンプルアップルサンプル
サンプルサンプルサンプルサンプルサンプル

便利なカスタマイズ

Tablepressでは、ちょちょいとカスタマイズしてやると見た目もよくなり見やすさも向上します。

プラグインのオプション」をクリックすると、カスタムCSSという画面になるので、枠内にコードを入力していきます。※枠内をクリックすると枠が広がります。

Tablepressのカスタマイズ

表全体に枠線を表示する

先ほどの表ではセルごとに枠線がありましたが、初期設定では縦線がないシンプルなものなので、まず表全体に枠線を表示させ、他にもちょっとした調整をしていきます。

/* すべてのセルに枠線を付加・太字・上下中央寄せ・中央揃え */
.tablepress thead th,
.tablepress tbody tr:first-child td,
.tablepress tbody td,
.tablepress tfoot th {
 border: 1px solid black !important;
 vertical-align: middle;
 text-align: center;
}

/* 見出しの背景色 */
.tablepress thead th {
 background-color: #EEFFFF;
}

/* */」で囲んだ部分はメモ代わりとなり、装飾には反映されません。

まず、このコードでは上の5行までが、表全体に枠線を表示させるコードです。その下の2行は文字の位置を指定しています。

  • border: 1px solid black !important;→線の太さを指定
  • vertical-align: middle;→文字を上下中央寄せ(middle)する
  • text-align: center;→文字を左右中央揃え(center)する

「!important;」は他の記述よりもこちらを優先するという意味らしく、正直使いどころがよくわかりません。

色についてはこちらのサイトで好きな色のコードが調べられるので、線の色を変えたいときは参考にしてください。

「vertical-align」は文字の上下を調整するコードで、middleで中央寄せ・topで上寄せ・bottomで下寄せすることができます。

「text-align」は文字の左右を調整するコードで、centerで中央揃え・leftで左揃え・rightで右揃えです。

次に、「/* 見出しの背景色 */」以下のコードについて。

tablepress thead th」では、見出し部分の装飾を指定します。

  • background-color: #EEFFFF;→背景色を指定

最初にこれを記述しておけば、どの表でも枠線・上下左右中央揃え・見出しの背景色が統一されることになります。

もちろん、文字の大きさ(font-size: ○px;)なども指定できるので、好きなようにカスタマイズしてください!

特定のセルを装飾をする

作成した表によっては、特定のセルだけ文字・背景色を変えたい、右(左)寄せしたい!ということもあると思います。

特定のセルは、「#tablepress-○○ .row-○ .cloumn-○{}」で指定することができ、○にはテーブルのID、列番号・行番号を記入します。(rowとcloumnは順番通りにしないと反映されない)

例えば、先ほどの表で上から3列目(row-3)、左から5行目(column-5)のパイナップルを以下のように装飾します。

#tablepress-258 .row-3 .column-5 {
color: red;
background-color: lime;
text-align: left;
font-weight: bold;
}

個別セルの装飾

すると、このように赤文字(color: red)、背景色ライム(background-color: lime)、左寄せ(text-align: left;)、太字(text-weight: bold)となります。

もし同じ装飾を複数のセルにも適用させたい場合は、以下のようにします。

#tablepress-258 .row-3 .column-5,
#tablepress-258 .row-4 .column-3 {
color: red;
background-color: lime;
text-align: left;
font-weight: bold;
}

個別セルの装飾2

この場合、1行目のコードの最後は「,(コンマ)」になるのでご注意を。同様にしていけば、他のセルにも適用していきます。

装飾のパターンはなんぼでもあるので、この装飾にはどういうコードが必要なのかは少しずつ調べて覚えていきましょう。

幅を調整する

作成した表の幅を調整することもできます。

「table id=258 column_widths=”40%|15%|20%” / 」と記入すれば、左から指定した幅になります。※「」は[]にしてください。

見出し1見出し2見出し3見出し4見出し5
サンプルサンプルサンプルサンプルサンプル
サンプルサンプルサンプルサンプルパイナップル
サンプルサンプルアップルサンプル
サンプルサンプルサンプルサンプルサンプル

指定していない部分は適当に調整されるようですね。正直、パソコンとスマホでは見え方が異なるので、うまく調整するのは難しいです。

まとめ

Tablepressを使いこなせれば、読者にとって見やすく便利なサイトになり、Googleからも高評価を得られるかもしれません。

カスタマイズはうまく反映されなかったりすることも多く、初心者には手強いですが、思い通りにできたときは楽しいですよ。

こちらの記事でブログ初心者におすすめのプラグインを紹介しています。

【ブログ初心者向け】プラグインのおすすめ12選
ブログ初心者には自分でサイトをカスタマイズするのは難しいことです。しかし、プラグインを使えば便利な機能が簡単に使えるようになり、ブログの運営にとても役立つでしょう。ここでは初心者におすすめの12のプラグインを紹介します。

コメント