サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2023年7月9日 21:42
はじめまして。
ブログを作っているのですが、ヘッダーと本文の間に謎のスペースができてしまいす。
最初はみるらいとというテーマを使って作っていたのですが、追加CSSを色々やっていたらいつの間にかこのスペースができていました。
今はテーマはなしにして、追加したCSSも一旦削除してから最低限のものを少しずつ追加している段階です。
ただ、この空間はずっとあります。
添付画像の「ココ」となっているスペースです。
ここをもっと縮めるか消すかしたいのですが、どんな設定にすればよいでしょうか?
サイトのリンクはこちらです。
http://manekuru.net/2023/07/01/%e3%83%86%e3%82%b9%e3%83%88/
どうぞよろしくお願いいたします。
Topic starter
2023年7月11日 10:31
@yhira 頂いた画像にしたらなくなりました。
おっしゃる通り画像の縦幅が足りなかったのかなと思い、Cocoon設定のヘッダーの高さを試しに200にしてみたら
添付画像のように謎の空間消えました。
ただ、元の猫のヘッダー画像の高さも350ありました。
何故Cocoon設定のヘッダーの高さを350にすると縦幅が足りなくなって空間ができてしまうのでしょうか?
自分のパソコンから見るとヘッダーの高さ200にした時が期待した通りの見た目なのですが、画像自体のサイズを調べると350縦幅があります。
このままヘッダーの高さ200にしておいて大丈夫でしょうか?
パソコンの画面サイズによってヘッダー画像が途中で切れている、ということはあり得るのでしょうか?
ちなみに横幅は1900です。
This post was modified 1年前 2回 by morinoki5
Topic starter
2023年7月11日 11:11
@yhira 様
一旦解決したと思って解決済みを押してしまったのですが、Cocoon設定画面のプレビューではなく投稿記事からプレビュー画面を見てみたら、やはりヘッダー画像が切れてしまっていたので、再度追加の質問をさせていただくことにしました。
↑の返信が編集できなくなっていたので、新たに返信させていただきます。
分かりづらくなってしまったので今の状態をまとめてみました。
画像が縦幅350ある(1900×350)
Cocoon設定でヘッダー高さ350にする→謎の空間ができる。
Cocoon設定でヘッダー高さ200にする→画像が切れる。
わいひら様に頂いた画像が縦幅680くらいあったのですが、ヘッダーの高さを350にしても
600以上ないと空間ができてしまうものなのでしょうか?
画像をこのままで空間をなくす設定はできますか?
お手数をおかけしますが、どうぞよろしくお願いいたします。
2023年7月11日 12:26
●原因
ヘッダーmin-height:350pxとなっている。
画面幅1024px以上
headerのbackground-size:100%の為、背景画像の大きさは画面の幅に応じ小さくなる。
最小高さは350px固定の為、余白ができる。
画面幅835~1023px
background-size:coverとなり、背景画像を350pxに合わせる為、余白がなくなる。
background-size:coverとなり、背景画像を350pxに合わせる為、余白がなくなる。
画面幅834px以下
min-height:350px→0pxとなる為、背景画像の高さが合わず、約510pxまで全体が表示されなくなる。
min-height:350px→0pxとなる為、背景画像の高さが合わず、約510pxまで全体が表示されなくなる。
●対策
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; }
●ご参考
2023年7月11日 12:51
●補足
画面幅834px以下の高さは、以下のタイトルロゴと上下余白分となる。
.logo-text { padding: 20px 0 30px; }
2023年7月11日 13:19
@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 以上になります。
2023年7月12日 18:55
同様の問い合わせがこれまで結構あったため、[Cocoon設定]→[ヘッダー]→の「ヘッダー背景画像」が設定されている時、ヘッダーのサイズを背景画像のアスペクト比率にできる「背景画像の全てを表示」機能をテスト的に追加してみました。
この機能を有効にしている時、ヘッダーサイズをAkiraさんが書かれたような状態になるようにしました。
------------------------------------------------
https://github.com/xserver-inc/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------
This post was modified 1年前 by わいひら
morinoki5 reacted
2023年7月13日 18:00
ご確認いただきありがとうございます。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。