表の作り方から色の変更までテーブルのデザイン方法を解説

ワードプレス テーブル

どーも、ダンゴです( ̄▽ ̄)ノ

今回は、読者さんからWordPress(ワードプレス)での
表の作り方や色の変え方などの質問をいただいたので、
僕のやり方を書いてみたいと思います(^^)

▼目次(クリックで見出しへジャンプ)

表の作り方

僕は表はExcel(エクセル)で作ってます。

エクセルは有料のソフトになりますが、
マイクロソフトアカウントを作れば、
「エクセルオンライン」で無料で使うことができます(*^^)b

Excel Online

購入する場合はアマゾンや家電量販店で
15000円ほどで買えます(*^^)b

Microsoft Excel 2016 [Windows版]

エクセル 表

そしたら任意の数値をエクセルに打ち込んでいきます(^^)

2016年の1~5月のネット収入を載せていなかったので、
今回は上半期の収入合計を表にしてみました。

エクセル コピー

表ができたら
それをコピーします。

コピーの仕方は
表の部分をマウスで選択して、
「CTRL+C」を押せばOKです(*^^)b
Macの場合は「command+C」

エクセル HTML変換

そしたら「エクセルシートをHTMLテーブルに変換しちゃう君」
というサイトへいき、コピーしたものを貼り付けます。

エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)

エクセル HTML変換

「CSSを出力しない」にチェックを入れて、
「変換」をクリック。

エクセル HTMLコード

そしたらHTMLに変換されるので、
それをコピーしてブログに貼れば、
テーブルとして表示されます\(^o^)/

表のデザインを変更する

上記の方法でとりあえずテーブルは作れるんですが、
デフォルトのままだと何だか味気ない感じになっちゃうので、
僕は表に色をつけました(^^)

色の付け方はいろいろありますが、
CSSで指定するのがコードもすっきりするので
オススメ
です(*^^)b


/*テーブルの基本設定*/
#main-contents table{
margin-bottom: 1.5em; /*表の下の間隔*/
text-align: center; /*文字を中央寄せにする*/
padding: 0; /*表の中の間隔*/
border-top: 1px solid #959595; /*上の線の太さ・色*/
border-left: 1px solid #959595; /*左の線の太さ・色*/
box-shadow: 2px 2px 2px grey; /*表に影をつける*/
}

#main-contents th,
#main-contents td{
padding: 0.5em; /*表の中の間隔*/
border-right: 1px solid #959595; /*右の線の太さ・色*/
border-bottom: 1px solid #959595; /*下の線の太さ・色*/
}

/*テーブルの行(=横の部分)*/
#main-contents table.t-skyblue thead th{
background:#4169e1; /*背景の色*/
color:#fff; /*文字の色*/
}

/*テーブルの列(=縦の部分)*/
#main-contents table.t-skyblue th{
background:#f0f8ff; /*背景の色*/
color:#000; /*文字の色*/
}

僕の場合はこんな感じで指定してます(^^)

「賢威」というテンプレートを使っているので、
他のテンプレートだと微妙に違うと思いますが、
「#main-contents」の部分を買えてもらえれば効くと思います。

このように指定しておいて、
さっきのテーブルのHTMLコードを貼るときに、1番上を

<table class="t-skyblue">

って感じにしてやれば、
CSSに「t-skyblue」で指定したデザインが反映されます(*^^)b

実際にテーブルを挿入してみると
こんな感じ( ̄▽ ̄)ノ

ネット収入
1月 103192
2月 94505
3月 109193
4月 133817
5月 86382
6月 95614
合計 622703

表にすると見やすくなったりするので、
よければやってみてください(*^^*)

解説・補足動画


動画も撮ったので、
文字だけだとわかりにくい場合は参考にしてください(*^^*)

良い記事だと思ったらシェアしていただけると喜びます^^

質問や感想などお気軽にどうぞ^^

サブコンテンツ

このページの先頭へ