賢威7.0クール版 テーブルタグのカスタマイズ方法



どうもスイクンです。サイトをご覧頂きありがとうございます。

今回は賢威7.0クール版の「テーブルタグのカスタマイズ方法」をご紹介します。

テーブルタグのカスタマイズ方法

2016y02m05d_014310182

賢威7.0クール版では、

外観>テーマ編集>base.cssの以下の部分コードが関係しています。

table{
width: 100%;
margin: 1em 0;
padding: 0;
border-top: 1px solid #c8d9d9;
border-left: 1px solid #c8d9d9;
}

th,
td{
padding: 1.25em 1em;
border-right: 1px solid #c8d9d9;
border-bottom: 1px solid #c8d9d9;
}

th{
background-color: #efffff;
font-weight: bold;
text-align: left;
}

これらのコードを詳しく見ていきましょう。

テーブルタグ外余白幅を変更する

変更前

2016y02m05d_015400158

以下の太文字部分を編集していきます。

table{
width: 100%;
margin: 1em 0;
padding: 0;
border-top: 1px solid #c8d9d9;
border-left: 1px solid #c8d9d9;
}

  • margin: 1em 0; は 最初の数値が上下、次の数値が左右の余白幅を示しています。

変更後

極端に変更してみてわかりやすくしています。

2016y02m05d_015833837

table{
width: 100%;
margin: 5em 0;
padding: 0;
border-top: 1px solid #c8d9d9;
border-left: 1px solid #c8d9d9;
}

テーブル内余白を変更する

以下の太文字部分を編集していきます。

th,
td{
padding: 1.25em 1em;
border-right: 1px solid #c8d9d9;
border-bottom: 1px solid #c8d9d9;
}

  • padding: 1.25em 1em; は 最初の数値が上下、次の数値が左右の余白幅を示しています。
  • padding: 1.25em 1em 1em 1em;のようにした場合、左から順に、上、右、下、左の余白幅を示しています。

th,
td{
padding: 0.25em 0.2em;
border-right: 1px solid #cfcfcf;
border-bottom: 1px solid #cfcfcf;
}

上のように変更した場合、余白が少なくなりスッキリした見た目になります。僕はこれくらいのスッキリ感を好むので、余白幅は小さめに設定しています。

2016y02m05d_014804831

ヘッダーセルの色変更

2016y02m05d_014804831

以下の太文字部分を編集していきます。

th{
background-color: #efffff;
font-weight: bold;
text-align: left;
}

次のように変更すると・・・

th{
background-color: #ffffcc;
font-weight: bold;
text-align: left;
}

こうなります。

2016y02m05d_015009649

ヘッダーセルのテキスト位置変更方法

中央にした場合

2016y02m05d_015144779

編集箇所は太文字部分

th{
background-color: #ffffcc;
font-weight: bold;
text-align: center;
}

  • left,center,right等に変更.それぞれ左、中央、右に配置されます。

 

特化型トレンドアフィリエイト レンタルサーバーの使い方
賢威6.2カスタマイズ WPの使い方
Twitter凍結基準まとめ 外注サービス比較


お名前
メール

コメントを残す

サブコンテンツ

このページの先頭へ