サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2023年8月31日 13:49
----------------------------------------------
テーマ名：Cocoon
バージョン：2.6.4.9
カテゴリー数：6
タグ数：15
ユーザー数：1
----------------------------------------------
以下の投稿から気になる点があり。
https://wp-cocoon.com/community/postid/73492/
●現象
気になる点が2つあり。
- 「テーブル」ブロックのスタイルで「デフォルト」「ストライプ」があり。
どちらもストライプ表示される。 - 「ストライプ」を指定すると、figureのborder-bottomに線が引かれる。
●原因
- 従来から「デフォルト」はストライプ表示であり、その旨をマニュアルに記す必要があるのでは？
- block-library/style.min.cssで、border-bottomが定義されている。（意味不明？）
わいひら reacted
2023年8月31日 15:46
私からも 1 点あります。
Cocoon 設定 > 全体の「サイトキーカラー」を設定した場合、投稿ページなどの編集画面では <td> と <th> の border-color にサイトキーカラーが反映されています。一方、実際のページでは、CSS の優先度が負けてしまっていて反映されていません。
これは私の環境だけでしょうか？
わいひら reacted
2023年9月1日 11:15
従来から「デフォルト」はストライプ表示であり、その旨をマニュアルに記す必要があるのでは？
これは悩ましいところですね。
デフォルトのストライプをなくしても良いような気がしますが、デフォルトのデザインを当てにしている人や、クラシックエディターを利用している人には必要かもしれませんし。
マニュアルに確認してもどこに書けば良いんだろう。
良い場所がないか探してみます。
block-library/style.min.cssで、border-bottomが定義されている。（意味不明？）
これはコアファイルがスタイリングしている部分？だと思うので、僕も預かり知らぬところです。
僕も意味不明です。僕の環境ではそれほどスタイルには影響を与えていないようにも見えます。
2023年9月1日 11:16
Cocoon 設定 > 全体の「サイトキーカラー」を設定した場合、投稿ページなどの編集画面では <td> と <th> の border-color にサイトキーカラーが反映されています。一方、実際のページでは、CSS の優先度が負けてしまっていて反映されていません。
これは私の環境だけでしょうか？
Akiraさんの環境では何かスキンを利用されていますか？
僕の環境では添付画像のスタイルが適用されていて公開ページでも色がついているようです。
よろしければデベロッパーツールのCSS状態のスクリーンショットいただいてよろしいでしょうか。
2023年9月1日 16:22
申し訳ないです。画像を添付しておらず分かりにくいですね。
背景色ではなく、枠線の色です。スキンは何も使っていません。
添付画像は、実際のページの CSS の状況です。border: 1px solid が 適用されています。この border は wp-includes/css/dist/block-library/style.min.css に書かれています。
一方、編集画面では、「サイトキーカラー」が適用されます。
わいひら reacted
2023年9月1日 20:01
すいません。
しっかりとborder-colorと書かれているのに完全に背景色と思い込んでいました。
お手数おかけして申し訳ありません。。
不具合を確認いたしました。
.wp-block-table td, .wp-block-table thに勝るようにCSSの詳細度を上げておきました。
https://github.com/xserver-inc/cocoon/blob/4844eb432afde9c71c4cff510f83b73905d2b1e6/tmp/css-custom.php#L54-L55
トピックスターター 2023年9月2日 02:52
----------------------------------------------
テーマ名：Cocoon
バージョン：2.6.4.12
カテゴリー数：6
タグ数：15
ユーザー数：1
----------------------------------------------
2件あります。
●キーカラー設定の場合
gutenberg上、セルの背景色はOKだが、罫線線の色が反映されません。
●キーカラー未設定の場合
gutenberg上、罫線色がグレーでOKだが、表示すると黒になります。
gutenberg上、罫線色がグレーでOKだが、表示すると黒になります。
わいひら reacted
2023年9月2日 13:29
私の環境でも編集画面でサイトキーカラーが反映されなくなりました。
おそらく原因は、js/gutenberg.js の 33 行目の class を使った場合に、Gutenberg が .editor-styles-wrapper を付けてくれず、詳細度が負けてしまうため。
色々試したのですが、:not() で詳細度を上げるのがいいように思えました。他に上手くいく方法を思い付きませんでした。
tmp/css-custom.php の 54~55 行目 をこのように変更すれば、サイトキーカラーが編集画面でも実際のページでも枠線の色に反映されます。
table:not(.has-border-color) th, table:not(.has-border-color) td,
この方法であれば、クラシックエディターで作ったテーブルでも問題ないはず。また、先日お問い合わせのあった テーブルのストライプが解除されません。 で使われていたプラグイン Flexible Table Block でも問題ありませんでした。
chu-ya さんがご指摘のサイトキーカラーを設定していない時も :not() を使えば解決するように思えます。
scss/_content.scss の 125~129 行目 をこのように変更すれば、私の環境では上手くいきます。
&:not(.has-border-color) {
th,
td {
border: 1px solid var(--cocoon-x-thin-color);
padding: 6px;
}
}
th と td は :where() でまとめてもいいかもしれません。
&:not(.has-border-color) {
:where(th, td) {
border: 1px solid var(--cocoon-x-thin-color);
padding: 6px;
}
}
WordPress めんどくさい。
この投稿は1年前ずつAkiraに変更されました
わいひら reacted
2023年9月2日 15:13
ご指摘ありがとうございます。
Akiraさんの方法をまんま使わせていただいて修正させていただきました。
https://github.com/xserver-inc/cocoon/commit/9229dd6e7b683aa812ae814b7ed652745da39987#diff-f350fc6c6fecd62cc4ab1392400e02921d5527f80eb54f93c69a43f1e9500c45R125
Akiraさんありがとうございます！
とりあえず僕の環境でも問題なく動作しているようです。
WordPress めんどくさい。
色々影響しあってややこしいです。。
トピックスターター 2023年9月3日 00:36
----------------------------------------------
テーマ名：Cocoon
バージョン：2.6.4.13
カテゴリー数：19
タグ数：150
ユーザー数：1
----------------------------------------------
[Cocoon設定]→[全体]→サイトキーカラーなし
[Cocoon設定]→[本文]→「横幅の広いテーブルは横スクロール」オフ
「表のセル幅を固定」オフ
「ヘッダーセクション」オン
「フッターセクション」オン
スタイル「デフォルト」OK
スタイル「ストライプ」
わいひら reacted
トピックスターター 2023年9月3日 00:39
----------------------------------------------
テーマ名：Cocoon
バージョン：2.6.4.13
カテゴリー数：19
タグ数：150
ユーザー数：1
----------------------------------------------
[Cocoon設定]→[全体]→サイトキーカラー#dd3333
[Cocoon設定]→[本文]→「横幅の広いテーブルは横スクロール」オフ
「表のセル幅を固定」オフ
「ヘッダーセクション」オン
「フッターセクション」オン
スタイル「デフォルト」OK
スタイル「ストライプ」
わいひら reacted
トピックスターター 2023年9月3日 00:53
----------------------------------------------
テーマ名：Cocoon
バージョン：2.6.4.13
カテゴリー数：19
タグ数：150
ユーザー数：1
----------------------------------------------
[Cocoon設定]→[本文]→「横幅の広いテーブルは横スクロール」オン
「表のセル幅を固定」オフ
「ヘッダーセクション」オン
「フッターセクション」オン
スタイル「デフォルト」
サイトキーカラーなし
サイトキーカラーあり
わいひら reacted
トピックスターター 2023年9月3日 01:04
スタイル「ストライプ」はgutenbergエディター上と、通常で異なります。
旧来デフォルトが「ストライプ」表示なので、「ストライプ」は対象外と判断しました。
スタイル「デフォルト」のみ対象とした場合
上記のように、横スクロールをオンにすると、表示が異なります。
また、1列目を固定にすると更に変わってきます。
判断願います。
わいひら reacted
2023年9月4日 22:11
ありがとうございます。
時間がある時にじっくり確認させていただきます。
2023年9月6日 18:48
上記のように、横スクロールをオンにすると、表示が異なります。
こちらは同じになるようGitHubのファイルのCSSセレクターを付け加えました。
https://github.com/xserver-inc/cocoon
2023年9月6日 18:48
また、1列目を固定にすると更に変わってきます。
こちらの公開ページは確かに1カラム目の表示（動作）は変わります。
ただ特に問題なければこのままでいきたいところではあります。
エディター側で同様の動作をさせるのにScrollHintを読み込む必要があるので、そこまで必要かなという思いもあって。
https://appleple.github.io/scroll-hint/
2023年9月7日 20:20
ご確認いただきありがとうございます。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。