【STINGER3】 Excel to HTMLでテーブルがきれいに表示されるようcssを編集してみた

公開日： 2016/02/23 : 最終更新日：2016/03/22 WEBツール, WordPress

先日下記の記事をリライトしました。
蛍光灯が点きにくくなったらグローランプを交換しよう

その際、一部を表組みに変更したのですが（下記）、

Excel to HTMLというツールを使用しました。参考にさせて頂いたのは鈴木こあらさんの記事です。

ただ、本ブログのテンプレート、STINGER3ではデフォルトできれいに表示されなかったので、cssを一部修正しました。その方法をご紹介します。

STINGER3でテーブルがきれいに表示されるようにcssを編集する

PC用のcss「style.css」とスマホ用のcss「smart.css」の2つを修正します。

まずはPC用の「style.css」の1214行目あたりを以下のように書き換えます。
※作業前に必ずバックアップを取るようにしてください。

table tr td {
	padding: 10px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: #999;
	border-left-color: #999;
	font-size: 14px;
	line-height: 25px;
}

table th {
	background-color: #eee;
	border-top-width: 1px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-left-style: solid;
	border-bottom-style: solid;
	border-top-color: #999;
	border-right-color: #999;
	border-left-color: #999;
	border-bottom-color: #999;
}

#main .post table {
	border-top-width: 1px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-left-style: solid;
	border-top-color: #999;
	border-right-color: #999;
	border-left-color: #999;
	color: #333;
	border-collapse: collapse;
}

table tr td {

padding: 10px;

border-bottom-width: 1px;

border-left-width: 1px;

border-bottom-style: solid;

border-left-style: solid;

border-bottom-color: #999;

border-left-color: #999;

font-size: 14px;

line-height: 25px;

}

table th {

background-color: #eee;

border-top-width: 1px;

border-right-width: 1px;

border-left-width: 1px;

border-bottom-width: 1px;

border-top-style: solid;

border-right-style: solid;

border-left-style: solid;

border-bottom-style: solid;

border-top-color: #999;

border-right-color: #999;

border-left-color: #999;

border-bottom-color: #999;

}

#main .post table {

border-top-width: 1px;

border-right-width: 1px;

border-left-width: 1px;

border-top-style: solid;

border-right-style: solid;

border-left-style: solid;

border-top-color: #999;

border-right-color: #999;

border-left-color: #999;

color: #333;

border-collapse: collapse;

}

これでPC用はOK。
続いてスマホ用の「smart.css」の55行目を以下のように変更。

.kizi img, .wp-caption, .kizi video, .kizi object, .kizi iframe {
	margin-bottom: 20px;
	height: auto;
	max-width: 100%!important;
}

.kizi img, .wp-caption, .kizi video, .kizi object, .kizi iframe {

margin-bottom: 20px;

height: auto;

max-width: 100%!important;

}

そして最下部に以下の記述を追記してください。

.kizi table {
	margin-bottom: 20px;
	height: auto;
	max-width: 100%!important;
	color: #333;
	border-collapse: collapse;
}

.kizi table tr td {
	padding: 10px;
	border-bottom-width: 1px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-bottom-style: solid;
	border-right-style: solid;
	border-left-style: solid;
	border-bottom-color: #999;
	border-right-color: #999;
	border-left-color: #999;
	font-size: 14px;
	line-height: 25px;
	color: #333;
	border-collapse: collapse;
}

.kizi table th {
	background-color: #eee;
	border-top-width: 1px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-left-style: solid;
	border-bottom-style: solid;
	border-top-color: #999;
	border-right-color: #999;
	border-left-color: #999;
	border-bottom-color: #999;
}