●原因
新着記事、初心者タブ中の各リストにPCの時、class="list ect-entry-card front-page-type-tab-index"となっている。
しかし、モバイルの時、class="list ect-entry-card"となり、front-page-type-tab-indexが削除されている。
この為、リスト中のfont-sizeが、投稿ページの見出しh2と同じになり、大きくなってしまう。

●補足
ver:2.4.7.9でclassの見直しが行われています。
この為、リスト単位にclassは削除されています。

●回答
私の見間違えでなければ、Cocoon標準のインデックスページと同じように、その部分をコピーしたのか、独自にタブ切り替えを設けていると思われます。

投稿者:: @crypto_college

トップページのカスタマイズをお願いした方と連絡が取れなかったため、質問しました。

上記と言う事ですが、どのように作ったか分からない為、やはりカスタマイズした方にお願いするのが望ましいと思います。

●追加CSS
以下を.listに修正

/*エントリーカード*/
.front-page-type-tab-index h2.entry-card-title {
  font-size: 1.2em;
}
/*スマホ表示時は文字を小さめに*/
@media screen and (max-width: 834px) {
  .front-page-type-tab-index h2.entry-card-title {
    font-size: .9em;
  }
}

@chu-ya お願いしていた方が多忙で現在、お願いができなさそうな状況です。

ただ、今後、修正等する場合は手順書ということでPDFをいただいています。

参考に添付させていただきます。

手順書に該当箇所について触れていただいているのですが、設定方法がうまく分からずで。

@crypto_college さん

提示頂いた資料の中に「カスタマイズで実装した[show_list_tab_index]ショートコード」と記述があり。
その部分に当たります。
Cocoonの標準機能で無い為、どのようコードか分かりかねます。
ただ、上記CSSで問題ないとは思いますが。

@chu-ya ありがとうございます。

もしご提示いただいていた箇所であれば、どのように

コード追加ができるのでしょうか？?‍♀️

@chu-ya パソコン、スマホ表示ともに大きくなっています。

本来は添付のサイズにしたいと思っています。

投稿者:: @crypto_college

本来は添付のサイズにしたいと思っています。

[ダッシュボード]→[外観]→[カスタマイズ]→[追加CSS]に上記コードがありませんか？

@chu-ya ありがとうございます。確認したところ、何も書いていなかったです。

@crypto_college さん

何か変更しました？先のclassが消えているように思えます。
また、HTML縮小化していませんか？

@chu-ya ごめんなさい。戻しました。

高速化にチェックがあるのか、見えない部分もありますが、確か上記CSSが何処かに記述されていました。
追加CSSに以下を追加して下さい。

以下の注意の通り、本来フォーラムのルールに反しています。
また、たとえ業者に依頼したと言え、ご自分のブログ、内容を理解すべきだと私は思います。

基本的に、独自で行ったカスタマイズにより起きた不具合の原因究明や、JavaScript、PHPカスタマイズはサポート対象外させていただいています。

.list h2.entry-card-title {
  font-size: 1.2em;
}
@media screen and (max-width: 834px) {
  .list h2.entry-card-title {
    font-size: .9em;
  }
}

crypto_collegeさん

トップページは、固定ページで作成なさっているのではないかと思います。

その、固定ページのカスタムCSSに以下はお書きになっていませんでしょうか。

投稿者:: @mk2_mk2

固定ページのカスタムCSS

はじめ見た時、何処かに上記「.front-page-type-tab-index h2.entry-card-title」が書かれており。
（私はそのコードをコピペしただけです。）

chu-yaさん

WEXALがきいていて、正直良く分からないです。

あと、リロードすると変わったりしてませんか？

投稿者:: @mk2_mk2

あと、リロードすると変わったりしてませんか？

昼と今で一部、divのclassが違いましたが、今はもう変化はしません。

crypto_collegeさん

とりあえず、これまでchu-yaさんや私が書いたことをご確認いただいたり、試してみてください。
（途中から見ていて、今どこまでご確認なさったかを、良く把握しておりません、申し訳ない。）

それでも解消しない場合は、以下は必要かと思います。

• Cocoonの高速化の無効化
• ConaHaのWEXALの無効化
• 途中で状態を変えない（お問い合わせ時の状態をキープしていただく）

 
但し、独自カスタマイズなさっていて、その不具合は本来サポート対象外です。

サポート対象外のもの
https://wp-cocoon.com/not-supported/

PHPなど絡んでいる場合、外部からは確認できませんので、対処できない場合もあるかと思います。
（独自のショートコードがあるようですし）

上記はご了承ください。

すみませんが、しばらく離席します。

chu-yaさん

私は最初スマホで見ていたのですが、そこからちょっと変わったような感じはするんですよね。

今は、確かに変わらない感じはします。

圧縮状態が、解除されたり圧縮が掛かったり、何度かしていて、その度に？マークです。

すみません、しばらく離席してしまいます。

皆さんありがとうございます。

以下を行いました。

• Cocoonの高速化の無効化
• ConaHaのWEXALの無効化

トップページ(固定ページ)をエディターで開き、そのページの下のカスタムCSSに上記CSSありませんか？

こちらでしょうか？？

見方が合っているかわからず申し訳ないです。

こちらですね。

gutenbergエディター開いて以下がありませんか？

以下の情報がありました。

/*不要要素の削除*/
.article-header,
.article-footer {
display: none;
}
/*記事上部の余白を消す*/
div#content {
margin-top: 0;
}
.content-top {
display: none;
}

/*見出し*/
.article h2 {
position: relative;
font-size: 40px;
margin-top: 0;
margin-bottom: 1em;
padding: 0;
border: none;
background: none;
color: #000;
}
@media screen and (max-width: 834px) {
.article h2 {
font-size: 24px;
}
}
.article .sub-title {
color: #89c997;
font-size: 18px;
margin-bottom: 0;
}
.article h3 {
text-align: center;
border: 2px solid #89c997;
max-width: 335px;
margin: 3em auto;
color: #89c997;
position: relative;
z-index: 3;
}
.article h3::before {
content: "";
position: absolute;
bottom: -23px;
left: 50%;
margin-left: -15px;
border: 12px solid transparent;
border-top: 12px solid #fff;
z-index: 2;
}
.article h3::after {
content: "";
position: absolute;
bottom: -28px;
left: 50%;
margin-left: -17px;
border: 14px solid transparent;
border-top: 14px solid #89c997;
z-index: 1;
}
h3.margin-bottom-05 {
margin-bottom: .5em;
max-width: 600px;
}

/*3つ横に並んだカード*/
/*カード全体*/
.top-page-card .toggle-box {
box-shadow: 0px 3px 6px #00000029;
border: 1px solid #fff;
position: relative;
transition: all ease-in-out .3s;
}
/*左上に三角背景の文字を入れる*/
.top-page-card .toggle-box::before {
position: absolute;
top: -1px;
left: -1px;
content: "";
border-bottom: 80px solid transparent;
border-left: 80px solid #df4f1a;
}
.top-page-card .toggle-box::after {
position: absolute;
z-index: 2;
color: #fff;
transform: rotate(-45deg);
}
.top-page-card .toggle-button::before,
.top-page-card .toggle-checkbox:checked ~ .toggle-button::before {
position: absolute;
top: -2px;
left: -2px;
content: "";
border-bottom: 40px solid #0ef18e00;
border-left: 40px solid #ffffff;
opacity: 1;
}
/*初心者のあなたに*/
.top-page-card.recommend .wp-block-column .toggle-box::after {
top: 14px;
left: 3px;
}
.top-page-card.recommend .wp-block-column:nth-child(1) .toggle-box::after {
content: "STEP1";
}
.top-page-card.recommend .wp-block-column:nth-child(2) .toggle-box::after {
content: "STEP2";
}
.top-page-card.recommend .wp-block-column:nth-child(3) .toggle-box::after {
content: "STEP3";
}
/*Q&A*/
.top-page-card.qanda .wp-block-column .toggle-box::after {
top: 12px;
left: 25px;
}
.top-page-card.qanda .wp-block-column:nth-child(1) .toggle-box::after {
content: "1";
}
.top-page-card.qanda .wp-block-column:nth-child(2) .toggle-box::after {
content: "2";
}
.top-page-card.qanda .wp-block-column:nth-child(3) .toggle-box::after {
content: "3";
}
/*お得なキャンペーン*/
.top-page-card.campaign .wp-block-column .toggle-box::after {
top: 13px;
left: 7px;
}
.top-page-card.campaign .wp-block-column:nth-child(1) .toggle-box::after {
content: "特典1";
}
.top-page-card.campaign .wp-block-column:nth-child(2) .toggle-box::after {
content: "特典2";
}
.top-page-card.campaign .wp-block-column:nth-child(3) .toggle-box::after {
content: "特典3";
}
/*スペックの欄はリボンを表示しない*/
.top-page-card.spec .toggle-button::before,
.top-page-card.spec .toggle-checkbox:checked ~ .toggle-button::before,
.top-page-card.spec .toggle-box::before {
display: none;
}
/*トグルボタン部分*/
.top-page-card .toggle-button {
border: none;
background-color: transparent;
min-height: 80px;
padding: 25px 0 0;
}
/*3つカードのスマホ表示時*/
@media screen and (max-width: 834px) {
.top-page-card .toggle-button {
font-size: .9em;
font-weight: 600;
}
.top-page-card .toggle-box::before {
border-bottom: 40px solid transparent;
border-left: 40px solid #df4f1a;
}
.top-page-card .toggle-button::before,
.top-page-card .toggle-checkbox:checked ~ .toggle-button::before {
border-bottom: 24px solid #0ef18e00;
border-left: 24px solid #ffffff;
}
.top-page-card .toggle-box::after {
font-size: 12px;
}
.top-page-card.recommend .wp-block-column .toggle-box::after {
top: 4px;
left: -3px;
}
.top-page-card.qanda .wp-block-column .toggle-box::after {
top: 4px;
left: 11px;
}
.top-page-card.campaign .wp-block-column .toggle-box::after {
top: 3px;
left: 0px;
}
}
.top-page-card .toggle-checkbox:checked ~ .toggle-button {
border-bottom: 1px dashed #00000029;
}
/*コンテンツ部分*/
.top-page-card .toggle-checkbox:checked ~ .toggle-content {
border: none;
/*position: relative;*/
padding: 0;
}
.top-page-card .blank-box {
padding: 0;
}
.top-page-card .blank-box ul {
padding-left: 14px;
}
/*リンク部分*/
.top-page-card .toggle-content a {
color: #000;
text-decoration: none;
}
.top-page-card .toggle-content a img {
width: 100%;
}
.top-page-card .toggle-checkbox:checked ~ .toggle-content a::before {
content: "";
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
}
/*マウスオーバー時*/
.top-page-card .toggle-box:hover {
border: 1px solid #89c997;
}
.top-page-card .toggle-box:hover a {
color: #89c997;
}
/*スマホ表示時*/
@media screen and (max-width: 834px) {
/*.top-page-card .toggle-content {
display: none;
}*/
div.wp-block-columns {
gap: .5em;
}
}

/*検索ボックス*/
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
border: 1px solid #89c997;
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
font-size: 14px;
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
background: transparent;
border: none;
color: #89c997;
flex-basis: fit-content;
}
.search-word-buttons .wp-block-button a {
padding: 8px 24px;
}
@media screen and (max-width: 834px) {
.search-word-buttons .wp-block-button a {
font-size: .8em;
padding: 3px 12px;
}
}

/*記事から探す*/
.index-tab-buttons {
flex-wrap: wrap;
}
.index-tab-buttons .index-tab-button {
margin: 0;
margin-left: -1px;
margin-top: -1px;
width: 50%;
height: 50px;
border: 1px solid #89c997;
border-radius: 0;
position: relative;
text-align: left;
color: #89c997;
font-size: 18px;
line-height: 50px;
padding-top: 0;
}
#index-tab-1:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-1"], #index-tab-2:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-2"], #index-tab-3:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-3"], #index-tab-4:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-4"] {
background-color: #89c99729;
color: #89c997;
border: 1px solid #89c997;
}
/*エントリーカード*/
.front-page-type-tab-index h2.entry-card-title {
font-size: 1.2em;
}
/*スマホ表示時は文字を小さめに*/
@media screen and (max-width: 834px) {
.front-page-type-tab-index h2.entry-card-title {
font-size: .9em;
}
}

/*テーブル*/
.wp-block-table table tr {
background-color: #fff;
}
.wp-block-table table tr td {
font-size: 16px;
border: 2px solid #bebebe;
}
.wp-block-table table tr td img {
vertical-align: middle;
margin-right: 1.5em;
}
.wp-block-table table tr td strong {
vertical-align: middle;
}

私が回答した、上記、追加CSSに記載の赤字の部分を修正して下さい。

普通、個別ページのCSS、javascriptでなく、子テーマに記すべきだと思います。
それと申し訳ないですが、以前のフォーラムでの質問含め、crypto_collegeさん自身、WordPressを勉強された方が良いかと思います。

crypto_collegeさん

少し戻ってきました。
また、直ぐに離席します。

chu-yaさんのご提示の対応で、今回の事象は解消するものと思います。

ただ、先にchu-yaさんが仰っている通りの気がします。

投稿者:: @crypto_college

投稿者:: @crypto_college

トップページのカスタマイズをお願いした方と連絡が取れなかったため、質問しました。

上記と言う事ですが、どのように作ったか分からない為、やはりカスタマイズした方にお願いするのが望ましいと思います。

我々には、責任はとれないと思います。

カスタマイズしていただいた方にお願いするのが筋だと思います。
または、 crypto_collegeさんの自己責任ということでお願いするしかないかと。

そして・・・。

大変申し訳ないのですが、WordPressの基本的な用語がある程度通じないと、フォーラムでの会話は難しいこともあるようには思います。
（どうしても、フォーラムでのやりとりには制限があります。隣で会話している訳ではありませんので。）

おそらくその辺りも、カスタマイズをお願いしていることが関係しているかと思います。
そうなると益々、カスタマイズをお願いした方に、対応をお願いするのが良い気はしてしまいますね。
（crypto_collegeさんが調べたり悩んでいる間、回答側が貼りつかねばならないような感じに・・・。かなりchu-yaさんのお時間を奪ってしまったように見えてしまいます。）

申し訳ないですが、その辺りご了承いただいたり、お気遣いいただけますと幸いです。

chu-yaさん

mk2さん

大変お世話になりました。ほぼ同じようになりました。ありがとうございます。

お時間をいただきありがとうございました。

今後、ブログ運営する上で大切なスキルなので、勉強していきます。

投稿者:: @crypto_college

ほぼ同じようになりました。

font-sizeの定義は元のままで、classを正しい物に変更しただけです。
なので「ほぼ」でなく同じです。

フォーラムのマナーとして解決済みなら「解決済」ボタンをクリック願います。

@chu-ya 大きさなどは一緒なのですが、色が違うんです。

crypto_collegeさん

元々を存じませんので、分かりませんが、以下のような感じで良いのでしょうか。

投稿者:: @crypto_college

色が違うんです。

提示してくれたpdfを見てもカードの文字色は黒のようですが。
前を知らないので、聞くこと自体、筋違いです。
無くなったclassを変更しただけなので、色の事は、依頼した業者にお願いするか、ご自分で対応願います。
この件はこれでクローズです。

crypto_collegeさん

老婆心ながら。

WordPressの標準機能で、テーマをバージョンダウンすることは可能です。
詳細は以下をご覧ください。

Cocoonテーマを手動でダウングレードする最も手軽な方法
https://wp-cocoon.com/manual-downgrade-of-cocoon-theme/

プラグインも同様の手順です。
（バージョンアップもダウンも。）

WordPressのサイトというものは、1度構築したら、それで終わりではないと思います。

Cocoonも、不具合があれば修正されます。
皆様のご要望によっては、機能追加もあります。

何より、WordPressのバージョンアップによる仕様変更に対応すべく、どんどん変わっていっています。
それは他のテーマやプラグインでも同様かと思います。

そういう感じですので、今回のようなこともあります。
WordPressで構築したサイトは、メンテナンスし続けなければ運用はできないということは、ご認識くださいませ。

今回のようなことがあった場合に・・・。

自分でメンテナンスするのか。
また他の方にご依頼なさるのか。

そういうようなことも、あらかじめ想定しておいた方が良いと思います。