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

ブログ運営

TablePressとは、ブログ初心者でも簡単に表が作れるプラグインです。WPにはもとから表を作る機能は備わっていますが、どうにも素っ気なく、素人がカスタマイズするにはちと難しい(気がする)。

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

スポンサーリンク

TablePressをインストールする

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

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

TablePress の使い方

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

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

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

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

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

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

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

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

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

「テーブルのオプション」で、テーブルの見出し行にチェックしておくと、一行目を表の見出しとして設定できます。一行目を見出しにして別途コードを追加すると、先ほどのプレビュー画面の一行目のように色を変えたりもできます。

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

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

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

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

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

Tを小文字で入力した場合、以下のように表が表示されます。

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

便利なカスタマイズ

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

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

表全体に枠線を表示する

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

/* すべてのセルに枠線を付加・太字・上下中央寄せ・中央揃え */
.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;」
→「線の太さ(1px)・色(black)を指定」

「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;
 }

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

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

幅を調整する

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

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

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

指定していない5列目は、残りの10%が自動的に適用されます。また、3列目までしか指定しなかった場合でも、4列目・5列目は自動で適当に調整されるようになっています。パソコンとスマホでは見え方が異なるので、正直うまく調整するのは難しいんですよコレが。

まとめ

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

カスタマイズはうまく反映されなかったりすることも多く、初心者には手強いですが、思い通りにできたときは楽しいですよ。とりあえず、枠線などはあったほうが見やすいのは間違いないので、このコードをコピペしてプラグインのオプションに貼り付け、背景色を好きな色にしておくといいかと思います。

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

404 NOT FOUND | 金と共に生きぬ
お金に支配されない人生を送りたい
ブログ運営
スポンサーリンク
hideをフォローする
金と共に生きぬ

コメント