本サイトはアフィリエイト広告を利用しています

Cocoonのスキン:Silkテーブルデザイン見本

テーブルブロックを使って作る【表】のスタイル見本です。

Cocoonデフォルト

Cocoonでスキン「なし」の場合、テーブルのデフォルトスタイルはこちら↓

シンプルですが、1行ごとに背景色が付くデザインになっています。

Cocoon 【スキン:Silk】適用時のスタイル

スキンのSilkを適用している場合、テーブルのスタイルが追加されます。

[設定」オプションでヘッダー/フッターの表示・非表示が選択できます。

スタイル: デフォルト

Silkでは、テーブルのデフォルトが「格子のみ」のデザインになります。

ヘッダー/フッター なし

ヘッダー/フッターあり

表のセル幅を固定

下のサンプルは画像化したものなので分かりづらいですが、「表のセル幅を固定」にすると、テーブルはカラムいっぱいに広がり、列幅が等幅になります。

スタイル: ストライプ

ヘッダー/フッター なし

ヘッダー/フッター あり

表のセル幅を固定

スタイル: 中央寄せ

ヘッダー/フッター なし

ヘッダー/フッター あり

表のセル幅を固定

スタイル: 水平

ヘッダー/フッター なし

ヘッダー/フッター あり

表のセル幅を固定

スタイル: キーカラー

ヘッダー/フッター なし

ヘッダーやフッターがないと、スタイル「ストライプ」に罫線が表示されたタイプに見えます。

ヘッダー/フッター あり

ヘッダーがある場合は、ヘッダーにキーカラーの背景色が付きます

キーカラーとは、[Cocoon設定」→[全体」で設定したサイト全体のキーカラーのことです。

表のセル幅を固定

テーブルをカスタマイズする

スタイル「ストライプ」に罫線を表示する

ダッシュボード外観カスタマイズ追加CSS に下のコードを追加
.wp-block-table.is-style-stripes td, 
.wp-block-table.is-style-stripes th {
    border: 1px solid #e3e3e3;
}

スタイル「中央寄せ」の罫線カラーを変更する

ダッシュボード外観カスタマイズ追加CSS に下のコードを追加
.wp-block-table.is-style-center-cell td,
.wp-block-table.is-style-center-cell th {
    border-color: #e3e3e3;
}

スタイル「水平」の1列目テキストを中央揃えにする

ダッシュボード外観カスタマイズ追加CSS に下のコードを追加
.wp-block-table.is-style-horizon td:first-child {
    text-align: center;
}

スタイル「キーカラー」の罫線カラーを変更する

目立ちすぎる罫線を薄いグレーに色を変え、ヘッダー内の列の境界も見えやすくしたものです。

ダッシュボード外観カスタマイズ追加CSS に下のコードを追加
.wp-block-table.is-style-color-head td,
.wp-block-table.is-style-color-head th{
    border-color: #e3e3e3;
}
.wp-block-table.is-style-color-head th{
    border-width: 1px !important;
}
タイトルとURLをコピーしました