ヘッダーと本文の間に謎の空間があります。 - Cocoonテーマに関する質問

RE: ヘッダーと本文の間に謎の空間があります。

わいひら — Thu, 13 Jul 2023 09:00:29 +0000

ご確認いただきありがとうございます。

RE: ヘッダーと本文の間に謎の空間があります。

morinoki5 — Thu, 13 Jul 2023 00:24:36 +0000

@yhira こちらでも機能追加の解決策ありがとうございました！また、ロゴもCSSの追記なくても大丈夫そうとのお教えもありがとうございました！

RE: ヘッダーと本文の間に謎の空間があります。

わいひら — Wed, 12 Jul 2023 09:55:20 +0000

同様の問い合わせがこれまで結構あったため、→→の「ヘッダー背景画像」が設定されている時、ヘッダーのサイズを背景画像のアスペクト比率にできる「背景画像の全てを表示」機能をテスト的に追加してみました。

この機能を有効にしている時、ヘッダーサイズをAkiraさんが書かれたような状態になるようにしました。

------------------------------------------------
https://github.com/xserver-inc/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
https://wp-cocoon.com/wp-content/uploads/2020/07/github-dl.png
WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------

2023-07-12_18h53_08.png

RE: ヘッダーと本文の間に謎の空間があります。

morinoki5 — Tue, 11 Jul 2023 04:46:41 +0000

@akira 様

違うやり方のご教授ありがとうございました！

こちらも言われたとおりのやり方をしてみて、問題解決しました。

モバイルでの見え方が違うとのことなので、スマホ表示させてみつつ両方試してみようと思います。

お二方ともありがとうございました！！

RE: ヘッダーと本文の間に謎の空間があります。

morinoki5 — Tue, 11 Jul 2023 04:43:49 +0000

@chu-ya 様

できました！！

画面幅を動かしてもそのまんまの画像の大きさで、すっきり解決しました！

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

しかも丁寧な説明をつけてくださって、Cocoon初心者の私でも理解できました！

本当にありがとうございました！！

RE: ヘッダーと本文の間に謎の空間があります。

大門未知子 — Tue, 11 Jul 2023 04:37:37 +0000

@akira さん
この方が、モバイルヘッダーのバランスがいいですね。
何も計算しなくても、ascpect-rarioで事足りますね笑
違う意見、良い気付き、勉強なり嬉しいです。

RE: ヘッダーと本文の間に謎の空間があります。

Akira — Tue, 11 Jul 2023 04:19:07 +0000

@morinoki5 さん

chu-ya さんとは違う案。せっかく試したので書いておきます。

① Cocoon 設定 > ヘッダーの「高さ」に 350 とお書きになっているはずです。その 350 を削除します。

② 子テーマの style.css に CSS を書きます。

.header {
  aspect-ratio: 1900 / 350;
}

.header-in {
  height: max(184px, 100%);
}

.logo-text {
  padding: 64px 0 0;
}

chu-ya さんの方法とは、スマホで見た時のヘッダーの高さが違います。上記の CSS であれば、ヘッダーの高さは必ず 184px 以上になります。

RE: ヘッダーと本文の間に謎の空間があります。

大門未知子 — Tue, 11 Jul 2023 03:51:07 +0000

●補足

画面幅834px以下の高さは、以下のタイトルロゴと上下余白分となる。

.logo-text {
  padding: 20px 0 30px;
}

RE: ヘッダーと本文の間に謎の空間があります。

大門未知子 — Tue, 11 Jul 2023 03:26:54 +0000

●原因

ヘッダーmin-height:350pxとなっている。

画面幅1024px以上
headerのbackground-size:100%の為、背景画像の大きさは画面の幅に応じ小さくなる。
最小高さは350px固定の為、余白ができる。

2023-07-11_12h22_32.png

画面幅835～1023px
background-size:coverとなり、背景画像を350pxに合わせる為、余白がなくなる。

2023-07-11_12h23_44.png

画面幅834px以下
min-height:350px→0pxとなる為、背景画像の高さが合わず、約510pxまで全体が表示されなくなる。

2023-07-11_12h24_31.png

●対策

CSSを追加します。

画像の縦横比から、画面幅に応じた高さを求めます。

:root {
  --pic-w: 1900;/* 画像横幅 */
  --pic-h: 350; /* 画像縦幅 */
}

.header {
  align-items: center;
  display: flex;
  min-height: calc((100vw - 17px) * var(--pic-h) / var(--pic-w));
}

.header .header-in {
  min-height:unset;
}

●ご参考

https://seous.info/wp-customize/7669

RE: ヘッダーと本文の間に謎の空間があります。

morinoki5 — Tue, 11 Jul 2023 02:11:56 +0000

@yhira 様

一旦解決したと思って解決済みを押してしまったのですが、Cocoon設定画面のプレビューではなく投稿記事からプレビュー画面を見てみたら、やはりヘッダー画像が切れてしまっていたので、再度追加の質問をさせていただくことにしました。

↑の返信が編集できなくなっていたので、新たに返信させていただきます。

分かりづらくなってしまったので今の状態をまとめてみました。

画像が縦幅350ある（1900×350）

Cocoon設定でヘッダー高さ350にする→謎の空間ができる。

Cocoon設定でヘッダー高さ200にする→画像が切れる。

わいひら様に頂いた画像が縦幅680くらいあったのですが、ヘッダーの高さを350にしても

600以上ないと空間ができてしまうものなのでしょうか？

画像をこのままで空間をなくす設定はできますか？

お手数をおかけしますが、どうぞよろしくお願いいたします。

2.png