前略、rom さん

今、出先なので、詳しく見ることができないのてすが、他のブラウザでも、同じ症状でしょうか？

他のブラウザで開いても同じ症状になっております。

@rom さん

この症状は、「h3」だけで、「ｈ2」については、問題ないのでしょうか？

それとも、「h2」もプレビューと異なるデザインの表示になってしまうのでしょうか？

H2.H3ともに異なっています。

プレビューのものがただしく、

H2は投稿画面では、枠線が表示されない現象です。

@rom さん

投稿画面のことなので、外部からは、ちょっと調べにくいこともあり、ちょっと私は、原因は絞れない感じです。

投稿画面では、スキンのデザインが表示されちゃってる感じでしょうか？

例えば、子テーマのCSSでスタイルを指定する他にも、文字の色とかをブロックエディターのカラーパレットで指定されていたりしますか？

もし、されていらしたら、子テーマのCSSだけの指定にしてみるとか・・

環境面では、PHPのバージョンが少し前のもののようですので、レンタルサーバーの推奨バージョンにしてみるとか、プラグインの「All In One SEO Pack」を一旦停止してみるとか・・

一旦、スキンを「なし」にして、また戻してみるとか・・

なにしろ、よくわからないです。

詳しい方が、何か書きこんでくださるとよいのですが・・

@rom さん

そういえば、以前のトピックで、エディター画面にCSSが反映されない、といった、似たようなトピックがあったのを思い出しました。

その時の原因というのが、プレーンテキストを扱うテキストエディターではなく、Windowsのメモ帳かなにかで、CSSを編集してしまったため、CSSのコードの中に、BOMか何かの余計な文字が、入っていたため、というものです。

romさんの子テーマのCSSをチェックすると、余分な文字が３文字入っているようです。

子テーマのCSSの101行目に余分な文字が入っています。（黄色のところです）

/* H3 */
.article h3{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
background:none;  
color: black;
	padding: .25em 0 .5em .75em;
 Â border-left: 6px solid #418933;
  border-bottom: 1px solid #418933;
}

また、240行目にも２文字入っています。

.sns-share-buttons a {
 Â  Â width: 30px;
}

これが原因かどうかは、わかりませんが、削除しておくに越したことはないと思います。

@rom さん

もし、テキストエディターをお使いになっていなければ、文字コードをUTF-8（BOMなし）で扱うことのできる、テキストエディターをお使いになられることをオススメします。

既に、お使いの場合は、ご容赦ください。

macOS専用 プレーンテキストエディタ CotEditor

ご回答ありがとうございます。

投稿画面ではスキンのデザインが反映されている状態です。

子テーマのCSSでスタイルを指定する他にも、文字の色とかをブロックエディターのカラーパレットで指定されていたりしますか？

＞文字の色はCSSで指定しております。

PHPを最新のものにし、またAll in SEOも停止

CSSのコードの中に、BOMか何かの余計な文字が、入っていたため、というものです。

＞ご指定いただいたCSSコードを修正いたしました。

以上のことを行いましたが改善されませんでした。

また、補足ですが、先日まではしっかりCSSのものが投稿画面でも反映されておりました。

@rom さん

私のスキルでは、ちょっと、原因を特定するのは難しそうです。

ローカルのテスト環境で、rom さんと同じスキンを適用し、rom さんの子テーマから、h2とh3のCSSのコードを子テーマにコピペして、Cocoon設定の全体タブのサイトキーテキストカラーを白にしたりして、できるだけ環境を近づけてみたのですが、症状を再現することはできませんでした。

ちなみに、h2とh3の文字の色は、子テーマのCSSではなく、別の場所で設定されていらっしゃるようですが、どこで設定されたものか、私には、わかりませんでした。（インラインのCSSで出力されているので、Cocoon設定のどこかなのかなとは推測してはみたのですが・・）

私のテスト環境のエディター画面でh3を右クリックして、デベロッパーツールで見てみると、「.editor-styles-wrapper .article h3」というセレクタが適用されているようです。

この辺りは、わいひらさん、もしくは、詳しい方でないと、デベロッパーツールで見ただけでは、原因の特定までは、難しいかなと思います。

エディターに、子テーマのCSSのスタイルを適用させる仕組みを理解していないと、わからないように思います。

@rom さん

新規のテストページではなく、過去に投稿された記事を編集画面で開いた場合でも、同様の症状になりますでしょうか？

@leafytree 様

はい、過去の投稿や、固定ページにつきましても、

同様に管理画面ではスキンの見出しになる症状になっております。

@rom さん

そうなのですね。

お役にたてず、すみません。

わいひらさん、もしくは、詳しい方が、原因を探り当ててくださるといいですね。

僕の環境で子テーマのstyle.cssに以下のように書いて、ブロックエディターで見るとスタイルも反映されるようです。

.article h3{
  background-color: red;
}

試しに、クラシックエディターを有効（ブロックエディターを無効）にしても、子テーマのスタイルが反映されませんでしょうか。

@yhira　様

クラシックエディタを有効にすると、

子テーマのスタイルが反映されました。

子テーマstyle.cssに、僕が書いたCSSコードを貼り付けて、ブロックエディターで表示するとH3見出しは、僕が貼り付けた画像のようになりますか？

@yhira様

ブロックエディターで表示した場合、

投稿画面では適用されませんでした。

実際の画面(プレビュー)ではわいひら様が作成した、赤背景になります。

ということは、ブロックエディター限定の不具合みたいですね。
僕の開発環境で同じスキンを選択し、同じカスタマイズを施してみたのですが、問題なく表示されるようです。
当環境で問題なく動作していて不具合が再現できないのと、管理画面上をのことなので、状態を見ることができないので、ちょっと原因はわからないです。

動作確認用のコードがこちら。

/* H3 */
.article h3{
  border-top:none;
  border-right:none;
  padding: 0;
  background:none;  
  color: black;
  padding: .25em 0 .5em .75em;
  border-left: 6px solid #418933;
  border-bottom: 1px solid #418933;
} 

@romさん

CSS内にリフィトリーさんが指摘されたような文字列のエラーが他にも残っていないでしょうか?

私の環境で故意にCSS内にエラーを入れてみると同じ現象を再現できました。

.article h2{
  background-color: #f00;
}
.article h3{
  Â background-color: #0f0;
}
.article h4{
  background-color: #00f;
}

このコードをstyle.cssに追加すると次のような結果になりました。

• 公開ページではエラーの起こっていないh2、h4のCSSが適用されていた
• エディタ画面では全て適用されていなかった

CSSにエラーがあるとエディタ側で読み込めないのではないかと予想しています。ちなみにスキンを外しも同じことが起こります。

そう言えば、子テーマのCSSの213行目にも、変なのありますね。

span.fa.fa-close::before{/*戻るボタン*/
font-family: FontAwesome;
content: “\f060”;
}

黄色のところ。

ダブルクォーテーションが、正しく記述されていないようです。

ご指摘していただいたところをを修正して見たのですが、治らないです

CSSの記入ミス・エラーがあるのでしょうか

/* H2 */
.article h2{
background:none;
padding: 0;
color: #418933; /*文字色*/
padding: 0.5em 0;/*上下の余白*/
border-top: solid 3px #418933;/*上線*/
border-bottom: solid 3px #418933;/*下線*/
}

/* H3 */
.article h3{
border-top:none;
border-right:none;
padding: 0;
background:none;
color: black;
padding: .25em 0 .5em .75em;
border-left: 6px solid #418933;/*左線*/
border-bottom: 1px solid #418933;/*下線*/
}

/* H4 */
.article h4{
position: relative;
padding-left: 1.2em;/*アイコン分のスペース*/
line-height: 1.4;
}
.article h4:before {
 font-family: "Font Awesome 5 Free";
 content: "\f00c";/*アイコンのユニコード*/
font-weight: 900;
position: absolute;/*絶対位置*/
font-size: 1em;/*サイズ*/
left: 0;/*アイコンの位置*/
top: 0;/*アイコンの位置*/
color: #418933; /*アイコン色*/
font-weight: 900;
}

@rom さん

Cocoon設定の「全体」のタブの設定で、「サイトキーカラー」と「サイトキーテキストカラー」を設定されていませんか？

特に白色（＃fff）だと、設定していても、自分でも気づかない、という場合もあったりするようです。

もし設定されていたら、クリアボタンをクリックして「変更をまとめて保存」のボタンをクリックして解除します。

それらの設定と、エディターの表示が関係あるかどうかは、わかりませんが、複数の矛盾した指定があるのは、良くないような気がいたします。

疑わしい部分を、除外していくもの原因の切り分けのやり方のひとつかと思います。

@leafytree様

ご指摘いただいた箇所をクリアしたところ、

投稿画面では、このような表示になりました。

@rom さん

子テーマのCSSの以下のサイドバーの見出しの指定にも余分なスラッシュがありますね。

/*ウィジェットタイトル*/
.sidebar h3{ 
	background-color:#418933;/ 
	color:#fff;
	padding:7px 7px; margin:19px 0; 
	border-radius: 50px; 
	width: 100%; height: 45px;
	text-align:center; padding:10px 0 5px 3px;
	border: none;
}

background-colorの行末です。

スキンが適用されている状態です

@leafytree様

治りました・・・

本当にありがとうございます

わいひら様、Jun様もありがとうございました。

@rom さん

えーと、何がいけなかったのでしょうか？