モッピー!お金がたまるポイントサイト

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

2018/09/22

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

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

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

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

[adsense]

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

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

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

Facebook Page URLご自身のFacebookページのアドレスを張ります。Width サイドバーに設置した時のBoxの幅設定です。ブログのサイドバーの幅が300なので300にしました。
Heightサイドバーに設置した時のBoxの高さ設定です。300ぐらいに設定しています。Color Scheme変更してみると分かるのですが、ボックスの色を明るい色にするか暗い色にするかの設定です。ブログに合わせて設定してみてください。
Show Friends Faces友達の写真を表示させますか? 顔など見えた方が良いのでチェックしました。Show Headerボックス上部の「Facebookもチェック」のバーを表示するかしないかの設定です。自分のブログではチェックしてません。
Show PostsFacebookページで投稿しているポストを表示させますか? これは必要なかったのでチェックしませんでした。Show Borderボックスに囲み線を入れるか入れないかの設定です。チェックしました。

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

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

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

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

[adsense]

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

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

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

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

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

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

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

[adsense]

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

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

この記事を書いた人

ディーエムガジェット 

非IT系エンジニア。日々の出来事や自分の好きな物などの紹介をメインに色々発信していきます。2012 年から禁煙を開始して68キロぐらいだった体重が2012年6月には75キロまで増加。ヤバい!と感じてダイエットを開始。一回65キロまで落としましたが、2018年8月現在また72キロまで増加。こんな身体でもトライアスロンに出場予定「プロフィールはこちら

このエントリーをはてなブックマークに追加

WORDPRESS

Posted by dmgadget