表をスタイリッシュにしてみる改良バージョン

カスタマイズは自己責任でやろう！

「自己責任」の意味がわからない方はこちら

この記事では
表をスタイリッシュにしてみたカスタマイズを説明。

CUSTOM　POINT

枠線を追加してみました。それと薄い背景の位置を変更できるようにしました。

こんな感じで変更

Before

ヘッダーセル
左	右
左	右
左	右
左	右

After

ヘッダーセル
左	右
左	右
左	右
左	右

ヘッダーセルなしタイプ

右	左
右	左
石	左
右	左

メモ

<table style=”border-collapse: collapse; width: 100%;” border=”1″>の部分を<table style=”border-radius: 0;”>に変更。これでヘッダーセルなしでもキレイに表示されます。

ひゃはっ！枠線が改良部分だよ！

このサイトの環境

テーマ

子テーマ

プラグイン

使うソフトなどはこちら

必須

WordPress

Google Chrome

推奨

File zilla

sublime text

ジャンプマップ

カスタマイズの準備

表の作成

ビジュアルエディタで表を作成していきます。

STEP 1

STEP 2

STEP 3

STEP 4 重要

ほいっほい！これで表の設定は終了です

追加方法	難しさ
追加CSS
テーマエディター
FTPソフト

はじめてカスタマイズをする方におすすめなのは追加CSSです。

ブログのカスタマイズを加速させる「追加CSS」の使い方

カスタマイズコードの追加

CSSコード（コメントあり）

/*--------------------------------------
  スタイリッシュな表
--------------------------------------*/
.entry-content table {/*表全体*/
    border: 2px solid #8ce6ec;/*枠線*/
    border-collapse: separate;/*表のスタイル*/
    border-spacing: 0;/*なんだっけ？*/
    border-radius: 15px 15px 0 0;/*角丸*/
    overflow: hidden;/*はみ出す部分は非表示*/
    text-align: center;/*文字を中央寄せ*/
}
.entry-content table th {/*ヘッダーセル*/
	color: white;/*文字の色*/
	font-size:1.1em;/*文字のサイズ*/
    background: #8ce6ec;/*背景色*/
    border-bottom: none;/*下線はなし*/
    padding: 10px 0;/*内側の余白*/
    letter-spacing: 0.15em;/*文字間隔*/
}
.entry-content table td {/*セル*/
	color:#414141;/*文字の色*/
	padding:15px 5px;/*内側の余白*/
  	border-bottom: 1px solid #8ce6ec;/*下線*/
}
.entry-content table tr:last-child td {/*最後の行だけ*/
  	border-bottom: none;/*下線なし*/
}
.entry-content table td:not(last-child) {/*最後のセルだけ除外*/
  	border-right: 1px solid #8ce6ec;/*右線*/
}
.entry-content td:last-child {/*最後のセル*/
    border-right: 0!important;/*右線削除*/
}
.entry-content table td:nth-child(1) {/*薄い背景　最初の縦列のみ*/
    background-color: #8ce6ec0d;/*背景色*/
}
/***** 薄い背景　別ver *****/
/*
.entry-content table td:nth-child(2) {
    background-color: #8ce6ec0d;
}
.entry-content table tr:nth-child(odd) {
    background-color: #8ce6ec0d;
}
.entry-content table tr:nth-child(even) {
    background-color: #8ce6ec0d;
}
*/

/*--------------------------------------

スタイリッシュな表

--------------------------------------*/

.entry-content table {/*表全体*/

border: 2px solid #8ce6ec;/*枠線*/

border-collapse: separate;/*表のスタイル*/

border-spacing: 0;/*なんだっけ？*/

border-radius: 15px 15px 0 0;/*角丸*/

overflow: hidden;/*はみ出す部分は非表示*/

text-align: center;/*文字を中央寄せ*/

}

.entry-content table th {/*ヘッダーセル*/

color: white;/*文字の色*/

font-size:1.1em;/*文字のサイズ*/

background: #8ce6ec;/*背景色*/

border-bottom: none;/*下線はなし*/

padding: 10px 0;/*内側の余白*/

letter-spacing: 0.15em;/*文字間隔*/

}

.entry-content table td {/*セル*/

color:#414141;/*文字の色*/

padding:15px 5px;/*内側の余白*/

border-bottom: 1px solid #8ce6ec;/*下線*/

}

.entry-content table tr:last-child td {/*最後の行だけ*/

border-bottom: none;/*下線なし*/

}

.entry-content table td:not(last-child) {/*最後のセルだけ除外*/

border-right: 1px solid #8ce6ec;/*右線*/

}

.entry-content td:last-child {/*最後のセル*/

border-right: 0!important;/*右線削除*/

}

.entry-content table td:nth-child(1) {/*薄い背景　最初の縦列のみ*/

background-color: #8ce6ec0d;/*背景色*/

}

/***** 薄い背景　別ver *****/

.entry-content table td:nth-child(2) {

background-color: #8ce6ec0d;

}

.entry-content table tr:nth-child(odd) {

background-color: #8ce6ec0d;

}

.entry-content table tr:nth-child(even) {

background-color: #8ce6ec0d;

}

CSSコード（コメントなし）

/*--------------------------------------
  スタイリッシュな表
--------------------------------------*/
.entry-content table {
    border: 2px solid #8ce6ec;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 15px 15px 0 0;
    overflow: hidden;
    text-align: center;
}
.entry-content table th {
	color: white;
	font-size:1.1em;
    background: #8ce6ec;
    border-bottom: none;
    padding: 10px 0;
    letter-spacing: 0.15em;
}
.entry-content table td {
	color:#414141;
	padding:15px 5px;
  	border-bottom: 1px solid #8ce6ec;
}
.entry-content table tr:last-child td {
  	border-bottom: none;
}
.entry-content table td:not(last-child) {
  	border-right: 1px solid #8ce6ec;
}
.entry-content td:last-child {
    border-right: 0!important;
}
.entry-content table td:nth-child(1) {
    background-color: #8ce6ec0d;
}
/***** 薄い背景　別ver *****/
/*
.entry-content table td:nth-child(2) {
    background-color: #8ce6ec0d;
}
.entry-content table tr:nth-child(odd) {
    background-color: #8ce6ec0d;
}
.entry-content table tr:nth-child(even) {
    background-color: #8ce6ec0d;
}
*/

/*--------------------------------------

スタイリッシュな表

--------------------------------------*/

.entry-content table {

border: 2px solid #8ce6ec;

border-collapse: separate;

border-spacing: 0;

border-radius: 15px 15px 0 0;

overflow: hidden;

text-align: center;

}

.entry-content table th {

color: white;

font-size:1.1em;

background: #8ce6ec;

border-bottom: none;

padding: 10px 0;

letter-spacing: 0.15em;

}

.entry-content table td {

color:#414141;

padding:15px 5px;

border-bottom: 1px solid #8ce6ec;

}

.entry-content table tr:last-child td {

border-bottom: none;

}

.entry-content table td:not(last-child) {

border-right: 1px solid #8ce6ec;

}

.entry-content td:last-child {

border-right: 0!important;

}

.entry-content table td:nth-child(1) {

background-color: #8ce6ec0d;

}

/***** 薄い背景　別ver *****/

.entry-content table td:nth-child(2) {

background-color: #8ce6ec0d;

}

.entry-content table tr:nth-child(odd) {

background-color: #8ce6ec0d;

}

.entry-content table tr:nth-child(even) {

background-color: #8ce6ec0d;

}

CSSコード（短縮）

.entry-content table {border: 2px solid #8ce6ec;border-collapse: separate;border-spacing: 0;border-radius: 15px 15px 0 0;overflow: hidden;text-align: center;}
.entry-content table th {color: white;font-size:1.1em;background: #8ce6ec;border-bottom: none;padding: 10px 0;letter-spacing: 0.15em;}
.entry-content table td {color:#414141;padding:15px 5px;border-bottom: 1px solid #8ce6ec;}
.entry-content table tr:last-child td {border-bottom: none;}
.entry-content table td:not(last-child) {border-right: 1px solid #8ce6ec;}
.entry-content td:last-child {border-right: 0!important;}
.entry-content table td:nth-child(1) {background-color: #8ce6ec0d;}

.entry-content table {border: 2px solid #8ce6ec;border-collapse: separate;border-spacing: 0;border-radius: 15px 15px 0 0;overflow: hidden;text-align: center;}