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. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

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

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

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

28 投稿
3 ユーザー
9 Reactions
3,187 表示
(@strollbear)
Active Member Registered
結合: 4年前
投稿: 15
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)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

前略、stallbear さん

投稿者:: @stallbear

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

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

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

 

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

 

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

 

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

 

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

This post was modified 4年前 by リフィトリー

   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

stallbear さん

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

 

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

 

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

 

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


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

stallbear さん

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

 

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

 


   
(@strollbear)
Active Member Registered
結合: 4年前
投稿: 15
Topic starter  

@leafytree さん

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

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

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

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

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

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

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

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

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

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

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

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


   
(@strollbear)
Active Member Registered
結合: 4年前
投稿: 15
Topic starter  

@leafytree さん

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

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

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


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@stallbear さん

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

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

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

 

This post was modified 4年前 by リフィトリー

   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17132
 

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

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


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@yhira さん

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

 

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

 

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

 

This post was modified 4年前 by リフィトリー

   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@yhira さん

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

 

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


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@stallbear さん

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

 

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


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@yhira さん

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

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

 


   
(@strollbear)
Active Member Registered
結合: 4年前
投稿: 15
Topic starter  

@yhira さん

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

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


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

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

 

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

This post was modified 4年前 by リフィトリー

   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17132
 

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


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17132
 
投稿者:: @leafytree

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

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

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


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@yhira さん

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

 

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

 


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17132
 

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


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@yhira さん

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

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

 


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17132
 

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


   
(@strollbear)
Active Member Registered
結合: 4年前
投稿: 15
Topic starter  

こんばんは。

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

 


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@strollbear さん

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

 

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

 

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

 

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

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


   
(@strollbear)
Active Member Registered
結合: 4年前
投稿: 15
Topic starter  

@leafytree さん

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

 

>わいひらさん

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


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17132
 

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


   
strollbear reacted
(@strollbear)
Active Member Registered
結合: 4年前
投稿: 15
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)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17132
 

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

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


   
strollbear reacted
(@strollbear)
Active Member Registered
結合: 4年前
投稿: 15
Topic starter  

@yhira わいひらさん

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

 


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17132
 

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


   
共有:

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

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

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

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

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

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

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

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