現在「イノセンス」スキンを適用中です。

ウィンドウサイズを変えるとヘッダ背景画像が隠れ、メニューが下りてくる | 不具合報告 | Cocoon フォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

対象のページのURL:

相談内容:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法 
  7. ブラウザ環境チェックツール

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

また、問題の解決に至った場合には、トピック冒頭の「解決済み」リンクをクリックしていただけますと幸いです。

wpForoの解決済みリンク

また、有用な返信があった場合は「いいね!」リンクもご活用ください。返信者の励みになります。

wpForoのいいねリンク

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

スポンサーリンク
ウィンドウサイズを変えるとヘッダ背景画...
 
共有:
通知
すべてクリア

[解決済] ウィンドウサイズを変えるとヘッダ背景画像が隠れ、メニューが下りてくる


strollbear
(@strollbear)
Active Memberサイト
結合: 9か月前
投稿: 13
Topic starter  

コロナ禍の自粛生活のついでにブログをいちから作り直しています。その際に見つけたCocoonに惚れ込んで使わせて頂いています。ありがとうございます。

 

不具合状況

サイト: https://foto.4-strings.com

大きな問題ではないのですが、ヘッダを表示させた状態でウィンドウサイズを少しでも変えると、ヘッダ背景画像が消えて、メニューがウィンドウ最上部に下りてきます。

そのまま上にスクロールは出来ず、いったん下げてから上に戻すとヘッダ背景画像が表示されます。

ヘッダ固定を解除すると現象は発生しません。

Akismet Anti-Spam 4.1.6以外のプラグインを無効化しても現象は発生します。

ブラウザ:SafariとGoogle Chromeのどちらでも同じ現象が発生します。

ウィンドウサイズを変更しなければ何も問題は無いのですが、どこか気持ち悪いので、改善する方法があれば御教示頂きたくお願いします。

 

【設定等】

ヘッダーレイアウト:センターロゴ(デフォルト)

ヘッダの固定:ヘッダーを固定する

高さ:198px

ヘッダ画像サイズ:1240px x 240px

 

----------------------------------------------
サイト名:美味いメシと旅さえあれば
サイトURL: https://foto.4-strings.com
ホームURL: https://foto.4-strings.com
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
親テーマスタイル:/wp-content/themes/cocoon-master/style.css
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン:5.5
PHPバージョン:7.4.3
ブラウザ:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.2 Safari/605.1.15
サーバーソフト:Apache
サーバープロトコル:HTTP/2.0
エンコーディング:br, gzip, deflate
言語:ja-jp
----------------------------------------------
テーマ名:Cocoon
バージョン:2.2.2
カテゴリ数:14
タグ数:131
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.2
style.cssサイズ:845バイト
functions.phpサイズ:203バイト
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:4
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
WEBフォントLazy Load:0
----------------------------------------------
利用中のプラグイン:
Akismet Anti-Spam 4.1.6
Category Order and Taxonomy Terms Order 1.5.7.2
Google XML Sitemaps 4.1.1
Jetpack by WordPress.com 8.8.2
Jetpack Without Promotions 1.1.0
Media Library Assistant 2.84
WP Multibyte Patch 2.9
----------------------------------------------


リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5202
 

前略、stallbear さん

投稿者:: @stallbear

大きな問題ではないのですが、ヘッダを表示させた状態でウィンドウサイズを少しでも変えると、ヘッダ背景画像が消えて、メニューがウィンドウ最上部に下りてきます。

そのまま上にスクロールは出来ず、いったん下げてから上に戻すとヘッダ背景画像が表示されます。

私の環境で拝見しますと。グローバルメニューが上から降りてきても、マウスのスクロールホイールで操作すれば、上にスクロールが可能のようです。(私はWindows10なので、Mac環境の動作については、わかりかねますが・・)

 

画面右下に表示される、「トップへ戻るボタン」をクリックした場合は、グローバルメニューが重複しないように、ヘッダー画像の位置までは、戻らずに、メインカラムのトップ辺りで止まるようです。

 

これは、このCocoonのサイトでも、同様なので、こういう仕様なのかなぁ、と思っていましたが、それとは別の問題になりますでしょうか?

 

それとも、「ヘッダー固定」機能を使いたいのだけれど、希望する動作とちょっと異なる、ということになりますでしょうか?

 

あるいは、stallbearさんの環境では、正常な動作にならない、という内容になりますでしょうか?

This post was modified 9か月前 by リフィトリー

わいひら 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5202
 

stallbear さん

ようやく、意味がわかりました。

 

確かに、サイトを一旦表示されてから、ブラウザの画面幅を縮めた場合は、マウスでも、ほんの少しだけ下にスクロールしてからでないと、上にスクロールできない、ということみたいですね。

 

これは、きっと、わいひらさんが、コメントをくださるのではないかと思います。

 

ちょっと、事情を理解するのに手間どってしまいました。


リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5202
 

stallbear さん

Cocoonのサイトでも同じ症状が出るみたいなので、stallbear さんに限ったことではないのかもしれませんね。

 

私は、トップへ戻るボタンで、最上部まで戻っちゃってもいいような気もしますが・・(でも、これは作者様に聞いてみないと、いろいろな理由があるのかもしれません)

 


strollbear
(@strollbear)
Active Memberサイト
結合: 9か月前
投稿: 13
Topic starter  

@leafytree さん

早速のコメントありがとうございます。

Windows環境での確認ありがとうございます。

私の環境で拝見しますと。グローバルメニューが上から降りてきても、マウスのスクロールホイールで操作すれば、上にスクロールが可能のようです。(私はWindows10なので、Mac環境の動作については、わかりかねますが・・)

グローバルメニューが上から降りてきたあと、マウスのスクロールホイールで上にスクロール出来ないのです。

添付のスクリーンキャプチャを見て頂ければお分かりになるかと思いますが、スクロールバーが上限に表示されています。この状態ではスクロールホイールでも上には上がりません。

画面右下に表示される、「トップへ戻るボタン」をクリックした場合は、グローバルメニューが重複しないように、ヘッダー画像の位置までは、戻らずに、メインカラムのトップ辺りで止まるようです。

これはMacでも同じ動きでした。

ただし、スクロールバーは上限位置に表示されていますが、マウスのスクロールホイールで少し上に上げると急にヘッダ背景画像が表示されました。いったん下にスクロールすることで何か条件が変わっているのかも知れません。

あと気付いていなかったのですが、このCocoonサイトでも同一の現象が発生するので、どうやらMac特有の現象なのかも知れません。

ブラウザもsafariだけでなくChromeで確認したのですが・・・

それとも、「ヘッダー固定」機能を使いたいのだけれど、希望する動作とちょっと異なる、ということになりますでしょうか?

ウィンドウサイズを変えない限り問題は発生しませんし、普通に使う分には希望している動作をしてくれています。ただ少し違和感を感じただけですし、不具合というには手間に対しての効果が低いと思いますので、このまま使用したいと思います。


strollbear
(@strollbear)
Active Memberサイト
結合: 9か月前
投稿: 13
Topic starter  

@leafytree さん

重ね重ねの確認、お手数をおかけいたしました。ありがとうございます。

windowsでも同じ状況なのですね。

前のリプでも書いたのですが、直ればいいかな、程度なので、わいひらさんの気が向けば確認いただければと思っています。


リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5202
 

@stallbear さん

試しに、ソースコードをコピーしてローカルで固定ヘッダー用のJavaScriptのコードの中の以下の部分をコメントアウトしてみたら、症状はなくなったのですが、私は、JavaScript は詳しくないので、きっと、何かしら必要なものなのでしょう。

 /*ウインドウがリサイズされたら発動*/
$window.resize(function() {
/*ウインドウの幅を変数に格納*/
var w = $window.width();
if (w <= mobileWidth) {/*モバイル端末の場合*/
staticHeader();
} else {/*パソコン端末の場合*/
stickyHeader();
}
});

たぶんですが、わいひらさんが、ご説明くださるような気がします。

 

This post was modified 9か月前 by リフィトリー

わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11965
わいひら - Facebookわいひら - Twitter
 

おそらくそれは、スクロール位置がトップの0から少しでもずれたら、固定ヘッダー表示になる仕様になっていたからかと思います。
僕も前々から、ここはもう少し余裕を持たせても良いかなと思っていつつも、そのままにしていた^^;ので、今回少し余裕をもたせて調整してみました。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------


リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5202
 

@yhira さん

早速、新しいテーマファイルをローカルサイトにインストールして、グローバルメニューをヘッダー固定にして試してみました。

 

PCのブラウザで画面の横幅を狭くしたときに、ヘッダーが上から降りてこなくなりました。

 

また、画面右下に表示されるトップへ戻るボタンをクリックしたとき、最上部まで戻るようになりました。(でも、これって、以前のように途中まで戻る方が良かった、という方はいらっしゃらないかな?私は、最上部までの方が自然なように感じますけれども・・)

 

This post was modified 9か月前 by リフィトリー

リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5202
 

@yhira さん

でも、該当部分のコードの役割は、私には、まだ、ちょっとわかりません。

 

もう少し、勉強しなきゃ・・


リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5202
 

@stallbear さん

このCocoonのサイトにも新しいコードが適用されているみたいです。

 

表示の見本には、このCocoonのサイトを見た方がわかりやすいかもしれませんね。


リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5202
 

@yhira さん

Cocoonのサイトの上部にマージンがあるみたいなんですけど、これって、これでいいのでしょうか?

html {
margin-top: 32px !important;
}

 


strollbear
(@strollbear)
Active Memberサイト
結合: 9か月前
投稿: 13
Topic starter  

@yhira さん

ありがとうございます!
早速アップロードしてみましたところ、ヘッダ背景画像が隠れることはなくなりました。
(幅を変えるだけでカクッと表示がずれてしまうことで、異常動作のように感じてしまっていたんだと思います)

今後ともよろしくお願いいたします。


リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5202
 

きっと、何かテストされていらっしゃるのでしょうね。

 

私、個人的には、ヘッダー固定の動きが、自然でスムーズになったように思います。

This post was modified 9か月前 by リフィトリー

わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11965
わいひら - Facebookわいひら - Twitter
 

移転は、スクロールバーをカッチカチに0ポジションにしないと戻らなかったので、僕も以前から、ちょっとした窮屈感は感じていました。
とりあえず、特に問題はないようなので、次のバージョンを現在の仕様でいきたいと思います。


リフィトリー 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11965
わいひら - Facebookわいひら - Twitter
 
投稿者:: @leafytree

Cocoonのサイトの上部にマージンがあるみたいなんですけど、これって、これでいいのでしょうか?

これは多分、ログアウトすると表示されないのかなと思います。
おそらく、Adminバーが何かしらのJavaScriptエラーで表示されていない際にそのように表示されているのかも。

僕の環境では、Adminバーが問題なく表示されていて、ちょっと原因までは分からないかもしれません。


リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5202
 

@yhira さん

確かにフォーラムにログインしているときだけみたいです。

 

プラグインのwpforoの関連でしたか・・

 


わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11965
わいひら - Facebookわいひら - Twitter
 

Adminバー自体は、WordPressの機能なのでwpForo以外の原因の可能性もあるかもしれません。
もしかしたら、デベロッパーツリーのコンソールでJavaScriptエラーが出ているとかがあるのかもしれません。
ただエラーを見ても、直せるかどうかちょっと分からないですが^^;


リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5202
 

@yhira さん

以下のCSSは、WordpressのAdminバー(ツールバー)を表示するためのもののようですね。

html {
margin-top: 32px !important;
}

 


わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11965
わいひら - Facebookわいひら - Twitter
 

上のスクリーンショットはアドミンバーが表示されているんですね。
本来はそのように表示するための、CSSかと思います。


strollbear
(@strollbear)
Active Memberサイト
結合: 9か月前
投稿: 13
Topic starter  

こんばんは。

この現象が再発しているのですが、最新のmain themeで戻ってしまいました?

 


リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5202
 

@strollbear さん

その後、ブラウザのデベロッパーツールのコンソールにエラーが出ているというお問い合わせのトピックがあり、変数の宣言を追記しているみたいです。

 

私はよくわからないですが、そもそものコードの設定に問題があるのかもしれません。

 

おそらく、わいひらさんが療養から戻られたら、修正くださるかと思います。

 

他の課題もあろうかと思われますので、順次、ご対応くださるのではと思います。

https://github.com/yhira/cocoon/commit/0f34a5c711780994992ff1f7366e10dc2dfacbf5


strollbearわいひら 件のいいね!
strollbear
(@strollbear)
Active Memberサイト
結合: 9か月前
投稿: 13
Topic starter  

@leafytree さん

コメントありがとうございます。
気長に待つようにします。

 

>わいひらさん

特に急ぐ問題でもクリティカルな問題でもありませんので、お手すきの際にでも手がけていただければと思います。
よろしくお願いします。


リフィトリー 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11965
わいひら - Facebookわいひら - Twitter
 

よろしければお手数ですが改めて環境情報をいただいてよろしいでしょうか。

This post was modified 7か月前 by わいひら

strollbear 件のいいね!
strollbear
(@strollbear)
Active Memberサイト
結合: 9か月前
投稿: 13
Topic starter  

@yhira わいひらさん

お世話になってます。

現在の環境情報です。

----------------------------------------------
サイト名:美味いメシと旅さえあれば
サイトURL: https://foto.4-strings.com
ホームURL: https://foto.4-strings.com
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
親テーマスタイル:/wp-content/themes/cocoon-master/style.css
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン:5.5.3
PHPバージョン:7.4.3
ブラウザ:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Safari/605.1.15
サーバーソフト:Apache
サーバープロトコル:HTTP/2.0
エンコーディング:br, gzip, deflate
言語:ja-jp
----------------------------------------------
テーマ名:Cocoon
バージョン:2.2.4.5
カテゴリ数:26
タグ数:246
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.2
style.cssサイズ:845バイト
functions.phpサイズ:820バイト
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:4
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp-content/uploads/2020/08/6042445140_bf7a6198c2_z.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
WEBフォントLazy Load:0
----------------------------------------------
利用中のプラグイン:
AddQuicktag 2.5.3
Akismet Anti-Spam 4.1.7
Aurora Heatmap 1.4.9
Category Order and Taxonomy Terms Order 1.5.7.3
Google XML Sitemaps 4.1.1
Jetpack by WordPress.com 9.0.2
Jetpack Without Promotions 1.1.0
Media Library Assistant 2.84
Visual Portfolio, Posts & Image Gallery 2.8.1
Wordfence Security 7.4.12
WP Multibyte Patch 2.9
----------------------------------------------


わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11965
わいひら - Facebookわいひら - Twitter
 

環境情報をありがとうございます。
該当部分を修正してみました。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------
https://github.com/yhira/cocoon/commit/41101bdfc7170fe077653d051e5169ca66d68679


strollbear 件のいいね!
strollbear
(@strollbear)
Active Memberサイト
結合: 9か月前
投稿: 13
Topic starter  

@yhira わいひらさん

早速インストールして確認してみましたところ、改善致しました。
ありがとうございました!

 


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11965
わいひら - Facebookわいひら - Twitter
 

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


共有:
スポンサーリンク
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:2年9ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2021/6/30まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:2年7ヶ月

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DBは7日以内なら無料自動復旧可能
×ファイルは有料かつ手動での復旧
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:17年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:4年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:5年

Cocoon
タイトルとURLをコピーしました