こんにちはー福助です。
この記事では
TablePressで作成したテーブル(表)の書式設定方法と
コピペ用CSSのご紹介をしております。
TablePressで作成したテーブル(表)の書式設定方法
TablePressでテーブル(表)を作成するのは非常に簡単です。
しかし唯一の弱点といって良いのが書式設定はCSSで記述する必要があるという所です。
この「CSS」って分かります？
(私は分かりません。w)
そんな方達の為にコピペするだけで使用できる様に
CSSコードをご紹介させて頂きます。
環境のご説明
今回ご説明するこのサイトの環境ですが下記の通りとなります。
| 項目 | ソフトウェア | テーマ | サーバ | サイト名 | 管理人 |
|---|---|---|---|---|---|
| 内容 | Wordpress (ワードプレス) | Cocoon (コクーン) | Xserver | ボッチSEのパドリングブログ | 福助 |
テーブル(表)の書式設定とは？
テーブル(表)の書式設定をすると次の設定を変更する事が可能です。
・文字の配置(左揃え・中央揃え・右揃え)
・文字色
・罫線
・背景色
正直あまりここにこだわって時間を割く必要は無いと思いますので
基本的な所のCSSコードをご紹介させて頂きます。
TablePressの書式設定としてCSSを記述する方法
TablePressの書式設定をする方法です。
冒頭からの通りCSSで記述する必要があります。
- 手順①「TablePress」⇒「プラグインのオプション」
左側メニュー項目からTablePressを選択し、
TablePress画面内にありますプラグインのオプションタブを選択します。 - 手順②カスタムCSSの所にCSSを記述
カスタムCSSの項目がありますのでここにCSSを記述していきます。
記述するCSSはこのあとご紹介する内容をコピペして下さい。変更を保存を選択し完了です。
TablePress書式設定コピペ用CSS
TablePress書式設定コピペ用CSSご紹介
基本的な書式設定用のCSSが下記となります。
一度このまま先ほどのカスタムCSSの箇所にコピペしてみて下さい。
.tablepress thead th {
color: #FFFFFF; /* 文字色 */
background-color: #6495ED; /* 背景色 */
}
/* 【基本設定】 */
.tablepress thead th,
.tablepress tbody tr:first-child td,
.tablepress tbody td,
.tablepress tfoot th {
border: 1px solid #ccc; /* 縦罫線 */
vertical-align: middle; /* 上下中央揃え */
text-align: center; /* 中央揃え */
}
※少し設定を変えたい場合は下記参考にして下さい。
CSS解説_見出し書式：文字色・背景色
/* 【見出し書式】 */
.tablepress thead th {
color: #FFFFFF; /* 文字色 */
background-color: #6495ED; /* 背景色 */
}
テーブル(表)の見出し(1行目)の書式設定です。
「文字色」「背景色」の色コードの部分(#*****)
を他のコードに変更すればお好みの色に変更できますので試してみて下さい。
カラーコード一覧は下記サイトの様にまとまっているサイトがありますので参考にして下さい。
CSS解説_基本設定：縦の罫線を追加
/* 【基本設定】 */
.tablepress thead th,
.tablepress tbody tr:first-child td,
.tablepress tbody td,
.tablepress tfoot th {
border: 1px solid #ccc; /* 縦罫線 */
vertical-align: middle; /* 上下中央揃え */
text-align: center; /* 中央揃え */
}
TablePressのデフォルトでは縦の罫線がありませんので
「border」のCSS記述の所で縦の罫線を入れてます。
(不要でしたらこの行を消して下さい。)
CSS解説_基本設定：文字の配置位置の変更
/* 【基本設定】 */
.tablepress thead th,
.tablepress tbody tr:first-child td,
.tablepress tbody td,
.tablepress tfoot th {
border: 1px solid #ccc; /* 縦罫線 */
vertical-align: middle; /* 上下中央揃え */
text-align: center; /* 中央揃え */
}
「vertical-align」のCSSコードで「middle」を指定し文字を上下中央揃えに。
上端揃え：top
上下中央揃え：middle
下端揃え：bottom
「text-align」のCSSコードでcenterを指定し文字を中央揃えに。
左揃え：left
中央揃え：center
右揃え：right
まとめ
TablePressで作成したテーブル(表)の書式設定方法とコピペ用CSSのご紹介
/* 【見出し書式】 */
.tablepress thead th {
color: #FFFFFF; /* 文字色 */
background-color: #6495ED; /* 背景色 */
}
/* 【基本設定】 */
.tablepress thead th,
.tablepress tbody tr:first-child td,
.tablepress tbody td,
.tablepress tfoot th {
border: 1px solid #ccc; /* 縦罫線 */
vertical-align: middle; /* 上下中央揃え */
text-align: center; /* 中央揃え */
}
やり出すと色々こだわりたくなりますがまずはここでご紹介したぐらいに留めておいた方が良いと思います。
理由は簡単で時間がかかる上に焦って書式設定を色々設定しても
後から見返した時にもっと良い案が浮かぶからです。
それなら今は簡単な色ぐらいにしておいて後から色々変えていきましょう。
時間は有効的に。
最後までお読みいただきありがとうございました。
コメント