【CSSコピペ】TablePressで作成したテーブル(表)の書式設定方法

サイト構築

こんにちはー福助です。

この記事では

TablePressで作成したテーブル(表)の書式設定方法と
コピペ用CSSのご紹介をしております。

プラグイン「TablePress」のインストール方法とテーブル(表)作成方法は
下記リンク先記事にまとめてありますので参考にして下さい。
https://paddling-blog.com/%e3%83%86%e3%83%bc%e3%83%96%e3%83%ab%e8%a1%a8%e4%bd%9c%e6%88%90%e3%81%ae%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%80%8cTablePress%e3%80%8d%e3%81%ae%e3%82%a4%e3%83%b3%e3%82%b9%e3%83%88
スポンサーリンク

TablePressで作成したテーブル(表)の書式設定方法

TablePressテーブル(表)を作成するのは非常に簡単です。
しかし唯一の弱点といって良いのが書式設定はCSSで記述する必要があるという所です。

この「CSS」って分かります?

(私は分かりません。w)

そんな方達の為にコピペするだけで使用できる様に
CSSコードをご紹介させて頂きます。

環境のご説明

今回ご説明するこのサイトの環境ですが下記の通りとなります。

項目ソフトウェアテーマサーバサイト名管理人
内容Wordpress
(ワードプレス)
Cocoon
(コクーン)
XserverボッチSEのパドリングブログ福助

テーブル(表)の書式設定とは?

テーブル(表)の書式設定をすると次の設定を変更する事が可能です。

■書式設定で可能な事
・文字の配置(左揃え・中央揃え・右揃え)
・文字色
・罫線
・背景色

正直あまりここにこだわって時間を割く必要は無いと思いますので
基本的な所のCSSコードをご紹介させて頂きます。

TablePressの書式設定として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カラーコード一覧参考サイトリンク(原色大辞典)

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のご紹介
■コピペ用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; /* 中央揃え */
}

やり出すと色々こだわりたくなりますがまずはここでご紹介したぐらいに留めておいた方が良いと思います。

理由は簡単で時間がかかる上に焦って書式設定を色々設定しても
後から見返した時にもっと良い案が浮かぶからです。

それなら今は簡単な色ぐらいにしておいて後から色々変えていきましょう

時間は有効的に。

最後までお読みいただきありがとうございました。

コメント

タイトルとURLをコピーしました