【SANGOを自分でカスタマイズ】メリハリのある表にカスタマイズする

Warning: Undefined array key 2 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 15

Warning: Undefined array key 3 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 18

Warning: Undefined array key 4 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 21

Warning: Undefined array key 2 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 27

Warning: Undefined array key 3 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 30

Warning: Undefined array key 4 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 33
[kjk_temp id=”2523″]

この記事では
表をカスタマイズした方法を説明。

表ってデフォルトのままだと良くないの？

ハハハ、このカスタマイズは完全に自己満足だよ！

自己満足で終わるくらいなら記事にしないとね（笑）

こんな感じに変更

Before

After

ベーシックプラン
ユーザー	普通の人
価格	1,000円
契約期間	1年

線を細くして、色にメリハリを付けただけでもぜんぜん違う！

[kjk_temp id=”3368″]

表をカスタマイズする

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

まずはビジュアルエディタから表を作成しましょう。ヘッダーセルを使用する際は、その行（または列）を選択した状態で表＞セル＞セルのプロパティ＞一般＞セルの種類＞ヘッダーセルを選択してください。

注意

今回は横の行でヘッダーセルを使用する際のカスタマイズです。縦でヘッダーセルを使用する際はstyle.cssの「丸み」の部分を削除する必要があります。

[kjk_temp id=”3370″]

style.cssにコードを追加する

style.css（追加するコード：表のデザイン）

/*--------------------------------------
表のデザインを変更
--------------------------------------*/
/*--- 表全体(table) ---*/
.entry-content table {
    border-bottom: 1px solid #e6e6e6; /* 表の一番下の線 */
    border-top: none;
    border-left: none;
    border-right: none;
}
/*--- ヘッダーセル(th) ---*/
.entry-content th {
    border-radius: 10px 10px 0 0; /* 丸み（※ヘッダーセルが縦の場合は削除）*/
    padding: 1.2em .7em; /* 余白（上下　左右） */
    background-color: #424242; /* 背景色 */
    color: #fff; /* 文字の色 */
    letter-spacing: 0.15em; /* 文字の間隔 */
    text-align: center; /* 中央揃え */
    border: none; /* 線削除 */
}
/*--- 行（横方向）(tr) ---*/
.entry-content tr {
    text-align:center; /* 中央揃え */
}
.entry-content tr:not(:last-child) { /* 最後の行以外に適用 */
    border-bottom: 1px solid #e6e6e6; /* 下線 */
}
/*--- ヘッダーセル以外のセル(td) ---*/
.entry-content td {
    padding: 1em 2em; /* 余白（上下　左右） */
    border:none; /* 線を削除 */
}
.entry-content td:last-child { /* 最後のセルのみ適用 */
    border-right: 1px solid #e6e6e6; /* 右線 */
}
.entry-content td:not(last-child) { /* 最後のセル以外に適用 */
    border-left: 1px solid #e6e6e6; /* 左線 */
}