Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

スキン「アリス」でGutenbergの...
 
共有:
通知
すべてクリア

[解決済] スキン「アリス」でGutenbergの設定パネルにもCSSが反映される

23 投稿
3 ユーザー
28 Reactions
244 表示
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3768
トピックスターター  

----------------------------------------------
テーマ名:Cocoon
バージョン:2.8.7.1
カテゴリー数:18
タグ数:123
ユーザー数:1
----------------------------------------------

●対象

スキン「アリス」シリーズ


●現象

Gutenbergエディターのとき、本来フロントの反映されるCSSが、エディターの設定パネルにも反映されている。



エックスサーバー 高澤
(@s_takazawa)
Estimable Member Moderator
結合: 11か月前
投稿: 88
 

@chu-ya さん

いつもお世話になっております。

上記ご指摘いただきありがとうございます。

内容の方確認し、ご対応いたしますので少々お待ちください。



   
返信引用
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3768
トピックスターター  

@s_takazawa さん

本件、類似不良が他スキンにもないか確認も合わせ願います。



   
返信引用
エックスサーバー 高澤
(@s_takazawa)
Estimable Member Moderator
結合: 11か月前
投稿: 88
 

@chu-ya さん

 

ご連絡ありがとうございます。
承知いたしました。 他のスキンでも同様の問題が発生しないか、念のため確認を進めます。
引き続きよろしくお願いいたします。



   
わいひら reacted
返信引用
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3768
トピックスターター  

@s_takazawa さん

https://github.com/xserver-inc/cocoon/pull/287/commits/fd39f7455bcf18795a1e70eebb9e929cfbacd41d

見ましたが、isかwhereを用い以下とした方がスッキリしませんか?

body:not(.wp-admin) :is(.search-edit, input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea, select) {


   
返信引用
エックスサーバー 高澤
(@s_takazawa)
Estimable Member Moderator
結合: 11か月前
投稿: 88
 

@chu-ya さん

ご指摘いただきありがとうございます!

おっしゃる通り、is:などを使用した方がすっきりして見やすくなるため、コードを調整できればと思います。

ありがとうございます。



   
わいひら reacted
返信引用
エックスサーバー 高澤
(@s_takazawa)
Estimable Member Moderator
結合: 11か月前
投稿: 88
 

@yhira

わいひらさん

お疲れ様です。
本件のご対応にあたって、特定のスキンによる管理画面への不具合調整が完了いたしましたため、お手すきでPRのご確認のほどよろしくお願いいたします。

PR:
https://github.com/xserver-inc/cocoon/pull/287

(対応内容)
・特定のスキンにごとにみられる投稿・固定ページの管理画面へのCSSが反映されてしまう不具合の修正
・全スキンの確認

お忙しいところ恐縮ですが、お手すきでご確認のほどよろしくお願いいたします。


この投稿は1週間前 2回ずつエックスサーバー 高澤に変更されました

   
わいひら reacted
返信引用
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3768
トピックスターター  

●スキンなしでの動作

[Cocoon設定] → [全体] → サイトリンク色 を変更。

Cocoon設定画面内のリンクにも反映される。←いいのかな?

また、Gutenbergエディターに追加される独自メタボックスのリンク(例:ヘルプリンク)に反映される(図参照)。
しかし、マウスオーバーのとき#135e96となる。


●確認事項

以下のCSS追加の目的につい確認したく。

https://github.com/xserver-inc/cocoon/blob/2f9ee37b57ed6d2f64b7588176e53d5acbaa7b09/skins/bizarre-foods-blackburger/style.css#L1317-L1319

Gutenbergエディター内のヘルプリンクはWordPress標準リンク色#2271b1とした。
しかし、マウスオーバーのとき、Guetnbergエディターは変化しない。
間違いありませんか?



   
返信引用
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3768
トピックスターター  

●追記

Gutenbergエディター内のヘルプリンクはWordPress標準リンク色#2271b1としました。
他のスキンへの対応はどう考えていますか?



   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 8年前
投稿: 17940
 

とりあえず以下のように修正しました。

・サイトリンク色、サイト選択文字色、サイト選択背景色は管理ページで出力しないように変更
・上記の色はエディター上でも変わらない(サイト文字色・背景色も変わらない仕様のため)
・不要なスキンの管理画面をCSSの削除



   
返信引用
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3768
トピックスターター  

以下で削除したため、アリスシリーズの設定パネルの文字が太字に戻ってしまった

https://github.com/xserver-inc/cocoon/commit/630c226e3969d8592ad50775b052941d6c77299f#diff-4b82b339ab4f779e54da4f4d0fe5c29ead4d5fef0ba9964d9b1fdc5b28b7b468

また、スキンCSSで独自にaタグの設定をしており、そのまま反映される。
SILKは独自にcss-cache/css-custom.cssを読み込んでいるため、Cocoon設定のサイトリンク色が反映されてしまう。



   
返信引用
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3768
トピックスターター  

●補足

GutenbergエディターのCocoon独自設定パネルのヘルプリンクが該当する。
このため、ヘリプリンクを削除すればいいのでは?



   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 8年前
投稿: 17940
 

修正の不備失礼いたしました。

投稿者:: @chu-ya

GutenbergエディターのCocoon独自設定パネルのヘルプリンクが該当する。
このため、ヘリプリンクを削除すればいいのでは?

ヘルプリンクのHTML要素のコードを削除してしまうということでしょうか。
これに関しては、親テーマの方で.help-pageに対して、上書きするCSSを書いても良いのかなと思いました。
.toggleはaリンクではないですが、以下の.toggleのような詳細度の高いCSSセレクターで色を設定しちゃうみたいな感じです。

 



   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 8年前
投稿: 17940
 

暫定的にアリススキンを修正しておきました。
ただ一時的なものなので、後で上の一覧のスキンとともに修正し直します。



   
返信引用
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3768
トピックスターター  

投稿者:: @yhira

.toggleはaリンクではないですが、以下の.toggleのような詳細度の高いCSSセレクターで色を設定しちゃうみたいな感じです。

これも気付きましたが、近似色だったのでふれませんでした。

投稿者:: @yhira

ヘルプリンクのHTML要素のコードを削除してしまうということでしょうか。
これに関しては、親テーマの方で.help-pageに対して、上書きするCSSを書いても良いのかなと思いました。

削除と思った時に、ヘルプリンクなので、そこまで頑張らなくてもいいかな?とも思いました。
SILKは特殊でfunctions.phpでCSSファイルをキャッシュに出力してるので、要注意です。



   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 8年前
投稿: 17940
 

.help-pageに添付画像のようなWordPressブロックエディター画面のリンク色と同じCSSを追加して、対応してみました。
https://github.com/xserver-inc/cocoon/commit/6e2f9512beea5e6722b348143428a706520bb2d5
SLIKのCSSに書いてあるinputに関しては、あまり変更はしたくなかったのですが、他に良い方法も思いつかず公開ページのみで適用されるように修正しました。
css-cache/css-custom.cssで影響がありそうな部分は、管理ページでは出力しないように変更しました。
https://github.com/xserver-inc/cocoon/commit/a57512349ff33b874ccfc18aa75814e419e4d298



   
返信引用
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3768
トピックスターター  

----------------------------------------------
テーマ名:Cocoon
バージョン:2.8.7.2
カテゴリー数:18
タグ数:124
ユーザー数:1
----------------------------------------------
上記表でNGとなったスキンについて対策されていることを確認しました。
本件をクローズとします。



   
返信引用
エックスサーバー 高澤
(@s_takazawa)
Estimable Member Moderator
結合: 11か月前
投稿: 88
 

@chu-ya さん

ご確認いただき、ありがとうございます。
また、Cocoon設定画面内のリンクなどのご確認や、チェック表まで作成いただき、大変お手数おかけいたしました。



   
わいひら reacted
返信引用
エックスサーバー 高澤
(@s_takazawa)
Estimable Member Moderator
結合: 11か月前
投稿: 88
 

@yhira

わいひらさん

本件についてご対応いただき、ありがとうございます。

また、重ねての修正となり、申し訳ありません。

今回の修正箇所について確認し、今後はよりスムーズに進められるようにいたします。

この度は、ご対応いただき誠にありがとうございました。



   
わいひら reacted
返信引用
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3768
トピックスターター  

@s_takazawa さん

私はデバッガーではありません。またネット関連の会社でもなく、ネット系の実務経験はありません。
御社内での対応徹底願います。

今までの謝礼で、XWRITEの1ヶ月ライセンスを借りたいです(笑)
ソースを見てみたい。



   
返信引用
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3768
トピックスターター  

確認したいことがあり、クローズを解除しました。

@yhira さん

以下でscssからSEO設定パネルの詳細設定(canonical)の定義を削除しており。

https://github.com/xserver-inc/cocoon/commit/6e2f9512beea5e6722b348143428a706520bb2d5#diff-3703bc540e236bd4198fab174c834ea7a3a9efa334db52e1b6d0046834f876a0

editor-page.cssに定義があり、SCSSと不一致となっていませんか?(SCSSがマスターコードでは?)

https://github.com/xserver-inc/cocoon/blob/a57512349ff33b874ccfc18aa75814e419e4d298/css/editor-page.css#L94-L110



   
わいひら reacted
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 8年前
投稿: 17940
 

すいません。どこかに影響が出ていましたでしょうか。

https://github.com/xserver-inc/cocoon/blob/a57512349ff33b874ccfc18aa75814e419e4d298/css/editor-page.css#L94-L110
こちらの定義(マスターコード)は、こちらです。
https://github.com/xserver-inc/cocoon/blob/a57512349ff33b874ccfc18aa75814e419e4d298/scss/_defins.scss#L487-L511
こちらでadmin.cssとeditor-page.cssに呼び出しています。
https://github.com/xserver-inc/cocoon/blob/a57512349ff33b874ccfc18aa75814e419e4d298/scss/admin.scss#L364
https://github.com/xserver-inc/cocoon/blob/a57512349ff33b874ccfc18aa75814e419e4d298/scss/editor-page.scss#L7

scssの削除した部分が出力していたのは、style.cssなどに、添付画像の赤枠部分のようなCSSを出力しているだけのようでした。
CSSセレクター的にも、現在存在していない要素のようだったので、削除しました。


この投稿は6日前ずつわいひらに変更されました

   
返信引用
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3768
トピックスターター  

@yhira さん

GitHubを見た時、削除されていたので、気になっただけです。

ソースみたら問題ないようです。
本件、クローズします。


今回の件、editor-style.cssで対応するのが一番楽でしたね。忘れてました。



   
わいひら reacted
返信引用
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました