「メイド・イン・ヘブン」スキン適用中

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

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

編集画面の背景と文字の色が変
 
共有:
通知
すべてクリア

[解決済] 編集画面の背景と文字の色が変

38 投稿
4 ユーザー
38 Likes
1,133 表示
Maitake11
(@maitake11)
Active Member Registered
結合: 2年前
投稿: 16
Topic starter  

不具合・カスタマイズ対象ページのURL: https://nagano-blog.com/

相談内容:数日前に高速化を目的にプラグインの見直しや写真の圧縮化、またcocoonのアップデートなどを行って記事投稿画面へいった所編集画面の背景と文字の色が変わってしまいました。

元々グレー背景に黒文字だったのですが、背景がサイト内の目立つ色として使っている緑に文字色は背景の色で使っているグレーに変わってしまっていました。また吹き出しの文字色も以前は黒だったのですが、グレーになってしまいました。

見出しが緑にグレー文字にしていたため現在の表示だとできているのか確認することができず困っています。

※外からの表示は今まで通り背景グレー文字黒で見出しなど設定してあるところだけ緑で変わりなしです。

 

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

①cocoon設定→エディター にてエディター色で背景色と文字色が今回おかしくなってしまった色になっていたので、背景グレー、文字色黒にしたのですが戻りませんでした。

※エディタースタイルのテーマスタイルに反映させるのチェックを外すと背景や文字色は元に戻りますが、ラインなどの装飾が見えなくなります。

②プラグイン無効化→変化なしでした

③コノハに問い合わせしてみました→変化なし

コノハからの回答:いつもご利用いただき、まことにありがとうございます。
ConoHa お客様センターです。

お問い合わせに関しまして、ご案内致します。

弊社にて確認致しましたところ、ご申告の色の表示が変化
している事象の再現性は確認できませんでした。

現在も、事象は継続しているご状況でしょうか。

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

なお、WordPressの設定や編集などの詳細につきましては
弊社サポート対象外となりますため、お客様にてインターネット
上の情報や専門の書籍をご参考いただくか、WordPress
フォーラムなどをご活用いただきますようお願い致します。

以上、ご確認の程よろしくお願い致します。

今後ともConoHaをよろしくお願い致します。

 

以前質問されていた方(↓以下URL)のようにcocoonの再インストールした方がいいのでしょうか?

文字色まで変わっていたため実行できずにいます。

https://wp-cocoon.com/community/cocoon-theme/%E7%B7%A8%E9%9B%86%E7%94%BB%E9%9D%A2%E3%81%8C%E9%9D%92%E8%89%B2%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%9F/

環境情報:

----------------------------------------------
サイト名:長野ひとり旅のすゝめ
サイトURL: https://nagano-blog.com
ホームURL: https://nagano-blog.com
コンテンツ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
WordPressバージョン:5.9.3
PHPバージョン:7.4.25
ブラウザ:Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.54 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.0
エンコーディング:none
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:2.4.3
カテゴリ数:4
タグ数:12
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.2
style.cssサイズ:5823バイト
functions.phpサイズ:203バイト
----------------------------------------------
Gutenberg:1
AMP:0
PWA:1
Font Awesome:5
Auto Post Thumbnail:0
Retina:1
ホームイメージ:/wp-content/uploads/2022/04/1.png
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:1
CSS縮小化:0
JavaScript縮小化:1
Lazy Load:1
WEBフォントLazy Load:1
----------------------------------------------
利用中のプラグイン:
Ad Invalid Click Protector 1.2.7
Advanced Editor Tools (previously TinyMCE Advanced) 5.6.0
Akismet Anti-Spam 4.2.3
Aurora Heatmap 1.5.4
Broken Link Checker 1.11.16
Contact Form 7 5.5.6
EWWW Image Optimizer 6.5.1
LiteSpeed Cache 4.6
Pochipp 1.7.4
Pochipp Assist 0.1.0
PS Auto Sitemap 1.1.9
SiteGuard WP Plugin 1.6.1
UpdraftPlus - Backup/Restore 1.22.12
WP Fastest Cache 1.0.1
WP Multibyte Patch 2.9
XML Sitemap Generator for Google 2.0.7
----------------------------------------------


   
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2163
 

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

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

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

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


   
Maitake11
(@maitake11)
Active Member Registered
結合: 2年前
投稿: 16
Topic starter  

@chu-ya さん

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

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

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

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


   
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2163
 

状況を再確認したく。

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


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
 

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のご提示をお願いしてもよろしいでしょうか。

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

 

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

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


   
わいひら reacted
Maitake11
(@maitake11)
Active Member Registered
結合: 2年前
投稿: 16
Topic starter  

@chu-ya さん

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

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

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


   
Maitake11
(@maitake11)
Active Member Registered
結合: 2年前
投稿: 16
Topic starter  

@mk2_mk2 さん

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

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

大変失礼しました。。

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

 

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

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

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


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
 

Maitake11さん

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

 
ブラウザのリロード、または、ブラウザのキャッシュの削除をしても変わらないでしょうか。
(スーパーリロードしてみるとか・・・。)

   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
 

Maitake11さん

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

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

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

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

 
 
【追記】
 
子テーマの先頭の「@charset "UTF-8";」もなくなってしまっているような・・・
 
 

   
Maitake11
(@maitake11)
Active Member Registered
結合: 2年前
投稿: 16
Topic starter  

@mk2_mk2 さん

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

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

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

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

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

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

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

あと付随のcssエディターにもcssあるので念のため載せときます。外観の方からやるとエラーになったため付随の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;
}

 

 

 


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
 

Maitake11さん

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

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

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

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

 

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

 


   
Maitake11
(@maitake11)
Active Member Registered
結合: 2年前
投稿: 16
Topic starter  

@mk2_mk2 さん

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


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
 

Maitake11さん

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

まずは、charsetの件。

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

 
 
 
私のローカル環境の子テーマは、以下のような感じです。
 
 
1行目の「charset」がないのがお分かりいただけるかと思います。

   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
 

Maitake11さん

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

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

 
 
この圧縮がかかったような状態は、解除できないものでしょうか。
何で圧縮しているのか、外部からはなかなか分からないです。
最新の環境情報をご提示いただけますでしょうか。
 
 
上記のh2の部分を拡大します。
 
今回は、colorとbackgroundの両方の前にゴミがあります。
 

   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
 

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

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

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

 

P.S.

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


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
 

Maitake11さん

投稿者:: @maitake11

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

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

 
 
別にどちらにあっても良いとは思います。
 
ただ、Maitake11さんの場合、重複して同じものが、「追加CSS」にも「子テーマのスタイルシート」にもあるような状態のようです。
(「追加CSS」の方が優先度が高いですので、重複すると「追加CSS」が勝ちます。)
 
どちらか一方にまとめた方が良いのかな・・・とは思います。
一元管理という意味で。
 
あっちこっちにあると、訳が分からなくと思います。
(しかも同じものが。)
 
個人的には、ある程度のカスタマイズ量があると、子テーマのスタイルシートの方が管理しやすいのかなという印象は持ちます。
(CSSのコードの確認という意味では。)
 
「追加CSS」は直ぐにプレビューされるので分かり易いということはあると思います。
(ただ、画面が狭いですので、ある程度の量があるとコードの確認はつらくなるという印象です。)
 
どちらにも利点はあると思います。

   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
 

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::~」です
    (キャッシュされている可能性)

 

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

 

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


   
Maitake11
(@maitake11)
Active Member Registered
結合: 2年前
投稿: 16
Topic starter  

@mk2_mk2 さん

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

CSS修正してみました。

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

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

 

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

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


   
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1657
 

@maitake11 さん

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

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

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

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

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

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

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

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

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

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


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
 

Maitake11さん

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

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

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

 

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


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

 
他の原因は、何でしょう・・・。
もう1度最新の環境情報のご提示をお願いしてもよろしいでしょうか。
(なかなか外部からは、分からないかもしれないです。)
 
 
Akiraさんが仰っているように、デベロッパーツールをご使用になれると、今後も役立つと思います。
この手の調査では、デベロッパーツールは必須ですし。
 
編集画面は、外部からは見えませんので、外部からの調査も難しいこともあります。
 

 
ちなみに、別件です。
 
子テーマのスタイルシートの目次の部分です。
 
/* 目次の文字指定 */
.toc-title {
    text-align: left;
    margin: 0 20px 20px -10px;
    padding-left: -20px;
    font-size: 23px;
    font-weight: 700;
    color: #000000; /* 目次の文字色を変える場合はここを変更 */
}
 
上記の「padding-left」の部分は、エラーなって無視されています。
 
paddingにはマイナス値の指定はできないためだと思います。
 
無視されているので特に影響はないですが、修正しておくと良いと思います。
 

 
P.S.
 
アルムさんは、とても親切でした。
お食事は、もちろん美味しかったです。
地元の食材をたくさん使っていましたね。
 

   
Maitake11
(@maitake11)
Active Member Registered
結合: 2年前
投稿: 16
Topic starter  

@akira さん

はじめまして!

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

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

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

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


   
わいひら reacted
Maitake11
(@maitake11)
Active Member Registered
結合: 2年前
投稿: 16
Topic starter  

@mk2_mk2 さん

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

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

 

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

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

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

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

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

 

 


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
 

Maitake11さん

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

おそらく…なのですが。

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

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

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

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

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

 

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

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

 

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


   
Maitake11
(@maitake11)
Active Member Registered
結合: 2年前
投稿: 16
Topic starter  

@mk2_mk2 さん

かもしれません。

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

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

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

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

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

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


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
 

Maitake11さん

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

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


   
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1657
 

@maitake11 さん

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

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

This post was modified 2年前 by Akira

   
Maitake11 reacted
Maitake11
(@maitake11)
Active Member Registered
結合: 2年前
投稿: 16
Topic starter  

@mk2_mk2 さん

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

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


   
Maitake11
(@maitake11)
Active Member Registered
結合: 2年前
投稿: 16
Topic starter  

@akira さん

ありがとうございます!

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


   
Maitake11
(@maitake11)
Active Member Registered
結合: 2年前
投稿: 16
Topic starter  

@mk2_mk2 さん @akira さん 

 

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

 

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

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

 

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

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

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

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


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
 

Maitake11さん

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

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


   
Maitake11
(@maitake11)
Active Member Registered
結合: 2年前
投稿: 16
Topic starter  

@mk2_mk2 さん

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


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
 

Maitake11さん

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


   
Maitake11 reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
 

Maitake11さん

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


   
Maitake11
(@maitake11)
Active Member Registered
結合: 2年前
投稿: 16
Topic starter  

@mk2_mk2 さん

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

毎回すみません。


   
mk2 reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
 

Maitake11さん

おー、良かったです。


   
Maitake11 reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
 

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

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

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

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


   
Maitake11 reacted
Maitake11
(@maitake11)
Active Member Registered
結合: 2年前
投稿: 16
Topic starter  

@mk2_mk2 さん

なるほど!

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


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
 

Maitake11さん

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

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

 

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

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

 

ではでは、離脱します。

なおって良かったです。


   
共有:

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

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

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

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

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

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

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

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