【スポンサーリンク】

[Cocoon] 表のデフォルトの枠線が黒になっている(style.min.css)

[Cocoon] 表のデフォルトの枠線が黒になっている(style.min.css)

公開したブログ内の表の枠の色が、なぜか黒に変わっていました。

原因は、「style.min.css」。
この中に表(table)の枠線の色のスタイルがあるのですが、これが Cocoonのスタイルと競合しているのです。

\記事が役に立ったらシェアしてね/
【スポンサーリンク】

1. サイトの表の枠の色がおかしい?

表の枠の色が、WordPressの編集画面ではオレンジなのに、公開すると黒になっていました。

サイトの表の枠の色がおかしい?

どうも、デフォルトの色に戻ってしまっているようです。

2. Cocoonの表の枠の色

Cocoonでは、テーマで選んだ色(サイトキーカラー)がスタイルでまとめて指定されています。

Cocoonの表の枠の色

ブラウザで表のスタイルを検証してみます。

Cocoonの表の枠の色

表の枠の色も、tableの td要素、th要素のスタイルで指定されています。

table th,table td,.page-numbers,.page-numbers.dots,.tagcloud a,.list.ecb-entry-border .entry-card-wrap,.related-entries.recb-entry-border .related-entry-card-wrap,.carousel .a-wrap,.pager-post-navi.post-navi-border a.a-wrap,.article .toc,.a-wrap .blogcard,.author-box,.comment-reply-link,.ranking-item {
   border-color: rgba(255,172,5,.5)
}

ところが、その上に表の枠に関するスタイルが他にもあるんです。

.wp-block-table td,.wp-block-table th {
    border: 1px solid;
    padding: .5em
}

「style.min.css」のスタイルに border があるため、border-colorが上書きされています。

tdとthを限定する要素が、tableと.wp-block-tableで異なるため、style.min.cssのスタイルが優先されています。

3. 「style.min.css」とは?

style.min.css」は、「Gutenberg(ブロック編集画面)」の文字スタイル(中心揃えなど)を反映させるCSSです。
WordPressの「wp-includes」の中に含まれています。

./wp-includes/css/dist/block-library/style.min.css?ver=6.1.1&fver=20221115082705
「style.min.css」とは?

WordPress 5.0から標準搭載されるようになっていて、読み込まれています。

4. style.cssで上書きした

さしあたり、style.css に上書きするスタイルを追加しました。

.wp-block-table td,.wp-block-table th {
  border-color: rgba(255,172,5,.5);
}
style.cssで上書きした

色を決め打ちしているのが不格好ですが、とりあえずは解決です。

QRコードを読み込むと、関連記事を確認できます。

[Cocoon] 表のデフォルトの枠線が黒になっている(style.min.css)
【スポンサーリンク】
タイトルとURLをコピーしました