前略、ヨガタイム さん

どこかに以下のような指定があるみたいです。

.article h2, .article h3, .article h4, .article h5, .article h6 {
margin-top: 3.6em;
}

Cocoonの高速化設定をOFFにしていただければ、詳しいことがわかるかもしれません。

高速化を無効

https://wp-cocoon.com/theme-trouble/

ヨガタイムさん

以下のコードを固定ページのカスタムCSSにコピペすれば、空白は少なくなるかもしれません。

.article h2:first-child {
    margin-top: 0;
}

@leafytree

リフィトリー様

いつもお世話になっております。
早速、ご返信をいただきありがとうございました。

教えていただいたcssを追記したところ、
イメージ通りのトップページになりました。
空白が消え、より良い見た目になり、
ご丁寧に教えていただけたことに感謝しております。

また、どこかに「margin-top: 3.6em;」の指定が入ってしまっているとのことでしたので、
Cocoonの高速化設定をOFFにさせていただきました。

こちらで、どこに指定が入ってしまっているか確認できそうでしょうか。

お忙しいところお手数をおかけしますが、
ご確認をどうぞよろしくお願い致します。

ヨガタイム さん

また、どこかに「margin-top: 3.6em;」の指定が入ってしまっているとのことでしたので、
Cocoonの高速化設定をOFFにさせていただきました。

こちらで、どこに指定が入ってしまっているか確認できそうでしょうか。

どうも、これは、Cocoon設定の「本文」タブの「行の余白」の数値を変えることによって、指定されているような気がします。

2.7ぐらいにすると、見出しのｈ２の上方向のマージンが3.6emぐらいにならないでしょうか？

おそらく、「css-custom.php」あたりで計算されているような気がするのですが、若干余白が多めに計算されているような気もします。

きっと、テーマ作者様も、このトピックをお読みくださるかと思われますので、うーん、やっぱり、ちょっと広いのかな？どうでしょう？

まあ、でも、ｈ２が1行目のときは、目立ちますね・・

投稿者:: @leafytree

おそらく、「css-custom.php」あたりで計算されているような気がするのですが、若干余白が多めに計算されているような気もします。

そこで合っています。
これはCocoon設定の「本文」タブの「行の余白」に合わせて計算しているのでこんな仕様になっています。
今回のような個別のケースの対応は、やはりカスタマイズで微調整していただくしかないかもしれません。

リフィトリー様、わいひら様

いつもお世話になっております。
早速、ご回答をいただきましてありがとうございました。

空白については、「行の余白」部分の設定が影響しているとのこと承知いたしました。
今回のケースでは、リフィトリー様にご教示いただいたコードを
追記して対応させていただこうと思います。

ご教示いただきまして誠にありがとうございました。

また、質問の中で気付いてしまったので、可能であれば確認させていただきたいのですが、
Cocoon設定にてサイトの高速化をONにする(全てのチェックをつける)と、記事が3つ横並びに表示されるのですが、
高速化をOFFにする(全てチェックを外す)と3つ目の記事が下の段に移ってしまい、2段構成になってしまいます。

現在は、高速化をOFFにしているので2行になっている状態ですが、
高速化をONにすると添付の画像のようになる状態です。

こちらはONでもOFFでも、横３列にするにはどうしたら良いでしょうか。

重ね重ねの質問となってしまい大変恐縮ですが、
こちらについても直し方をご教示いただくことは可能でしょうか。
なお、別トピックを作った方が良い場合は、そのように対応させていただきますのでお気軽にお申し付けください。

大変お忙しいところお手数をおかけしますが、ご確認よろしくお願い致します。

ヨガタイムさん

ちょっと私には難しく分からない感じですが。

本トピックとは別事象だと思います。

お手数ではございますが、新たにトピックを作成していただくのがよろしいかと考えます。

その際、改めて環境情報もご提示いただくと、回答を得やすいと思います。

m k 2 さん

このまま続けちゃいます。すみません。

ヨガタイムさん

まだ、調査中ですけど、ちょっと時間がなくて・・

あいだに９×19px の何かが挟まっているらしく・・

おそらく原因は、これっぽい。

【HTML】「空白のみのテキストノード」の謎に迫る！！

inline-flex ってあまり使ったことがないので、よくわからないですが、以下のコードでイケるっぽい？

.navi-entry-cards.widget-entry-cards.no-icon.card-large-image.large-thumb {
    line-height: 0;
    font-size: 0;
}

.widget-entry-cards.card-large-image .a-wrap {
    font-size: .95em;
    text-align: left;
    padding: 8px;/*←修正したのはこの行だけ*/
}

あとでもうちょっと調べないと・・

ちょっと時間がないので・・

@leafytree　リフィトリー様、mk２様

いつもお世話になっております。
お忙しい中ご対応をいただき心より感謝しております。

ご指摘いただいた通り、本件は今回の問題とは別事象になりますので、
他の方の参考にもなるように、新たにトピックを作成させていただきました。
つきましては、以下のトピックよりご確認・ご回答をいただけますと幸いです。

トップページでの3カラムの配置がずれる件について

大変お忙しい中お手数をおかけしてしまい恐縮ですが、
お時間のある際にご確認をいただけますと幸いです。

引き続きどうぞよろしくお願い致します。

ヨガタイム　さん

mk２ さん

途中まで書きこんでしまったのでここに続けてよいでしょうか？

既に貼り付けさせていただいたリンクの記事や、CSSのコードを参考にして、試してみてください。

ヨガタイム　さん

mk２ さん

display: inline-flex; ですと、不思議な空白ができるみたいなので、

display: block; にして float させたらどうかと思って、試しにコードを書いてみました。

頭の中でイメージしただけで、実際には試していません。（どこか間違っているかもしれません）

いままでの横並びのCSSのコード部分をコメントアウトするなどして、差し替えて試してみてください。

.navi-entry-cards.widget-entry-cards.no-icon.card-large-image.large-thumb,
.new-entry-cards.widget-entry-cards.no-icon.cf.card-large-image.large-thumb {
    overflow: hidden;
}

.navi-entry-card-link.widget-entry-card-link.a-wrap,
.new-entry-card-link.widget-entry-card-link.a-wrap {
    display: block;
    float: left;
    width: 33.2%;
    padding: 1.5%;
}

@media screen and (max-width: 900px) {
  .navi-entry-card-link.widget-entry-card-link.a-wrap,
  .new-entry-card-link.widget-entry-card-link.a-wrap {
    width: 49.8%;
    padding: 1.5%;
  }
}

@media screen and (max-width: 480px) {
  .navi-entry-card-link.widget-entry-card-link.a-wrap,
  .new-entry-card-link.widget-entry-card-link.a-wrap {
    float: none;
    width: 98%;
    margin-left: auto;
    margin-right: auto;
  }
}

ヨガタイム　さん

独自のカスタマイズにつきましては、基本的にはサポート外となっているようです。

ですので、参考程度の書き込みということでご了承くださいませ。

ヨガタイム　さん

すみません。

セレクタに「.card-large-image.large-thumb」をつけておかないと、「おすすめヨガ ＆ フィットネス」のところまで適用されてしまうので、以下に訂正します。

.navi-entry-cards.widget-entry-cards.no-icon.card-large-image.large-thumb,
.new-entry-cards.widget-entry-cards.no-icon.cf.card-large-image.large-thumb {
    overflow: hidden;
}

.card-large-image.large-thumb .navi-entry-card-link.widget-entry-card-link.a-wrap,
.card-large-image.large-thumb .new-entry-card-link.widget-entry-card-link.a-wrap {
    display: block;
    float: left;
    width: 33.2%;
    padding: 1.5%;
}

@media screen and (max-width: 900px) {
  .card-large-image.large-thumb .navi-entry-card-link.widget-entry-card-link.a-wrap,
  .card-large-image.large-thumb .new-entry-card-link.widget-entry-card-link.a-wrap {
    width: 49.8%;
  }
}

@media screen and (max-width: 480px) {
  .card-large-image.large-thumb .navi-entry-card-link.widget-entry-card-link.a-wrap,
  .card-large-image.large-thumb .new-entry-card-link.widget-entry-card-link.a-wrap {
    float: none;
    width: 98%;
    margin-left: auto;
    margin-right: auto;
  }
}

ヨガタイム　さん

余談ですが、kosugi フォントは Windows環境のブラウザの Firefox では、おそらくFirefoxのフォントの表示の仕様だと思われるのですが、カスレてしまい、キレイとは言えない表示になってしまうようです。（Macは持っていないのでわかりませんが・・）

アクセス集計等で、読者にFirefoxユーザーが一定数いらっしゃる場合は、Cocoon設定の全体タブの設定でフォントの設定を「小杉フォント」以外にした方が無難かもしれません。

Google Chrome では、キレイに表示されるのですけれど・・

ヨガタイム さん

「謎の空白」が無くなって、上手く表示されるようになりましたね。

どうやったら、「謎の空白」を無くすことができたのか、書きこんでいただけますと、他の方も参考になるかと思います。

いつもお世話になっております。
ご返信が遅くなってしまい申し訳ございません。

今後の方のために、今回の解決方法のメモを残させていただきます。
結論、全てリフィトリー様から教えていただいたCSSを記載したところ、「トップページの空白」「カラムの横３列」共に解決しました。

参考までに以下に記述して残させていただきます。

①トップページの上の空白をなくす

.article h2:first-child {
    margin-top: 0;
}

②カラムを横３列で表示する

.navi-entry-cards.widget-entry-cards.no-icon.card-large-image.large-thumb,
.new-entry-cards.widget-entry-cards.no-icon.cf.card-large-image.large-thumb {
    overflow: hidden;
}

.card-large-image.large-thumb .navi-entry-card-link.widget-entry-card-link.a-wrap,
.card-large-image.large-thumb .new-entry-card-link.widget-entry-card-link.a-wrap {
    display: block;
    float: left;
    width: 33.2%;
    padding: 1.5%;
}

@media screen and (max-width: 900px) {
  .card-large-image.large-thumb .navi-entry-card-link.widget-entry-card-link.a-wrap,
  .card-large-image.large-thumb .new-entry-card-link.widget-entry-card-link.a-wrap {
    width: 49.8%;
  }
}

@media screen and (max-width: 480px) {
  .card-large-image.large-thumb .navi-entry-card-link.widget-entry-card-link.a-wrap,
  .card-large-image.large-thumb .new-entry-card-link.widget-entry-card-link.a-wrap {
    float: none;
    width: 98%;
    margin-left: auto;
    margin-right: auto;
  }
}

また、フォントの件についてもご指摘をいただきましてありがとうございました。

全くの盲点であった箇所なので、大変参考になりました。

現在は、Firefoxからのアクセスが少ないのですが、今後に備えて時間があるときに対応させていただきます。

この度はご丁寧に教えていただきまして誠にありがとうございました。
今後ともどうぞよろしくお願い致します。

ヨガタイムさん

すみません。

floatですと、エントリ―カードの高さが揃わないみたいなので、Flexboxの方が良いかもしれません。

.navi-entry-cards.widget-entry-cards.no-icon.card-large-image.large-thumb,
.new-entry-cards.widget-entry-cards.no-icon.cf.card-large-image.large-thumb {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.card-large-image.large-thumb .navi-entry-card-link.widget-entry-card-link.a-wrap,
.card-large-image.large-thumb .new-entry-card-link.widget-entry-card-link.a-wrap {
    width: 33.2%;
    padding: 1.5%;
    display: block;
}

@media screen and (max-width: 900px) {
  .card-large-image.large-thumb .navi-entry-card-link.widget-entry-card-link.a-wrap,
  .card-large-image.large-thumb .new-entry-card-link.widget-entry-card-link.a-wrap {
    width: 49.8%;
  }
}

@media screen and (max-width: 480px) {
  .navi-entry-cards.widget-entry-cards.no-icon.card-large-image.large-thumb,
  .new-entry-cards.widget-entry-cards.no-icon.cf.card-large-image.large-thumb {
    display: block;
  }
  .card-large-image.large-thumb .navi-entry-card-link.widget-entry-card-link.a-wrap,
  .card-large-image.large-thumb .new-entry-card-link.widget-entry-card-link.a-wrap {
    width: 98%;
    margin-left: auto;
    margin-right: auto;
  }
}

@leafytree リフィトリー様

いつもお世話になっております。
追加でアドバイスいただきありがとうございます。
ご教示いただいたものに変更させていただきました。

この度は本当にありがとうございました。

ヨガタイムさん

お手間ととらせてしまって、すみませんでした。