追伸です

上記質問を上げさせていただいた後、サイトを確認すると、❶[解決済] グローバルナビゲーション サブキャプション 文字色の設定 は意図したとおりに戻っていました　❷カラム崩れも元に回復しているようです

ただし、❶にふくまれる追加CSSの編集画面のボタンがグレーアウトのままです。こういう不安定さがまだ課題として残っているという認識でございます。

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

投稿者:: @bizh

❶にふくまれる追加CSSの編集画面のボタンがグレーアウトのままです。こういう不安定さがまだ課題として残っているという認識でございます。

テーマスキンは単なるCSSです。
ネットにも多々ConoHa WINGについて書かれていますがサーバー側の問題です。

@chu-ya 様

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

問題切り分けで、サーバ側ということが分かり、現象につき納得できよかったです。

サーバが負荷に耐えられずに、スキンの変更で表示が不安定になる状態が続けば、これまで同種の問題が発生してこなかった以前のスキンに戻すことも考慮する必要があると認識いたしました（たまたまこれまで未発生だったかもしれませんが）。

Cocoon設定画面での操作や、カテゴリページ編集のために、WAFを ConoHa側で on/off するのですが、その都度、CSS表示が崩れるので、モグラたたきのように見栄えを調整しております。

自作の固定ページをTOPにしているのですが、TOP画面が大きく崩れるのは放置できず、レイアウト見直し（使用ブロックの変更など）と、スキン変更を両にらみで検討していきます。

これからも、あまりご迷惑をおかけしない程度に質問対応頂けると幸いです。

投稿者:: @bizh

CSS表示が崩れるので、モグラたたきのように見栄えを調整しております

CSSを弄るなら、カスタマイズCSSでなく、子テーマCSSに記す事を強くお勧めします。

@chu-ya 様

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

子テーマCSS追記の作法をこれから習得したいと思います。

さて、上記❶❷の不具合ですが、当方で発生条件を突き止めることができました。

おそらく、当方のサイト特有（ConoHa × てがきノート × サーバ負荷高い使い方）の条件なのだと思いますが、

Cocoonのサイト高速化設定で、「CSSを縮小化する」を on にすると、❶❷の不具合が発生します。

下記に、複数カラム使用のページを参考までにお知らせします。

歴史に親しむ・楽しく学べる アニメ・漫画 – 紀元前

現在は、「CSSを縮小化する」を off にしているので、カラム崩れは発生していませんが、on にした時の崩れ画面を画像データで貼ります。

大変お手数ですが、これが真因だとして、弥縫策かもしれませんが、

❶サブキャプション文字色、❷複数カラム の２つについて、「CSSを縮小化する」の対象外とするための除外コードはどのように記述すればよろしいでしょうか。

現在は、全て off にしております。

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

追伸

画像が貼れていないので追加しました。

追伸

画像が貼れていないので追加しました。

@bizh さん

「CSSを縮小化する」を有効にして不具合が出る時は、大抵の場合 CSS に問題があります。

Visual Studio Code for the Web にカスタム CSS にお書きの CSS を貼り付けたところ、max-width の前に何か入っています。これが不具合の原因かもしれません。

カスタム CSS にお書きの CSS を全て削除し、以下の CSS を追加するとどうなるでしょうか。

※ CSS の内容は全く同じです。

.widget_categories .children a::before {
  content: '-';
  padding-right: 5px;
}

.blogcard:hover {
  background-color: #fff;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
  transition: all .3s ease;
}

span.sample1 {
  font-size: 12px;
}

div.horizontal-scroll {
  overflow-x: auto;
}

.is-style-normal-card .blogcard-wrap {
  max-width: none;
  width: 100%;
}

/* グローバルナビゲーションサブキャプション色 */
.navi .sub-caption {
  color: #fff;
}

@akira 様

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

ご指摘に従い、追加CSS（カスタムCSS）を clean-up 頂きましたものに差し替えましたが、現象は変わりませんでした。

そこで、問題切り分けをさらに進めるために、追加CSS（カスタムCSS）にある記述を全て「無し（削除）」かつ「CSSを縮小化する」を on にしても、現象は変わりませんでした。

この検証作業の過程で気づいたのですが、「てがきノート」の機能に、追加CSS（カスタムCSS）と同じく、外観→カスタマイズの中に、下記の設定メニューが存在します。

【スキン】日本語フォント
【スキン】背景パターン設定
【スキン】ロゴテキストの傍点設定

これらの設定メニューにてデフォルト以外のものを指定すると、「CSSを縮小化する」の on/off で、追加CSS（カスタムCSS）と同様に、効かない/効く の現象を引き起こすことが分かりました。

いつもながら、何度もお手数をお掛けして申し訳ありません。

この投稿現在、

❶「追加CSS（カスタムCSS）」はまっさら
❷「てがきノートの上記設定」はデフォルト以外を指定
❸「Cocoon縮小化」はすべて off

の状態にしてあります。

現在、私の WordPress の記述が稚拙なために、「LCPの問題 4秒超」の問題が発生していることは承知しています。これがトリガーとなりサーバ応答時間が長くなって、負荷が人より余計にかかるのが今回の原因ならば、長期的に対応すべきと考えております。

中期的には、子テーマにCSS追加する作法を勉強します。

短期的には、万一、私の操作により、どこかの設定の不都合ならば、究明して、「追加CSS」と「てがきノート」の上記機能だけでも、「CSSを縮小化する」設定を効かしてサイト運営をしたいと考えております。

可能性のある不都合につき、引き続きアドバイス頂ければ幸いです。

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

前略、BizHさん

子テーマのCSSファイルの一番下にあるはずのメディアクエリの閉じ括弧が見当たらないような気がします。

お問い合わせの件との関連性はよくわかりませんが・・・

何かの折に、間違って消しちゃった、というようなことはございませんでしょうか？

@leafytree 様

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

ご指摘通り、意図していませんが、場所的に、迂闊にも無意識に削除してしまっていたようです。

早速、"}" を追記・修正し、再び「CSSを縮小化する」を当てさせて頂きました。

無事、❶❷の不具合は解消しました。

@akira 様にもアドバイス頂きありがとうございます。

これでスッキリと行きたかったところなのですが、モグラ叩きで、次は、添付のように、カルーセル、アイキャッチなどのサムネイルがおかしくなりました。

この現象につきましては、いったん、EWWW Image Optimizer を無効化することで回避できています。

根本解決のために、Regenerate Thumbnails にて全添付ファイルの再作成を現在かけております（アイキャッチ画像だけの再作成では解決しなかったため）。

全添付ファイルの再作成は結構時間がかかるため、取り急ぎですが、途中経過報告させて頂きました。

引き続きよろしくお願いいたします。

BizHさん

プラグイン「EWWW Image Optimizer」の「遅延読み込み機能」はどういう状態だったか、ご確認いただけますでしょうか。

もし有効であれば、無効化してください。
その上で、「EWWW Image Optimizer」をご利用ください。

WordPress 5.5以降は、標準でネイティブLazyLoad（遅延読み込み）に対応しています。
そのため、プラグインによる遅延読み込み機能を必要としません。

コンフリクト（機能衝突）が起き、不具合が発生することが多いです。

@bizh さん

この現象につきましては、いったん、EWWW Image Optimizer を無効化することで回避できています。

EWWW Image Optimizer の設定項目に、「遅延読み込み」があります。この項目にチェックが入ってはいないでしょうか？

EWWW Image Optimizer の遅延読み込みが有効になっている場合に、画像が表示されないケースが今までもあった気がします。

※ ｍｋ２さんとコメントがかぶりました。

@akira 様　ｍｋ２様

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

お二方のご指摘通り、「遅延読み込み」にチェックが入っておりました。

ご指示に従い、これをoffにすることによって、サムネイルの乱れが解消できました。

（フォーラム記事を確認して複数のLazyload指摘件を了解していたにも拘らず、自分がその愚を犯していたとは！）

これで、一連のCSS問題を一先ず決着させることができました。

添付ファイル全件の再作成に時間がかかり、今となりました。確認・報告が遅れてすみません。

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