テーブル作成「TablePress」使い方解説(枠、横線対処法)

      2017/05/19

 wordpressで表を作成する場合、テーブルを挿入すると枠線が表示されない、消えるということがあると思います。

PCで見た時はいいけどスマホで見た時に見切れて見えなくなるなんてこともあります。

そこで今回はテーブルサイズを自動調整してくれるwordpress用プラグインのTablepressの使い方と線表示、画像挿入、中心揃え、見出し背景色変更、幅指定など詳しく説明していきます。

Sponsored Link

Tablepressを使おう

wordpressのテーブルを使うとこんな症状が出てしまう場合ありませんか?

tablepress

編集画面ではきれいに出来ていても、プレビューでみたら右端が見切れていたり、スマホで見た時は、思いっきり切れちゃってます。さすがにこれはまずいですよね。対応方法はありますがいちいち面倒なのでもっと使い勝手のよいプラグインを今回はおすすめします。TablePressは読者側で並び替えや検索機能等が付けることが可能なので非常に便利です。

TablePressをダウンロードする

プラグイン→新規追加→TablePress検索→インストール→有効化

tablepress2

TablePressで表を作る

ダッシュボードのTablePress→新しいテーブル追加または、記事編集のテーブルアイコンをクリック

tablepress3

テーブル名、行(縦、row)列(横、column)を決め、テーブル追加*行列はここで設定しなくても後で「テーブルの操作」で増やす、減らす事は可能です。

tablepress4

文字を入れたら「変更を保存」を押す。

tablepress6

テーブル情報内右上のショートコードコピーしビュジュアルエディタ上でコードを貼付けて完了です。

tablepress5

 

TablePressのテーブルの枠線が表示されない場合

デフォルトで左側と下側の枠線が表示されないことがあります。その場合は

tablepress7

TablePressのプラグインオプション内CSSに下記のコードを張り付けて保存で表示されるでしょう。

TablePressで横線を入れたい場合

こちらはデフォルトで横線が入っていないので、入れたい場合は上記と同じようにプラグインオプションに下記のコードを貼付けていきます。

これで表示されるはずです。

TablePressで画像を挿入する方法

tablepress8

画像をいれたい場所をクリックしてから、テーブル操作内の画像を挿入をクリックし画像をアップロードまたは選びます。画像サイズを変更したい場合は、witdh、height数値を変更していきましょう。

TablePressで文字や画像を中心表示する方法

デフォルトでは全て左寄せですが、中心揃えしたい場合。

表の中の場合

中心寄せ表示させたい部分にセンタータグを表の中で書き込めば、表示されるようになります。

CSSの場合

一括で全て中心寄せする場合は下記を追加

TablePressで見出し背景色を変更する場合

下記コードをCSSに追加して下さい。

theadとは表の見出し部分に使用するコードです。

色はお好きなものを。

見出し背景色が反映しない場合

テーブルオプションの「テーブル見出し行」にチェックが入っているか確かめて下さい。

入っている場合は、先ほどのCSSの色番号の後ろに !important を追記して下さい。

background-color: #1E8CBE !important; ←こんな感じ。

テーブル幅を指定する方法

固定値を指定する方法もありますが、ウィンドウ幅が変わった時にレスポンシブになっている場合があるのでパーセンテージで振り分けする方法を推奨します。

↑上は6分割を%で分けた例です。こんな感じにしてビジュアルモード記事中に貼付けます

↑このコードのID数字とスラッシュの間にコピペして○部分振り分け率を書き換えて下さい。

100%になるように。100%じゃない場合は最後の行で余分or不足分が調整されます。

見出しの文字数でも表示バランスがずれます。

 - WordPress, プラグイン