サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2023年9月11日 13:35
以下の質問の関係だと思うのですが、9/5にテーマの更新を行ったところ、
テーブルの罫線をセルごとに個別でCSSで設定していたものが反映されなくなり、全てサイトキーカラーに変わってしまいました。
どうすればCSSが優先されるようになるでしょうか。
テーブルを使ったカレンダーを作成しており、Cocoon Child: スタイルシート (style.css)に以下のように記述しています。
背景色は設定通りになりますが、罫線は全てサイトキーカラーが入ってしまう状況です。
.weekday{
background-color: #817DFB;
color:#FFFFFF;
text-align:center;
border-style: none;
}
.holiday{
background-color: #ffffff;
color:#ff0000;
text-align:center;
border-style: none;
}
.open01{
background-color: #817DFB;
color:#FFFFFF;
border:#FA7DB7 solid 2px;
text-align:center;
}
.open02{
background-color: #CAF9D2;
color:#000000;
border:#FA7DB7 solid 2px;
text-align:center;
}
※現在テスト中で非公開のサイトのため、URLは記述できません。
----------------------------------------------
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
親テーマスタイル：/wp-content/themes/cocoon-master/style.css
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン：6.3.1
PHPバージョン：8.0.27
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36
サーバーソフト：nginx/1.22.1
サーバープロトコル：HTTP/2.0
エンコーディング：gzip, deflate, br
言語：ja,en-US;q=0.9,en;q=0.8,de;q=0.7
----------------------------------------------
テーマ名：Cocoon
バージョン：2.6.5.1
カテゴリー数：7
タグ数：4
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：7225バイト
functions.phpサイズ：203バイト
----------------------------------------------
Gutenberg：1
AMP：0
PWA：0
Font Awesome：5
Auto Post Thumbnail：0
Retina：0
ホームイメージ：/wp-content/uploads/2023/04/twittercard.png
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
----------------------------------------------
利用中のプラグイン：
Category Order and Taxonomy Terms Order 1.7.9
Enable Media Replace 4.1.2
Flexible Table Block 3.0.1
Health Check & Troubleshooting 1.7.0
Smart Slider 3 3.5.1.19
WP Multibyte Patch 2.9
----------------------------------------------
Topic starter
2023年9月11日 15:54
投稿しておいてすみませんが、その後
それぞれのborder、border-styleのところに「!important」を追加したら意図した表示に戻りました。
いろいろなケースがあると思いますが、このような仕様として理解するしかないのでしょうか。
とりあえず未解決のままでご返答を待ちたいと思います。よろしくお願いいたします。
2023年9月11日 19:41
matsurikaさん
CSSのセレクタの指定が、単純なものですので、優先度で負けてしまっているのだと思われます。
もう少し詳細にセレクタを指定することで、優先度も上がるのではないかと思われます。
（実際の状態を確認できませんので、推測です）
ただ、ご提示いただいたCSSのセレクタのクラスは、matsurikaさんが独自に設定したものと思われます。
（「weekday」「holiday」「open01」「open02」のことです）
こちらから、HTMLの構造が分からず、具体的なご提示はできないです。
CSSは単独で何かが分かるものではないです。
HTMLと対です。
（独自に設定なさったものは、こちらからは分からないです）
実際の環境のご提示が難しいとのことですので・・・。
（本来ならば、テストページだけでもご提示いただければ・・・）
テーブル部分の全体のソースをご提示いただけますでしょうか。
（コードエディタにして表示される部分です、投稿内のテーブルですよね？）
元の状態も分かりませんので、できることならば、テーブルの以前・現状の状態が分かる画像の添付もありますと、助かります。
わいひら reacted
Topic starter
2023年9月12日 10:15
ｍｋ２さん、はるさん、どうもありがとうございます。
固定ページ内にFlexible Table Blockで作成したテーブルで、セルのCSSクラスにweekdayなど独自に設定したクラスを指定しています。
テーブル部分のソースは以下です。
<table class="has-fixed-layout"><tbody><tr><td class="sunday">日</td><td class="white">月</td><td class="white">火</td><td class="white">水</td><td class="white">木</td><td class="white">金</td><td class="white">土</td></tr><tr><td class="sunday"></td><td class="white"></td><td class="white"></td><td class="white"></td><td class="white"></td><td class="white"></td><td class="rest">1</td></tr><tr><td class="sunday">2</td><td class="open02">3</td><td class="open02">4</td><td class="open02">5</td><td class="open02">6</td><td class="rest">7</td><td class="rest">8</td></tr><tr><td class="sunday">9</td><td class="open01">10</td><td class="open01">11</td><td class="open01">12</td><td class="open01">13</td><td class="open01">14</td><td class="open03">15</td></tr><tr><td class="sunday">16</td><td class="weekday">17</td><td class="weekday">18</td><td class="weekday">19</td><td class="weekday">20</td><td class="weekday">21</td><td class="open03">22</td></tr><tr><td class="sunday">23</td><td class="weekday">24</td><td class="weekday">25</td><td class="weekday">26</td><td class="weekday">27</td><td class="weekday">28</td><td class="open03">29</td></tr><tr><td class="sunday">30</td><td class="white"></td><td class="white"></td><td class="white"></td><td class="white"></td><td class="white"></td><td class="white"></td></tr></tbody></table>
これでセルによって罫線をつけたり消したりできていたものが、全てサイトキーカラーの罫線が出るようになってしまって困っていました。
アップデート前までは問題なかったので、優先度が負けるようになってしまった原因が、最初の質問に書いたリンク先での修正の影響ではないかと思っています。
2023年9月12日 13:37
matsurikaさん
先に、はるさんも以下のようにお書きになっていますけれど。
他には「table td.open01」のようにセレクタを詳しめに書くと優先されるようになるかも知れません。
上記のようにセレクタに「table td」をつければ良いと思います。
（添付いただいたテーブルにはclass「holiday」はないようですので、その部分は未確認ですが同様かと思われます）
「table td」なしの状態。
（サイトキーカラーはオレンジにしました）
「table td」ありの状態。
固定ページ内にFlexible Table Blockで作成したテーブル
恐れ入りますが、ブロック制御部分のソースの添付がありませんでしたので、そこまでの確認は行っておりません。
（制御部分がありませんので、クラシックブロックになってしまいます）
アップデート前までは問題なかったので、優先度が負けるようになってしまった原因が、最初の質問に書いたリンク先での修正の影響ではないかと思っています。
はい、仰るとおりです。
不具合対応ですので、対応しない訳にはいかないかと思います。
下記の「不具合修正」の項番26・28辺りかと思います。
Cocoon 2.6.5公開。主に不具合修正
https://wp-cocoon.com/2-6-5/
2023年9月12日 16:47
matsurikaさん
CSSの優先度について、意識しないでOKということは、むしろ少ないかと思います。
WordPress本体のCSS、親テーマのCSS、スキンのCSS(ご利用の場合ですが)、プラグインのCSSなど、幾重にも重なった箇所に、適用することも多いかと思います。
基本の基の部分だと思いますので、検索などなさっておくと良いと思います。
解説なさっているサイトは複数あるかと思います。
本件は、解決ということで良かったです。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。