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カスタマイズ依頼

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

てがきノート(ブルーコーラル) の背景...
 
共有:
通知
すべてクリア

[解決済] てがきノート(ブルーコーラル) の背景と文字色が変わってしまった件

20 投稿
4 ユーザー
8 Likes
130 表示
 BizH
(@bizh)
Estimable Member Registered
結合: 3年前
投稿: 72
Topic starter  

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

下記質問をさせて頂きました者で、GitHubから siteguard 不具合を解消した Cocoon 2.5.6.4(正式リリース前)を使用しています。

[解決済] Warningが出てログインできない状態です

TOPページにて確認しましたが、視認的な部分で是非、以前の状態に回復できないかという相談です。

1)ヘッダー背景が白色だったが、方眼紙の背景になっている

2)カルーセルの枠内(背景)が、白色だったが、方眼紙の背景になっている

3)「通知」の文字色が白色だったものが、青色になっている

4)「タブボックス」の文字色が白色だったものが、グレーになっている

5)「ボタン」の文字色が白色だったものが、グレーになっている

------

4)については、類似のボックス系のブロックも同様の症状で、編集画面では白色なのが、プレビュー画面ではグレーになっています。

5)については、類似のブロックも同様の症状で、編集画面からグレーに変わっています。

なお、正式リリース前の2.5.6.4だから、正式リリース後になると自然解消するものなのか、正式リリース後も同様の視認状況に変わってしまうのか、当方にはわかりませんので、もし、正式リリースを待つのが正解なら待ちたいと思います。

サイト情報は下記のとおりです。

よろしくお願いいたします。

----------------------------------------------
サイト名:ビジネスハック 戦略/経営/会計
サイトURL: https://management-accounting.biz
ホームURL: https://management-accounting.biz
コンテンツ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
スキン:/wp-content/themes/cocoon-master/skins/skin-tegakinote-blue-coral/style.css
WordPressバージョン:6.1.1
PHPバージョン:8.0.25
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.0
エンコーディング:none
言語:ja,en;q=0.9,en-US;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:2.5.6.4
カテゴリー数:15
タグ数:7
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.1
style.cssサイズ:718バイト
functions.phpサイズ:203バイト
----------------------------------------------
Gutenberg:1
AMP:1
PWA:0
Font Awesome:5
Auto Post Thumbnail:0
Retina:1
ホームイメージ:/wp-content/uploads/2020/05/ff5c235429aec6df5b72eb12cfa477a9.jpg
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:1
----------------------------------------------
利用中のプラグイン:
Advanced Editor Tools (previously TinyMCE Advanced) 5.6.0
Akismet Anti-Spam 5.0.2
Aurora Heatmap 1.5.6
Category Order and Taxonomy Terms Order 1.7.4
Cocoon Color Palette 1.0.1
Code Snippets 3.2.2
ConoHa WING コントロールパネルプラグイン 1.0
ConoHa WING 自動キャッシュクリア 1.0.0
Contact Form 7 5.7.3
Edit Author Slug 1.8.4
Embed Any Document 2.7.2
EWWW Image Optimizer 6.9.3
Google XML Sitemaps 4.1.7
Jetpack 11.8
MathJax-LaTeX 1.3.12
Regenerate Thumbnails 3.1.5
SiteGuard WP Plugin 1.7.3
Smart Slider 3 3.5.1.13
TablePress 2.0.4
TablePress Extension: Responsive Tables 1.8
Wordfence Security 7.8.2
WP-Optimize - Clean, Compress, Cache 3.2.12
WP Multibyte Patch 2.9
----------------------------------------------
 


   
 BizH
(@bizh)
Estimable Member Registered
結合: 3年前
投稿: 72
Topic starter  

追伸

ブラウザキャッシュの高速化を外すのを忘れていました。

今はずしました。

改めてよろしくお願いします。

----------------------------------------------
サイト名:ビジネスハック 戦略/経営/会計
サイトURL: https://management-accounting.biz
ホームURL: https://management-accounting.biz
コンテンツ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
スキン:/wp-content/themes/cocoon-master/skins/skin-tegakinote-blue-coral/style.css
WordPressバージョン:6.1.1
PHPバージョン:8.0.25
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.0
エンコーディング:none
言語:ja,en;q=0.9,en-US;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:2.5.6.4
カテゴリー数:15
タグ数:7
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.1
style.cssサイズ:718バイト
functions.phpサイズ:203バイト
----------------------------------------------
Gutenberg:1
AMP:1
PWA:0
Font Awesome:5
Auto Post Thumbnail:0
Retina:1
ホームイメージ:/wp-content/uploads/2020/05/ff5c235429aec6df5b72eb12cfa477a9.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:1
----------------------------------------------
利用中のプラグイン:
Advanced Editor Tools (previously TinyMCE Advanced) 5.6.0
Akismet Anti-Spam 5.0.2
Aurora Heatmap 1.5.6
Category Order and Taxonomy Terms Order 1.7.4
Cocoon Color Palette 1.0.1
Code Snippets 3.2.2
ConoHa WING コントロールパネルプラグイン 1.0
ConoHa WING 自動キャッシュクリア 1.0.0
Contact Form 7 5.7.3
Edit Author Slug 1.8.4
Embed Any Document 2.7.2
EWWW Image Optimizer 6.9.3
Google XML Sitemaps 4.1.7
Jetpack 11.8
MathJax-LaTeX 1.3.12
Regenerate Thumbnails 3.1.5
SiteGuard WP Plugin 1.7.3
Smart Slider 3 3.5.1.13
TablePress 2.0.4
TablePress Extension: Responsive Tables 1.8
Wordfence Security 7.8.2
WP-Optimize - Clean, Compress, Cache 3.2.12
WP Multibyte Patch 2.9
----------------------------------------------


   
chu-ya
(@chu-ya)
Noble Member Registered
結合: 11か月前
投稿: 853
 

「てがきノート(ブルーコーラル) 」のヘッダー、カルーセルの背景色は初期値のようです。
どのように背景色を変更ましたか?


   
 BizH
(@bizh)
Estimable Member Registered
結合: 3年前
投稿: 72
Topic starter  

@chu-ya

いつもアドバイスありがとうございます。

ヘッダー/カルーセルにつきましては、CSS等、背景色に手を加えた覚えがなく、どうしたものかと、、、

背景色というより、「透過」といった方が伝わるかも、ですが、ヘッダーについては、「キャッチフレーズ」箇所があきらかに白色でボックスになっていますが、現在は透過状態で方眼紙模様になっていますし、カルーセルも、枠取りが同様に透過状態で方眼紙模様となっています。

丁度いい before/after ではないのですが、以前にお世話になった際のトップページのスクショ(2022/07/18時点)のものがあるので、ヘッダーとカルーセルの背景が白色だった際の様子の確認となれば、、、

要領の得ないレスですみません。

よろしくお願いします。


   
chu-ya
(@chu-ya)
Noble Member Registered
結合: 11か月前
投稿: 853
 

[外観]→[カスタマイズ]→[追加CSS]
を確認下さい。
現在の追加CSSを見ると、添付図のような値と異なっています。(該当のCSSが無い)


   
わいひら reacted
 BizH
(@bizh)
Estimable Member Registered
結合: 3年前
投稿: 72
Topic starter  

@chu-ya

度々スミマセン。

[外観]→[カスタマイズ]→[追加CSS]から確認し、確かに <style id="wp-custom-css"> と </style> が記述されていないことが分かりました(どうしてこれだけ消失したのか不明ですが)。そこで、早速これを手入力で設定しようとすると、添付の様に「マークアップは CSS 内では使えません。」というメッセージが出て、CSSを保存できません。

修正の手立てをご教授頂けると幸いです。

よろしくお願いします。


   
chu-ya
(@chu-ya)
Noble Member Registered
結合: 11か月前
投稿: 853
 

投稿者:: @bizh

添付の様に「マークアップは CSS 内では使えません。」というメッセージが出て、CSSを保存できません。

書かれている通りです。

<style id="wp-custom-css">

CSS以外の上記、HTMLタグ(マークアップ)が入っています。削除願います。
他にもHTMLタグがある場合、削除して下さい。

 


   
わいひら reacted
 BizH
(@bizh)
Estimable Member Registered
結合: 3年前
投稿: 72
Topic starter  

@chu-ya

HTMLタグ(マークアップ) については理解できました。

2022/07/18時点のスクショにある追加CSSが現状はない、ということでしたが、これは、Cocoonのバージョンの上げ下げとは無関係で、全く触っていませんので、現状の追加CSSの記述は変更有りません。

(説明をややこしくしましたが、あくまでスクショは、画面の視認状況をお伝えするもので、追加CSSの記述を問うものではありませんでした)

ですので当方が認識している差分は、Cocoon のバージョンを仮で 2.5.6.4 に上げたこと、ということになります。

さて、何が視認状況の変化をもたらしたのでしょうかねえ?

そういう「仕様」ということなら、手動で直せるところだけ直していこうという方針になるかもです。

よろしくお願いします。


   
 BizH
(@bizh)
Estimable Member Registered
結合: 3年前
投稿: 72
Topic starter  

追加で作業前後の差分がひとつ分かりました。

Cocoonの親テーマが2つuploadしていました(これが真因か自分には不明ですが)。

FTP(実質はConoHaのファイルマネージャ機能ですが)で、Cocoon バージョン: 2.5.6.4 をuploadすることで、siteguard のログインエラーを回避して、再びログイン可能な状態にしました。そこは、通常のWordPressの編集画面からの更新ではないため、旧のバージョン: 2.5.6は、正式リリースまで待って、通常手段で最新バージョンをuploadしてから削除しようと考えていました。

この情報が何かの参考になればいいのですが、、、

よろしくお願いします。


   
(@akira)
Noble Member Registered
結合: 5年前
投稿: 1262
 

親テーマの不具合です。ただ、スキンの不具合とも言えます。

不具合が発生したのは、汎用色CSSを変数化 (Cocoon 2.5.5.4)の変更です。親テーマとスキンが --white-color と同じ変数名を使っています。

もともとスキンが、このような CSS 変数を書いていました。--white-color は 255, 255, 255 です。

https://github.com/xserver-inc/cocoon/blob/master/skins/skin-tegakinote-blue-coral/style.css#L19

そこに、親テーマが同じ変数名を使うようになりました。--white-color は #ffffff です。

https://github.com/xserver-inc/cocoon/blob/master/scss/__root.scss#L50

そして、このような CSS を親テーマが指定しています。

.header-container,
.main,
.sidebar,
.footer {
  background-color: var(--white-color);
}

スキンてがきノートを使っている場合、こう書いているのと同じです。だから、色が反映されません。

.header-container,
.main,
.sidebar,
.footer {
  background-color: 255, 255, 255;
}

変数には、--cocoon-white-color のような他と可能な限り被らないユニークな名前を付けるといい気がします。

This post was modified 1か月前 by Akira

   
わいひら reacted
 BizH
(@bizh)
Estimable Member Registered
結合: 3年前
投稿: 72
Topic starter  

@akira

問題の特定どうもありがとうございました。

❶テーマやスキン作成者の更新を待つ

❷追加CSSエディタで優先度が最も高い記述で、汎用色CSS設定を上書きしておく(もちろん❶がなされるまでの限定対応)

ということになりますでしょうか?

でしたら、❷について、

.header-container,
.main,
.sidebar,
.footer {
background-color: var(--cocoon-white-color);
}

と記述すればよいでしょうか?

もちろん、この変数の宣言事態をどこかで行っておく必要があるわけで、、、

というスキルレベルなので、❶か❷のコピペ対応限定が現状取り得る手段と理解しております。

いつも的確なご指摘ありがとうございます。

 


   
chu-ya
(@chu-ya)
Noble Member Registered
結合: 11か月前
投稿: 853
 

追加CSSですが、勘違いしていました。

➊はYES
➋はYESですが、コードに誤りがあります。

2点あります。
Akiraさんの言う事で理解でき。

  • 手書きノートのCSSプロパティ変数がCocoonと同じ
    手書きノートとCocoonで同じ変数に色定義している。(図参照)
    手書きノートはRGB、Cocoonは16進数。
    この為、Cocoonの色に影響を及ぼし。
    スキンのCSSプロパティ変数の見直し要
  • 追加CSSについて確認
    以下の追加CSSは、BizHさんが入力したコードですか?★の部分。
    もしYESなら、スキン変更待つ以前に、★の部分は、255,255,255でなく、#ffffffが正しいです。
    元々がエラーになっていたので、CocoonのCSSが反映されてた?

    また、CSSプロパティ変数を止め、実値にして下さい。
    rgba(var(--black-color),→rgba(240, 235, 232,
    rgba(var(--gray-color),→gba(221, 221, 221,

 

コピペばかりでなく、これを機にCSSの書き方をネット検索して覚えましょう。
少なくとも以下のコードの意味くらいは理解しましょう。

/* グローバルナビゲーションサブキャプション色 */

.navi .sub-caption {
  color: #fff;
}


/*標準ボタン装飾をCocoonボタンと統一*/

a.wp-block-button__link {
  border: 2px solid transparent;
  border-radius: 10px;
  box-shadow: 0px 5px 5px -2px rgba(var(--black-color), .2);
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  line-height: normal;
  padding: 7px 13px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

a.wp-block-button__link:hover {
  box-shadow: 0 -3px 2px 0px rgba(var(--gray-color), .2), 0 -5px 5px -2px rgba(var(--gray-color), 1) inset;
  filter: brightness(115%);
  opacity: 1;
}

.header-container, .main, .sidebar, .footer {
  background-color: 255, 255, 255;★
}

   
わいひら reacted
 BizH
(@bizh)
Estimable Member Registered
結合: 3年前
投稿: 72
Topic starter  

@chu-ya

いつもありがとうございます。

四苦八苦しながら、検索で調べつつ、なるべく内容を深めることを努力しながら、アドバイスに従ってCSSを修正していっています。

1)header-container

こちらは、★の箇所を、#ffffff(16進数)に変更し、うまい具合に背景を白色にすることができました。

2)wp-block-button__link

こちらについては、苦戦中です。

下記のように、rgbaの中を実値にしてみたのですが、上手いことテキスト色が白色になりませんでした。

(なお、Cocoonのタブ見出しボックスの文字色は、変えることがそもそもできませんでしたが)

過渡的に、TOPページだけは、全てのボタンブロックのテキスト色を手作業で白色(拡張色D:FFFFFF)に設定変更しておきました。

まだ勉強中ですが、ちなみに、例えば gba(240, 235, 232, の後が " .2" と続いているのですが、これは、「数値で透明度を指定」という設定のことで合っていますかね?

理解の土台にしたのが、「rgba() …… RGBAカラーモデルで色を指定する」というページだったのですが、使用例として記述あったのが、0, 1, 0.1, 0.5 だけで、".2" が含まれていなかったので。もし透明度設定ならば、この変数の閾値は、離散なのか連続なのか、検索で調べてもよくわかりませんでした。

そもそもの理解が間違っていたらすみません  。。。

 

/* グローバルナビゲーションサブキャプション色 */
.navi .sub-caption {
  color: #fff;
}
/*標準ボタン装飾をCocoonボタンと統一*/
a.wp-block-button__link {
  border: 2px solid transparent;
  border-radius: 10px;
  box-shadow: 0px 5px 5px -2px rgba(240, 235, 232, .2);
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  line-height: normal;
  padding: 7px 13px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

a.wp-block-button__link:hover {
 box-shadow: 0 -3px 2px 0px rgba(221, 221, 221, .2), 0 -5px 5px -2px rgba(221, 221, 221, 1) inset;
 filter: brightness(115%);
 opacity: 1;
}
.header-container,
.main,
.sidebar,
.footer {
  background-color: #ffffff;
}

   
chu-ya
(@chu-ya)
Noble Member Registered
結合: 11か月前
投稿: 853
 

wp-block-button__linkが使われているページ(場所)を図示願いたく。

見出しタブですが、本来、白色のところ、手書きスキンのCSSプロパティ変数が影響し、反映されません。
図示の通り。
本対策としてスキンの修正待ちとなります。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14515
 

投稿者:: @akira

不具合が発生したのは、汎用色CSSを変数化 (Cocoon 2.5.5.4)の変更です。親テーマとスキンが --white-color と同じ変数名を使っています。

そこかぶっていましたか。スキンまで詳しくチェックしておらず申し訳ないです。
確かに安易な名前でした。
Cocoonの方のCSS変数はすべてcocoonを付加しようと思います。


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14515
 

とりあえず親テーマの方は編集してGitHubにアップしておきました。
https://github.com/xserver-inc/cocoon


   
Akira reacted
chu-ya
(@chu-ya)
Noble Member Registered
結合: 11か月前
投稿: 853
 

----------------------------------------------
テーマ名:Cocoon
バージョン:2.5.6.6
カテゴリー数:19
タグ数:147
ユーザー数:1
----------------------------------------------
2.5.6.5と2.5.6.6のフォルダー差分を取り、skinsの手書きスキン一式が変更がなく。(図参照)

親style.css
:rootのCSSプロパティ変数に接頭文字--cocoon-が追加されている事を確認しました。
手書きスキンの以下のCSSプロパティ変数が含まれていない事を確認しました。
--black-color
--white-color
--gray-color
--gray-light-color


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14515
 

@chu-ya さん

ご確認ありがとうございます。


   
 BizH
(@bizh)
Estimable Member Registered
結合: 3年前
投稿: 72
Topic starter  

@yhira 様 chu-ya 様 Akira様

いつもありがとうございます。

GitHubから親テーマをダウンロード・反映させて頂き、視認上の問題個所(ボタンブロックのテキスト色、カルーセル背景色、通知欄のテキスト色など)について、以前の表示にお蔭様で戻すことができました。

エビデンスとして、TOP画面のタブボックスのテキスト色が元来の「白色」に戻ったスクショを添付しておきます。

Siteguard のログインできない問題から引き続き、大変お世話になりました。

BizH


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14515
 

@bizh さん

ご確認いただきありがとうございます。


   
共有:

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

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

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

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

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

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

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

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