WordPress[Table Press] 表を作成してブログに表示

去年、WordPressで表（テーブル）を作った時に導入したプラグイン「Tabel Press」の事を思い出したので注意点も含め備忘録として残したいと思います。下記のような見栄えの良い表が簡単に作成出来るプラグインです。

管理画面のダッシュボードからプラグイン　→　新規追加　→　「Table Press」と検索してインストール後、「プラグインを有効化する」を忘れずにクリック。インストール後、管理画面のサイドバーに「Table Press」のメニューが表示されているはずです。Table Pressを導入した時は日本語化されていませんでしたが、今は日本語で表示されるので大分わかりやすくなりました。

「Table Press」のメニューをクリックすると「こんにちは。TablePressプラグインを開発したTobiasです」のページが開きます。上段の「新しく追加」から表（テーブル）を作成していきます。使い方は簡単です。テーブルの名前や説明、行数と列数を決めて下のテーブルを追加で作成テーブルが作成されます。自分はこんな風に作っていました。

最近はまったく更新していないトライアスロン関係のブログで「Table Press」で作成した戦歴を書いた表です。ブログへの表示は投稿ページに

	
Facebook Page URL
ご自身のFacebookページのアドレスを張ります。
Width	
サイドバーに設置した時のBoxの幅設定です。ブログのサイドバーの幅が３００なので３００にしました。


	
Height
サイドバーに設置した時のBoxの高さ設定です。３００ぐらいに設定しています。
Color Scheme
変更してみると分かるのですが、ボックスの色を明るい色にするか暗い色にするかの設定です。ブログに合わせて設定してみてください。


	
Show Friends Faces
友達の写真を表示させますか？　顔など見えた方が良いのでチェックしました。
Show Header
ボックス上部の「Facebookもチェック」のバーを表示するかしないかの設定です。自分のブログではチェックしてません。


	
Show Posts
Facebookページで投稿しているポストを表示させますか？　これは必要なかったのでチェックしませんでした。
Show Border
ボックスに囲み線を入れるか入れないかの設定です。チェックしました。

と書くだけでそこにテーブルが表示されます。テーブルに変更を加えるときはこの今テーブルを作成しているページにて変更します。テーブルオプションなどは現状こんな感じです。

では、完成したテーブルをブログに表示させてみましょう。

あれ、なんか左側の線と下の線が消えてしまっています。原因を調べたらどうやらテーマのCSS（デザイン）に影響を受けてしまって表示がおかしくなっているみたいです。これを修正します。先程の「Table Press」のページに行って、上部のメニュー左下「プラグインのオプション」にいきます。

ここに「フロントエンド　オプション」があり、カスタムCSSを読み込ませる設定が出来るようになっています。「以下の「カスタムCSS」コマンドを読み込み、テーブルのスタイルを変更：」にチェックをいれて下記のコードをコピペしてください。

/* すべてのセルに枠線を付加する */
.tablepress thead th,
.tablepress tbody tr:first-child td,
.tablepress tbody td,
.tablepress tfoot th {
	border: 1px solid black !important;
}

コピペしたあとページの一番下の「変更を保存」を忘れずにしてください。確認してみましょう。

これで最初完成図で紹介したような見た目になりました。読んで頂いてありがとうございました。