●見出しH3,H4の下線が見えない
[Cocoon設定]→[エディタ]→エディタースタイル「エディターにテーマスタイルを反映させる」のチェックを外す
子テーマのstyle.cssはエディタに反映しなくなるので、下線は消えます。

●見出しH2の文字が見えない
/wp-content/themes/cocoon-child-master/style.css
子テーマのstyle.cssに2点間違いがあります。

図示の矢印の文字色ですが、#0000となっており、文字色が反映されず透明となってしまっています。
実際の文字色は白なので#fffに修正して下さい。

赤枠でh2::となり、CSSの記述に間違いがあります。
元々、h2::afterとかで何か修飾していたサンプルコードを修正した残骸があり。
使われないので、後々の事を考え、この赤枠の部分を削除して下さい。

@chu-ya さん

早速の返信ありがとうございます！

CSSの修正しました！ありがとうございます。

早速ｈ２の残骸と0000は修正しました。

ただ、エディターチェックを外すと確かに背景や文字の色は直るのですが、マーカーがない、見出しに色がつかない、吹き出しなどが崩れてしまい表示できないので記事投稿画面で確認することができず非常に不便で以前のように元に戻っていません。

状況を再確認したく。

[Cocoon設定]→[エディタ]→「エディター色」
図示する部分の背景色、文字色をクリアしてありますか？
背景色が設定されていませんか？

Maitake11さん

お問い合わせの際は、フォーラム上部の案内にある通り、高速化の無効をお願い致します。

書き込みの前に以下の3点をご確認ください。

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

高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/

また、同様に、ページキャッシュプラグインの無効化もお願い致します。

投稿者:: @maitake11

LiteSpeed Cache 4.6
WP Fastest Cache 1.0.1

同種機能のプラグインが2つ入っているようにも思いますが・・・。
（LiteSpeedの方は、少し違う機能もあるのかも知れないですけど。重複する部分はありそうですが。）

また、外部からは編集画面（エディタ画面）は見えません。

該当の実際に表示されているページのURLのご提示をお願いしてもよろしいでしょうか。

実際の表示と編集画面の表示の違いが分かる画像の添付もお願いします。

とりあえず、「エディターにテーマスタイルを反映させる」のチェックは入れていただいた方が良さそうに思いますが・・・。

（なお、編集画面を開いて直っていない場合は、ブラウザをリロードしてみてください。）

@chu-ya さん

返信ありがとうございます。

背景がおかしくなってからすぐに確認したところ背景緑、文字グレーとなっていたので、そこはすぐに修正して現在は背景グレー文字黒に戻しました。

ただ、それでも編集画面は緑背景の文字グレーのままです。

@mk2_mk2 さん

返信ありがとうございます！

高速化とプラグイン無効一度して変化がなかったので元に戻して質問してしまいました。。

大変失礼しました。。

現在高速化と無効化いたしました。

サイト内の投稿記事や固定ページすべての編集画面が写真のように背景緑で文字がグレーになってしまいますので、一番最近投稿した記事を添付します。

記事のURLは https://nagano-blog.com/stay_norikurakogen/ 　です。

エディターのテーマスタイル反映のチェックは入れなおしました。

Maitake11さん

現在のエディタ背景色は、#f5f5f5を設定なさっているように見えます。

Maitake11さん

子テーマのCSSは、これが標準でしょうか。

何か圧縮がかかっているような・・・。
（ちょっと確認が困難です?）

h2のcolorの前にゴミが入っているようです。
（矢印部分）

このゴミを削除していただけますでしょうか。

@mk2_mk2 さん

返信ありがとうございます！

背景色はf5f5f5で間違いないです！

何度かキャッシュの削除、F5で更新しているのですが変わりません・・・泣

cssの圧縮はサイトスピード上げるためにいろいろやったのでそこが原因かもしれません・・・

H2のゴミ部分どこでしょう？

あと見出しカスタマイズより上を消してしまいここ最近までエラー表示になっていてversion:1.1.2までのコードはググって見つけてきたものです。貼り付けたところエラーが来てたので、正しくできたのかとおもっていたのですが、もし違っていたら正しいもの教えていただけると助かります。。

ちなみになのですが、一番最後の検索アイコンカスタマイズもコードが壊れているのかサイト表示見ると色が変わらないので、何かおかしいかもしれません・・・

あと付随のcssエディターにもｃｓｓあるので念のため載せときます。外観の方からやるとエラーになったため付随のｃｓｓエディターに入力していました。（もしどちらか一方に書いた方がいいなどあればアドバイスお願いします）

cssエディターのもの↓

.header-container,
.main,
.sidebar,
.footer {
background-color: #f5f5f5;
}
.logo-image * {
display: block;
}

.logo-image {
padding: 0;
}
.appeal-content{
display:none;
}
.box-menu:hover{
box-shadow: inset 2px 2px 0 0 #f5f5f5,
2px 2px 0 0 #f5f5f5,
2px 0 0 0 #f5f5f5,
0 2px 0 0 #f5f5f5;
}
.search_container{
box-sizing: border-box;
}

外観テーマファイルエディターのcssです↓

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template: cocoon-master
Version: 1.1.2
*/
/* 見出しカスタマイズ */
/* H1 */
.article h1{
background:none;
padding: 0;
}
/* H2 */
.article h2{
position: relative;
padding: 0.5em;
 background: #5a875d;
　color: #F5F5f5;
}
/* H3 */
.article h3{
border-top:none;
border-left:none;
border-right:none;
padding: 0;
/*線の種類（二重線）太さ 色*/
border-bottom: double 5px #5a875d;
}
/* H4 */
.article h4{
border-top:none;
border-left:none;
border-right:none;
padding: 0;
color: #0a0a0a;/*文字色*/
/*線の種類（点線）2px 線色*/
border-bottom: dashed 2px #5a875d;
}
/* ブログカード */
.internal-blogcard::after{
content: '続きを読む \00bb'; /* 内部リンク右下枠の文言 */
position: absolute;
bottom: .5rem;
right: 1rem;
font-size: 70%;
background-color: #fdad0d; /* 内部リンク右下枠の背景色 */
padding: .4em 3em;
font-weight: bold;
color: #f5f5f5; /* 内部リンク右下枠の文字色 */
border-radius: 2px;
}
.internal-blogcard-footer{
display: none; /* 内部ブログカードのアイコンとURLを非表示 */
}
.blogcard-type .blogcard-label{
background-color:#fdad0d;
}
/* 目次全体デザイン */
.toc{
background:#FFFFFF; /* 目次全体の背景色を変える場合はここを変更 */
border:none;
display:block;
border-top:5px solid;
border-top-color:#5a875d;
box-shadow: 0 2px 2px rgba(0,0,0,0.2);
padding: 10px 5px;
}
/* 目次の文字指定 */
.toc-title {
text-align:left;
margin: 0 20px 20px -10px;
padding-left: -20px;
font-size: 23px;
font-weight: 700;
color: #000000; /* 目次の文字色を変える場合はここを変更 */
}
/* 目次のアイコン設定 */
.toc-title:before {
top: 0;
left: -45px;
width: 50px;
height: 50px;
font-family: "Font Awesome 5 Free";
content : "\f03a"; /* アイコンを変える場合はここを変更 */
font-size:20px;
margin-right:5px;
color:#FFF; /* アイコンの色を変える場合はここを変更 */
background-color:#5a875d; /* アイコンの背景色を変える場合はここを変更 */
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
padding:14px;
}
/* 目次のデザインカスタマイズ */
.toc-content ol {
padding: 0 0.5em;
position: relative;
}
.toc-content ol li {
line-height: 1.5;
padding: 0.7em 0 0.5em 1.4em;
border-bottom: dashed 1px silver;
list-style-type: none!important;
}
/* 目次の各節の先頭にあるアイコンを設定 */
.toc-content ol li:before {
font-family: "Font Awesome 5 Free";
content: "\f138"; /* アイコンを変える場合はここを変更 */
position: absolute;
left : 0.5em;
color: #5a875d; /* 色を変える場合はここを変更 */
font-weight: bold;
}
.toc-content ol li:last-of-type {
border-bottom: none;
}
.toc-content .toc-list li {
font-weight:700; /* h2のみ太文字に */
}
.toc-content .toc-list li li {
font-weight:normal; /* h3以降の文字サイズを普通に */
}
/* カテゴリーラベル非表示 */
.entry-card .cat-label{
display: none;
}
/* 関連記事欄のカテゴリーラベル非表示 */
.related-entry-card .cat-label{
display: none;
}
/* ウィジェット アーカイブ
-------------------------------------------------- */
.widget_archive ul li {
/*親カテゴリ*/
padding-left: 10px;
border-bottom: 1px dotted rgba(125, 125, 125, 0.2);
/*カテゴリ間の下線種類*/
}

.widget_archive ul li a {
/*リンク*/
font-size: .95rem;
}

.widget_archive ul li a .post-count {
/*記事数*/
border: 1px solid rgba(221, 221, 221, 0.867);
/*囲い*/
border-radius: 5px;
/*ボーダーの丸み*/
font-size: .8em;
/*数字サイズ*/
padding: 1px 10px;
/*囲いの大きさ*/
}

.widget_archive ul li a:before {
/*アイコン*/
font-family: "Font Awesome 5 Free";
content: "\f138";
/*種類*/
color: #5a875d;
/*色*/
margin-right: 6px;
/*アイコンと文字の距離*/
font-weight: bold;
}

.widget_archive ul li a:hover {
/*ホバー*/
background: transparent;
margin-left: 5px;
/*hover時動く幅*/
background-color: #efefef;
}

.widget_archive ul li a:hover .post-count {
border-color: #5a875d;
/*囲線色*/
background: #5a875d;
/*背景色*/
color: #fff;
/*文字色*/
transition: .4s;
/*変化スピード*/
}
/*ボックスメニュー*/
.box-menu{
padding: 0;
min-height: 0;
}
.box-menu:hover{
box-shadow:none;
opacity: 0.8;
}
.box-menu-label,
.box-menu-description{
display: none;
}
.box-menu-icon *{
margin: 0;
max-width: 100%;
max-height: 300px;}
.tagcloud a {
border-radius: 20px; /* 角を丸くする */
}
/* ウィジェット アーカイブ
-------------------------------------------------- */
.tagcloud a:hover {
background-color: #5a875d; /* 背景色 */
color: #fff; /* テキストカラー */
border-color: #5a875d; /* ボーダー色 */
}
/* 検索アイコンカスタマイズ
-------------------------------------------------- */
.search_container{
box-sizing: border-box;
}
.search_container input[type="text"]{
background: #ccddf5;
border: none;
height: 35px;
}
.search_container input[type="text"]:focus {
outline: 0;
}
.search_container input[type="submit"]{
cursor: pointer;
font-family: FontAwesome;
border: none;
background: #3879D9;
color: #fff;
outline : none;
width: 3.0em;
height: 37px;
}

Maitake11さん

只今手元にスマホしかないもので、詳しくは書けません。

ゴミの件は、子テーマのスタイルシートです。
H2のcolorの前です。
添付画像の矢印部分です。

おそらく、人の目では確認できないです。
文字コードをヘキサで確認できる用なテキストエディタでないと、分からないと思います。

一旦、H2のcolorの前の余白を削除して、その後スペースを入れ直してみてください。

先頭のcharsetは、最新の子テーマをCocoon公式サイトから新規にダウンロードしても、お分かりいただけるかと思います。

@mk2_mk2 さん

ありがとうございます！そうなんですね。。
H2のカラー前の削除とcocoon子テーマダウンロードして確認してみます！

Maitake11さん

少しずつ、順番にいきます。

まずは、charsetの件。

私から見えている、Maitake11さんの子テーマのスタイルシートの最初の部分は以下です。

Maitake11さん

子テーマのスタイルシートは、先程とは状況が変わりました。

現状は以下のように見えます。

現状の追加CSSと、子テーマのスタイルシートのCSSを、私のローカル環境に反映してみましたが、症状は再現できないですね。

他に原因がある可能性はありますね。

ただ、子テーマのゴミは、あると不具合の原因になりますので、先に綺麗にしておいた方が良いと思います。

P.S.

コロナになる前に乗鞍に行って、アルムさんに泊まったことがあります。
温泉浸かって、帰ってきただけですけど。
（湯けむり館のチケットもいただいて、温泉に浸かりました。）

Maitake11さん

投稿者:: @maitake11

あと付随のcssエディターにもｃｓｓあるので念のため載せときます。外観の方からやるとエラーになったため付随のｃｓｓエディターに入力していました。（もしどちらか一方に書いた方がいいなどあればアドバイスお願いします）

これは、おそらく「追加CSS」のことを仰っていますよね。
（「外観」－「カスタマイズ」－「追加CSS」）

Maitake11さん

もしかするとですが。

以下は今ONになっていますでしょうか。

投稿者:: @maitake11

WEXALの設定内容によりましては、以下サポートページにて
ご案内致しております通り、Web表示に影響が発生する
可能性もございます。

■WEXALについて
　 https://support.conoha.jp/w/wexal/%2305&source=gmail&ust=1652826522649000&usg=AOvVaw1aAZjifK9OASfwG-QUSZ8 G"> https://support.conoha.jp/w/wexal/#05

WEXALなるものを、私は存じておりませんが、これが圧縮やキャッシュを行っている可能性があるかもしれないです。

もしONになっていましたら、WEXALをOFFにしていただけますでしょうか。

上記を疑ったのは、以下2点です。

• 私から見える子テーマのスタイルシートが、圧縮されているように見える
  （圧縮されている可能性）
  　　
• Webで提供されているCSSチェックを、子テーマに対して行うと、既に削除されているはずのものが指摘される
  具体的には、「h2::～」です
  （キャッシュされている可能性）

今のところ、直接的な原因は分かりませんから、少しずつ探っていくしかなさそうです。

ちなみに、この後しばらく私は、スマホしか手元にありませんので、調査確認は難しくなってしまいます。
（今もスマホです。）

@mk2_mk2 さん

詳しくありがとうございます！しかも朝早くからお手数おかけします。

CSS修正してみました。

またWEXALも確認したところONになっていたので、こちらも合わせてOFFにしました。

お時間ある時で構いませんので、見れるタイミングで確認していただけると助かります。

アルム行かれたんですね！
夕ご飯がおいしそうで今行きたい宿ナンバーワンです！(笑)

湯けむり館わたしも行きたくて最近乗鞍行ったのですが、まさかの休館日でいけなかったのでアルムと合わせてリベンジするつもりです。

@maitake11 さん

デベロッパーツールでのご確認が手っ取り早いです。以下のやり方で背景色をご確認ください。

① 記事の編集画面を開きます。

② 記事タイトルの上で右クリックをします。

③ 「検証」をクリックします。

④ デベロッパーツールが開き、h1 タグの行に色が付いています。

⑤ その h1 タグの親の親の div タグをクリックします。この div タグ の class には editor-styles-wrapper などが付いています。

※ 添付画像の左側の矢印の部分です。

⑥ クリックした div タグに適用されている CSS が右側に表示されます。その中から background や background-color を探します。

※ 添付画像の右側の部分です。

⑦ background や background-color があれば、その CSS がおそらく犯人です。

Maitake11さん

おかげさまで、子テーマのスタイルシートだけでなく、他のCSSも綺麗に見えるようになりました。

とりあえず私のローカル環境に、子テーマのスタイルシート、および、追加CSSを適用してみましたが、やはり再現できません。

他のものが原因かと思われます。

ちなみに、今もこの事象は発生していますでしょうか。
念のため、再度ご確認いただけますでしょうか。
編集画面を開いても改善していない時は、念のためリロードしてみてください。
（重ね重ねで申し訳ないですが、念のためお願い致します。）

外部から確認した感じでは、やはりエディタ背景色は「#f5f5f5」が設定されているようです。

/* 目次の文字指定 */
.toc-title {
    text-align: left;
    margin: 0 20px 20px -10px;
    padding-left: -20px;
    font-size: 23px;
    font-weight: 700;
    color: #000000; /* 目次の文字色を変える場合はここを変更 */
}

@akira さん

はじめまして！

コメントありがとうございます。

検証→CSSコードが開き始めたらなのか、新規投稿の編集画面を見直すと今までの編集画面に戻っていました！

こんな方法で確認することもできるととても学びになりました。

ありがとうございました。

@mk2_mk2 さん

教えていただいたcss編集し投稿画面で＠akiraさんよりアドバイスいただいた検証を始めようと思い見ていると

見慣れた画面が戻っていました！！

結局どこが原因だったのか謎なのですが、無事に元通りになり、おまけにcssの不備や圧縮を戻す方法など今回の事で新しいことが学ぶことができました。

ここ数日@mk2_mk2 さんには朝早くから遅い時間まで親切にご対応いただき、アドバイスなどもたくさんいただき感謝してもしきれません。

ダメもとでここに記入して本当に良かったです！

ありがとうございました。

これにて解決済みとさせていただきます。

Maitake11さん

解決なさって良かったです。

おそらく…なのですが。

「WEXAL」の可能性はあるかもしれません。

1. 私が、直接見ていた、子テーマのスタイルシート
2. Webチェックサービス（文法のチェックができるもの）で確認した、子テーマのスタイルシート
    

 
上記のものは、違うものだったんです、何故か。
項番2では、既に消したはずのCSSコードが残っていました。
（私が初めて見た時には、既に削除済だったはずです。）

項番2の指摘を、再度項番1を開いて検索しても、見つかりませんでした。

既に、スタイルシート・Cocoonの設定などは修正したのに・・・。
「WEXAL」が、キャッシュしているものを、見ていた可能性があるのかな・・・と推測はします。
正直良く分からないのですけど。

今朝「WEXAL」を無効化していただいて、私から見えるものが変わりました（項番1も項番2も変わりました）ので、もしかするとそういう可能性もあるのかな・・・。
ということで、再度編集画面を開いていただくように、お願いしてみました。

（少なくとも、「WEXAL」が圧縮は行っていそうです。おそらく、キャッシュも。）

良く分かりませんが、解消して何よりです。

@mk2_mk2 さん

かもしれません。

わたしもWEXALを変更した後記事を確認すればもっと早く解決となったかもしれないのに、確認せずで今日もこんな遅い時間まで付きあわせてしまい申し訳ありませんでした。

半ば背景緑のままやるしかないのかなぁと諦めていたので、無事に直りよかったです。

ありがとうございました！

いいねが１回しかできないのが物足りないくらいで気持ちはあと100回はいいねしたいくらいです。

cssの不備も見ていただき本当に助かりました。

ありがとうございました。

Maitake11さん

もう大丈夫だと思いますので、これからもご使用のようでしたら「WEXAL」をONにしても良いと思います。

CSSを修正したり、Cocoon設定を修正する場合は、一度「WEXAL」を無効化しておいた方が良いのかもしれないですね。
（何分、使ったことがないもので、良く分からないところですけれど。）

@maitake11 さん

Cocoon 設定 > PWA にある「ログイン時もPWAを有効化する」のチェックは入っているでしょうか？

このチェックが外れている場合は、サイト管理者のキャッシュの更新が上手くいかないケースが出てくるかもしれません。管理画面はキャッシュしないようになっているので今回の問題とは無関係だと思いますが、私であればチェックを入れます。

@mk2_mk2 さん

ありがとうございます！ONにしても問題なさそうです。

最後までありがとうございました。

@akira さん

ありがとうございます！

チェックされてなかったのでチェック入れなおしました。

@mk2_mk2 さん　＠akira さん 

今投稿記事へ戻ったらまたしても元に戻ってしまいました、、、

WEXAL高速化ON→大丈夫だった→Cocoon 設定 > PWA にある「ログイン時もPWAを有効化する」のチェック→緑に逆戻り

チェック外す→戻らない→WEXAL　OFF→戻らない

以前＠akiraさんが言っていた検証ページを添付しておきます。

background-color: #5a875d;となっているのが原因でしょうか？

ココの修正はどうすればいいのでしょう？

チェックを外すのですか？それとも直接書き込めるのですしょうか？？

Maitake11さん

その場所は、「Cocoon設定」の「エディタ」タブの「背景色」だと思います。

ご確認いただけますでしょうか。

@mk2_mk2 さん

確認したのですが、ここは通常通りでした。

Maitake11さん

念のため、背景色をクリアして、変更を保存していただけますでしょうか。

Maitake11さん

上記で直らない場合は、PWAそのものを無効化した方が良いかもしれないです。

@mk2_mk2 さん

背景クリアで戻りました！

毎回すみません。

Maitake11さん

おー、良かったです。

Cocoonの設定内容は、データベースに保存されるのですが。

その保存が上手くいっていなかったのかもしれないです。

時々あるみたいなんですよね、WordPressって。

今回の「クリア」→「変更を保存」で、更新されたと思います。

@mk2_mk2 さん

なるほど！

そうなんですね。せっかく直ったのにーーー！と焦りました・・・(笑)

Maitake11さん

これで大丈夫なはずです。

WEXAL等ONにしても大丈夫なはずです。

乗鞍とは別件で、4年くらい前？に長野県をひとり旅しました。
（確か2泊3日くらい）

新緑の季節で、山が綺麗だったのを思い出しました。
（諏訪から高遠の途中の景色でした。）

ではでは、離脱します。

なおって良かったです。