「メイド・イン・ヘブン」スキン適用中

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カスタマイズ依頼

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

モバイルヘッダーでレイアウトシフトが起...
 
共有:
通知
すべてクリア

モバイルヘッダーでレイアウトシフトが起こる

44 投稿
4 ユーザー
14 Reactions
342 表示
 his-
(@his)
Active Member Registered
結合: 10か月前
投稿: 11
Topic starter  

モバイルの時のヘッダーでレイアウトシフトが起こります。

 

Cocoon設定:

  • ヘッダーモバイルボタン
  • モバイルボタンの固定表示

環境:

  • 高速化無効
  • プラグイン全て無効
  • 独自CSS削除
  • キャッシュ削除

これらでも改善されませんでした。

以前はそのようなことがなかったと思うのですが、何か構造変更によるものでしょうか?

 
 
.has-logo-button .logo-menu-button {
flex-grow: 99;
}
が後から適用されているようなイメージです。
 
 
キャプチャで申し訳ないのですが、上の状態から下の状態へ変化します。

   
引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 6年前
投稿: 16568
 

レイアウトシフトとは以下のような定義でよろしいでしょうか。


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 6年前
投稿: 16568
 

このサイトでも同様のことになっていますね。
https://wp-cocoon.com/downloads/?theme-switch=skin-template


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 6年前
投稿: 16568
 

とは言ってもただメディアクエリで読み込んでいるだけなんですけどね…。
https://github.com/xserver-inc/cocoon/blob/cd2d90765a065fa812d0a75a565090763b456b17/style.css#L11294
style.cssの11294行目で書かれているので、トップから読み込まれる時差とかなんですかね。

投稿者:: @his

以前はそのようなことがなかったと思うのですが、何か構造変更によるものでしょうか?

flex-grow: 99;が追加されたのは、5年前なので最近の構造変化ではないような気がします。
https://github.com/xserver-inc/cocoon/commit/c29e6ee9008152bbd8de73ad9393d1fd4077169b#diff-b627632bdd8e8c6e28eec59d575d52e6850d9ec601602d6c460cf071f5ddde6cR99

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

   
返信引用
 his-
(@his)
Active Member Registered
結合: 10か月前
投稿: 11
Topic starter  

@yhira 

お返事ありがとうございます。

はい、読み込み時に一瞬CSSの反応が遅れてレイアウトがずれるという意味合いで間違い無いです。

定期的にアップデートしサイトに問題ないか確認しているのですが、この現象は少なくとも半年前には見られなかったような気がします。

Wi-Fi以外の環境だと顕著に現れるので、改善を図ろうと追加CSSの方で例えばflex:1と上書きしても改善せずでした。

引き続き原因探ってみます。


   
わいひら reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7101
 

すみません。
関係ないかもしれませんが、素朴な疑問ということで。

デベロッパーツールでCocoon公式サイト見ると、以下のような感じなのですけれど。

 
loading="lazy"属性があるのに、widthとheightがないと、ふと思ったのですけれど。
それともファーストビューだから、loading="lazy"が不要?

   
返信引用
 his-
(@his)
Active Member Registered
結合: 10か月前
投稿: 11
Topic starter  

私の環境(iPhone13/Safari)でもたまにロゴ表示前にサイト名が表示される場合があります。

Chromeだとloading="lazy"はないのですが、Safariだとありますね。

This post was modified 2か月前 2回 by his-

   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7101
 

loading="lazy"指定時には、widthとheightが必要だと思っていたもので、少し確認をさせていただきたいなと。
(ファーストビューということもありそうですし、私の認識が違うかもしれませんので)

私が貼りつけたGIFでは、画像が遅延読み込みされて、その後シフトしているように見えたので。

(そういうこともあり、素朴な疑問ということで。)

ウェブ向けのブラウザレベルの画像遅延読み込み
画像にディメンション属性を指定する
https://web.dev/articles/browser-level-image-lazy-loading?hl=ja#dimension-attributes


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 6年前
投稿: 16568
 

投稿者:: @mk2_mk2

loading="lazy"属性があるのに、widthとheightがないと、ふと思ったのですけれど。

loading="lazy"属性ついてます?
僕の環境だとないように見えるんですけど。

ソースコードにも入れてないように見えます。
https://github.com/xserver-inc/cocoon/blob/cd2d90765a065fa812d0a75a565090763b456b17/tmp/mobile-logo-button.php#L23

何か挿入される条件とかがあるんですかね。


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7101
 

先程キャプチャしたものには、ついていたんですよね。

 
今見たら、ないです。
 
ん???
 
更に、リロードしてみたら、またあります。
 
これは・・・?

   
わいひら reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7101
 

デベロッパーツールを起動していない状態でロードして、表示(つまりPC表示)。
その後デベロッパーツールを起動して、モバイル表示を確認すると、loading="lazy"はないです。

 

最初からデベロッパーツールを起動しておいて、モバイル表示にします。
(つまり上の状態からの続き)
その状態で、リロードして、その後確認すると、loading="lazy"があります。

 

【追記】

デベロッパーツールを起動していても、いわゆるPC表示の状態でリロードして、その後モバイル表示へ変更した場合、loading="lazy"はないですね。

でも、最初からモバイル表示の状態でリロードすると、loading="lazy"が付いてきます。


   
わいひら reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7101
 

ふと思いましたが。

 
これ、「Cocoon設定」-「高速化」の遅延読み込みではないでしょうか?

   
わいひら reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7101
 

私のローカル環境で、デベロッパーツール上で、なのですけれど。

「Cocoon設定」-「高速化」の「遅延読み込み」が、無効な場合
(2回リロードしています、GIFなのですが、変化ないので止まって見えるかも・・・)

 
 
「Cocoon設定」-「高速化」の「遅延読み込み」が、有効な場合
(同様に2回リロードしています)
 
 
【追記】
 
his-さんの環境で、「Cocoon設定」-「高速化」の「遅延読み込み」は、現在有効なのでしょうか?
有効な場合、無効にすると変化ありますでしょうか?

   
わいひら reacted
返信引用
 his-
(@his)
Active Member Registered
結合: 10か月前
投稿: 11
Topic starter  

高速化は無効にしてあるのと、PCのChromeでもレイアウトシフトが起きているので、レイジーロードはまた別の問題かと思っております。

モバイルヘッダーは、HTMLの順序的にfooterの下に位置しているので、ブラウザが自動的に判断してloading="lazy"を付与しているんでしょうかね。

This post was modified 2か月前 by his-

   
わいひら reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7101
 

his-さん

フォーラム上部の案内の通り、環境情報をご提示いただけないでしょうか。

公開できないなら、URLは削除していただいて構いません。

あまりにも情報がないです。

こちらから、実際の状況が確認できない以上、抽象的な話をしても、話は進まないです。

推測にも限界があります。

何か別のきっかけがないと、おそらくこれ以上進まないです。

高速化が無効とは、Cocoonの遅延読み込みが無効ということで良いのですよね。

曖昧にではなく、具体的に会話しないと、認識齟齬や誤解が生じます。

ブラウザが自動的にloading属性をつけることってあるんですか?


   
返信引用
 his-
(@his)
Active Member Registered
結合: 10か月前
投稿: 11
Topic starter  

あまりにも情報がないです。

こちらから、実際の状況が確認できない以上、抽象的な話をしても、話は進まないです。

推測にも限界があります。

ご自身でも、公式サイトでも再現できているのであれば検証は可能かと思いますが…。

 

----------------------------------------------
サイト名:demo
コンテンツ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バージョン:6.5
PHPバージョン:8.2.9
ブラウザ:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4.1 Safari/605.1.15
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja
----------------------------------------------
テーマ名:Cocoon
バージョン:2.7.2.3
カテゴリー数:1
タグ数:1
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.3
style.cssサイズ:845 バイト
functions.phpサイズ:5826 バイト
----------------------------------------------
Gutenberg:1
Font Awesome:5
Auto Post Thumbnail:1
Retina:1
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
----------------------------------------------

 


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7101
 

投稿者:: @his

ご自身でも、公式サイトでも再現できているのであれば検証は可能かと思いますが…。

これは、Cocoonの遅延読み込みが有効であるために、loading="lazy"が指定されています。

しかし、widthとheightの指定がないために、発生しています。

ですので、私の再現通り、Cocoonの遅延読み込みを無効にすると、解消します。

先に書いた通りです。

投稿者:: @mk2_mk2

loading="lazy"属性があるのに、widthとheightがない

投稿者:: @mk2_mk2

「Cocoon設定」-「高速化」の「遅延読み込み」が、無効な場合
(2回リロードしています、GIFなのですが、変化ないので止まって見えるかも・・・)

 
 
「Cocoon設定」-「高速化」の「遅延読み込み」が、有効な場合
(同様に2回リロードしています)
 

上記のように、私の環境ではCocoonの遅延読み込みが無効の場合は、動かないです。

(静止画ではなく、どちらもGIF動画を貼り付けています。)

このCocoon公式サイトも、遅延読み込みが有効だと思います。

 

his-さんは、Cocoonの遅延読み込みを無効になさっているとのこと。

この状態で、事象の再現はできていないです。

よって、検証も難しいと思います。まずは再現させるところからだと思います。

環境情報には、プラグインの情報がないようですが。


   
返信引用
 his-
(@his)
Active Member Registered
結合: 10か月前
投稿: 11
Topic starter  

環境情報には、プラグインの情報がないようですが。

さすがに揚げ足取りをしているようにしか見えません。

  • 高速化無効
  • プラグイン全て無効
  • 独自CSS削除
  • キャッシュ削除

 


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7101
 

投稿者:: @his

さすがに揚げ足取りをしているようにしか見えません。

そんなつもりもないですし、そんなことに時間を使う気もないです。

無効化してあるということですね。

見落としていました、申し訳ないです。

残念ながら、その状態で私の環境では、本事象は今のところ再現できません。

 

時間を使い真摯に取り組んでいるつもりですが、お気に触るようですので、撤退させていただこうと思います。

今のところ再現ができず、検証も難しいです。(再現のきっかけがあれば・・・。テーマに不具合があるなら解消はしたいです)


   
返信引用
 his-
(@his)
Active Member Registered
結合: 10か月前
投稿: 11
Topic starter  

@mk2_mk2 

時間を使い真摯に取り組んでいるのは私も同様です。
(少なくとも私独自の問題ではないので)

改善されたというご自身の環境も記載されないと、こちらも比較検証できないのも同様です。

 

 

まだこちらで検証していない事といえばサーバー側のキャッシュ辺りですかね…。

Safariではloading属性がついていたのに、Chromeではついていなかったのも気になります。

WordPress側で何らかのフィルタリングでつけているのかもしれませんがこのあたりは不明確です。


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 6年前
投稿: 16568
 

モバイルヘッダーがレイアウトシフトする不具合修正を行いました。
flex-grow: 99;が原因っぽくはなく、ここのwidth: 100%;が曖昧だったのが良くなかったっぽい。
https://github.com/xserver-inc/cocoon/commit/fbf7b9f5c24a7c4bf7d2caefb1e96418b9b88fdc#diff-bb896ccee9074e1be5039e21374049db27dcbee4e691c7d16e419c49c4f6c268L38
あらかじめ値をwidth: 70px;と決め打ちすることで、僕の環境では解消されたっぽい?です。
https://github.com/xserver-inc/cocoon/commit/fbf7b9f5c24a7c4bf7d2caefb1e96418b9b88fdc#diff-bb896ccee9074e1be5039e21374049db27dcbee4e691c7d16e419c49c4f6c268R39

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

   
mk2 reacted
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 6年前
投稿: 16568
 

モバイルサイトロゴにレイジーロードを適用しないように修正しました。
https://github.com/xserver-inc/cocoon/commit/e9c31d20563ccd495ebd30db6b8e8c3ff56d1c2b
あとこれは効果があるかはわからないけど(基本的に大きな画像が設定されるので)、モバイルロゴ属性にwidthとheight属性を付加しました。
https://github.com/xserver-inc/cocoon/commit/36923388e10dd8f4dd2728c932fe730656c66046
あとこれも効果というのはあまりないんですけど、「上にあるものは、上で読み込んだ方がいいのかな」と思いmp/mobile-header-menu-buttons.phpテンプレートの場所ヘッダー付近に移動しました。
https://github.com/xserver-inc/cocoon/commit/a07045800b100ba25d4f381804eb26b10e8cd3d8
↑はテンプレートをカスタマイズしている人には影響が出るので、元に戻すかもしれません。


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 6年前
投稿: 16568
 

ダウンロードファイルはこちら
------------------------------------------------
https://github.com/xserver-inc/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------

確認用に当サイトにも適用しておきました。
https://wp-cocoon.com/?theme-switch=skin-colors-blue


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7101
 

ご対応いただき、ありがとうございます。

私の環境では、「Cocoon設定」の「遅延読み込み」が「無効」の状態では、なかなか発生しなかったのですが・・・。
(ロゴが小さいのかしら?)

今やっと、発生させることができました。
画面をタブレットサイズ(添付はiPad miniのサイズ)にして、発生させることができました。
(それでも、毎回は発生しませんので、何かリロードして試す感じです)

 
上記の状態で
  • 「Cocoon設定」の「遅延読み込み」が「無効」の状態
  • 今回の、複数ある対応は、それぞれ「対象のソースだけを入れ替える」

上記の形で、確認させていただきました。

 


投稿者:: @yhira

あらかじめ値をwidth: 70px;と決め打ちすることで、僕の環境では解消されたっぽい?です。
https://github.com/xserver-inc/cocoon/commit/fbf7b9f5c24a7c4bf7d2caefb1e96418b9b88fdc#diff-bb896ccee9074e1be5039e21374049db27dcbee4e691c7d16e419c49c4f6c268R39

私の環境でも、この対応(だけ)で、今回の事象は発生しなくなりました。

 


投稿者:: @yhira

モバイルサイトロゴにレイジーロードを適用しないように修正しました。
https://github.com/xserver-inc/cocoon/commit/e9c31d20563ccd495ebd30db6b8e8c3ff56d1c2b

こちらは、「Cocoon設定」の「遅延読み込み」を「有効」にして、HTMLソースに介入がないことを確認させていただきました。

以下は、「Cocoon設定」の「遅延読み込み」が「有効」な状態です。

 
 

 
 
投稿者:: @yhira

あとこれは効果があるかはわからないけど(基本的に大きな画像が設定されるので)、モバイルロゴ属性にwidthとheight属性を付加しました。
https://github.com/xserver-inc/cocoon/commit/36923388e10dd8f4dd2728c932fe730656c66046

この対応で、widthとheightが追加されることを確認させていただきました。

 
しかしながら、この対応では、今回の事象は解消しませんでした。
 
 

 

投稿者:: @yhira

あとこれも効果というのはあまりないんですけど、「上にあるものは、上で読み込んだ方がいいのかな」と思いmp/mobile-header-menu-buttons.phpテンプレートの場所ヘッダー付近に移動しました。
https://github.com/xserver-inc/cocoon/commit/a07045800b100ba25d4f381804eb26b10e8cd3d8

この対応でも、今回の事象は解消しませんでした。

 

投稿者:: @yhira

↑はテンプレートをカスタマイズしている人には影響が出るので、元に戻すかもしれません。

ちょっと影響が大きそう・・・な印象はありますね。


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7101
 

ふと思ったのですけれど。

以下の対応は、あった方が良いのかもしれないですね。

投稿者:: @yhira

あとこれは効果があるかはわからないけど(基本的に大きな画像が設定されるので)、モバイルロゴ属性にwidthとheight属性を付加しました。
https://github.com/xserver-inc/cocoon/commit/36923388e10dd8f4dd2728c932fe730656c66046

サーバー側の高速化機能の1つとして、画像の遅延読み込みの機能を提供するところが、増えてきているように思います。

例えば、ConoHa WINGは「WEXAL」で、一部かもしれませんが、画像の遅延読み込みができるようです。

WEXALについて
https://support.conoha.jp/w/wexal/#05

「WEXAL」は、ConoHa WING以外にも、導入しているところがあるみたいです。

エックスサーバーも、XPageSpeedという機能で、画像の遅延読み込みの設定ができるみたいです。

XPageSpeed設定について
https://www.xserver.ne.jp/manual/man_server_xpagespeed.php#link-b

 

サーバー側の機能の場合、実際に、どういう対応で実現するのかは確認ができませんので、分からないのですけれど。
サーバー側でHTMLに介入するのであれば、widthとheightを追加してくれないこともあるかもしれないな・・・という気はしました。
(確認した訳ではありませんので分かりませんので、そういうことはないのかもしれないですけれど)


   
返信引用
 his-
(@his)
Active Member Registered
結合: 10か月前
投稿: 11
Topic starter  

@yhira 

ご対応ありがとうございます。

モバイルヘッダーメニューの項目が「ロゴ」「アイコン」の2つの場合、もしくは「ロゴ」「アイコン」「アイコン」の順となっている場合はいかがでしょうか。

私の環境では右端以外が動いているようです。

左右にアイコンがある場合はうまくいっているように見えます。

 


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 6年前
投稿: 16568
 

投稿者:: @his

モバイルヘッダーメニューの項目が「ロゴ」「アイコン」の2つの場合、もしくは「ロゴ」「アイコン」「アイコン」の順となっている場合はいかがでしょうか。

僕の環境では駄目ですね。
一旦元の環境に戻しました。
今日何時間か試行錯誤してみたんですが、結局

  • ロゴメニュー:引き伸ばす
  • その他のメニュー:70px

みたいに、メニューの幅に違いがあると必ずレイアウトシフトしますね。
例えば、全てのメニューが均一でwidth:100%;とかwidth:70px;と同じであれば、レイアウトシフトしないようです。

なので、今のCocoonの環境(GitHubの最新版)で言えばここのwidth:70px;を削除もしくはコメントアウトすれば、レイアウトシフトはしなくなります。
https://github.com/xserver-inc/cocoon/blob/e3989f288e7a51cdb368ee95b3377644bcfd0984/style.css#L11318
ただ見た目は、添付画像のように、すべてのモバイルメニューの幅が同じになってしまいます。

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

   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 6年前
投稿: 16568
 

今回のレイアウトシフトの原因で言えばサイトロゴ画像が原因の可能性は低いように感じます。
というのもサイトロゴ画像を設定しないで、添付画像のように、サイトロゴ画像を表示しないで文字列を表示させたとしても、レイアウトシフトが起きるからです。

ただあくまで僕の環境ではなので、条件が重なると原因となる可能性もあるのかもしれません。


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7101
 

具体的にどうやったなど例や事象などが分かりませんので、適当にやってみました。

とりあえず、Cocoonを昨日修正いただいたVerにして、以下のような感じにしてみました。

 
ロゴ部分は、テキストです。(画像ではありません)
動いてしまいました。
 
(ブラウザ側のキャッシュが有効であれば、初回は動きますが、2回目以降は止まるみたいでした、上下GIF共、デベロッパーツールでキャッシュを無効にしてあります)
 
ロゴの部分に、適当にwidthを指定すると、止まるみたいでした。
(計算するのが面倒でしたので、適当に70vwにしました)
下に少しだけ見えている背景画像がちらつくタイミングで、リロードされています。
(機種によって幅は変わりますから、これでは・・・)

   
わいひら reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7101
 

上記で動かなくなるのであれば、個別に(子テーマ等で)対応する分には、できそうな気もしますね。
(アイコンの場所の大きさは、決まっているでしょうから、あとは計算すれば)


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 6年前
投稿: 16568
 

メニューに入るボタンの数があらかじめ決まっているのであれば、なんとかなるんですけどね。
不特定数のボタンが入るとなると、ほんとどうしたらいいんだろう。
フレックスボックス以外のアプローチも試してみようと思います。


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7101
 

投稿者:: @yhira

メニューに入るボタンの数があらかじめ決まっているのであれば、なんとかなるんですけどね。

そうですよね。

なので、個別にでないと難しいなと思ったんですよね。

おそらくFontAwesomeが原因なのかなと思ったのですけれど。
再描写に時間が掛かるのかなと思ったのですけれど。
(preloadしても、まだダメなのかという感じですけれど)


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 6年前
投稿: 16568
 

投稿者:: @yhira

なので、今のCocoonの環境(GitHubの最新版)で言えばここのwidth:70px;を削除もしくはコメントアウトすれば、レイアウトシフトはしなくなります。
https://github.com/xserver-inc/cocoon/blob/e3989f288e7a51cdb368ee95b3377644bcfd0984/style.css#L11318

ここを削除すると、全くレイアウトシフトが起きないことから、Font Awesomeでもないような気はしています。
レイアウトシフトを起こさないということに重点を当てるのであれば、添付画像のような見た目になりますが、これを良しとするかになりそう。
もしくはPHPで出力されるボタンを解析して、calcで計算しきる方法くらいか僕に思いつきませんでした。


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7101
 

投稿者:: @yhira

ここを削除すると、全くレイアウトシフトが起きないことから、Font Awesomeでもないような気はしています。

確かに、私の環境でも止まりました。

ちょっと訳が分からなくなってきましたが・・・。

今、親テーマでボタンは、70pxが指定されていて。

ロゴの部分は、width: calc(100vw - 140px)を子テーマで指定してみたのですけれど。

以下のように止まらなくて・・・。

 
 
【追記】
 
適用順ということかもしれませんね。
(ローカル環境だから読み込みに時間が掛かる?時差が生まれる?)
 
上記に加えて、子テーマで両ボタンにwidthを指定すると、止まります。
(親テーマと同じ70pxを指定。つまり子テーマで、ボタンもロゴもwidthを指定した状態)
 
 
上記のような事象でしたので、更に以下を試しました。
 
子テーマでwidthを指定しない場合。
(上記GIFと同じ状態。子テーマではロゴ部分のみwidthが指定されている状態。ボタンのwidthは親テーマ)

Cocoonの高速化で、CSS縮小化を有効にすると止まります。
(CSS縮小化が無効だと、動きます)
 
 
ボタンの数が分かればなんとかなりそうですよね。

   
わいひら reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7101
 

どちらも親テーマで試してみたのですが、フォントサイズの違いで、動きが大きく見えるのでしょうか。

Cocoon 2.6.9

 
Cocoon 2.7.2.8
 
(どちらも毎回発生しなかったもので、何回かリロードして、発生するのを待つ感じではあります)
 
親テーマの設定は変えていないと思いますが。
2.6.9は19px、2.7.2.8は16pxが適用されているようですね。
 
今のバージョンの方が動きが大きく見えるように思います。

   
わいひら reacted
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 6年前
投稿: 16568
 

投稿者:: @mk2_mk2

ロゴの部分は、width: calc(100vw - 140px)を子テーマで指定してみたのですけれど。

以下のように止まらなくて・・・。

本当だ。モバイルボタンに適用されているwidth:100%とかは全て取り去って、最終的な.logo-menu-button幅をwidth:244pxみたいに決め打ちで入力してもレイアウトシフト起きちゃいますね。
ちょっとお手上げ状態です。


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 6年前
投稿: 16568
 

投稿者:: @mk2_mk2

親テーマの設定は変えていないと思いますが。
2.6.9は19px、2.7.2.8は16pxが適用されているようですね。

最近レイアウトシフトが起きるようになったというのは、これのせいだったのかもしれませんね。


   
返信引用
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2325
 

投稿者:: @yhira

最近レイアウトシフトが起きるようになったというのは、これのせいだったのかもしれませんね。

https://wp-cocoon.com/community/postid/77854/

バージョン:2.7.1.7に戻してみましたが、チラツキは発生します。
結果、上記は直接的原因ではないです。


   
わいひら reacted
返信引用
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2325
 

レイアウトシフト」何言っているか全く分からず。

モバイル表示した際、一瞬、ヘッダーモバイルボタンの配置が動きチラついて表示される、ですよね?
現象は、簡単な言葉で、動作を丁寧に書かないと、第三者には分かりません。

以下で改善しませんか?

以下をwidth:70px;に変更

https://github.com/xserver-inc/cocoon/blob/915e874d80a94b95891b512a27432c79f0a1a47d/style.css#L7803


以下を削除

https://github.com/xserver-inc/cocoon/blob/915e874d80a94b95891b512a27432c79f0a1a47d/style.css#L11357

https://github.com/xserver-inc/cocoon/blob/915e874d80a94b95891b512a27432c79f0a1a47d/style.css#L11361-L11366


以下にjustify-content: space-between;を追加

https://github.com/xserver-inc/cocoon/blob/915e874d80a94b95891b512a27432c79f0a1a47d/style.css#L11353

以下を追加

.logo-menu-button {
  flex:1;
}

   
わいひら reacted
返信引用
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2325
 

@yhira さん

●補足

上記に投稿した、改善コードのみ抜粋。

以下のCSSを、追加するだけで解決すると思います。

.logo-menu-button {
  flex: 1;
}
.mobile-menu-buttons .menu-button {
  width: 70px;
}
.mobile-menu-buttons {
  justify-content: space-between;
}

   
わいひら reacted
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 6年前
投稿: 16568
 

ありがとうございます。
修正させていただきました。
https://github.com/xserver-inc/cocoon/commit/cdb363ac7b56fb802e33471f67f62e76a3e6a9ab


   
返信引用
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2325
 

@yhira さん

見たら、らちが明かないと思え、助け舟です。

display:flexを用いているので要素が可変となり。
この為、ボタン幅を固定にする必要があります。
また、ボタンを配置した際、残りの余白をロゴに割り当てる為、flex:1とします。


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 6年前
投稿: 16568
 

修正後僕の環境では、意図通りに動作してますけどどこかおかしかったですか?
flex: 1;はflex: 1 1 0;のことだから、明示的にするためにflex-grow: 1;でもいいかとそのようにしたんですけど。

This post was modified 1か月前 2回 by わいひら

   
返信引用
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2325
 

投稿者:: @yhira

修正後僕の環境では、意図通りに動作してますけどどこかおかしかったですか?

わいひらさんの変更でも、問題ないです。

見たら、らちが明かないと思え、助け舟です。

上記を書いたのは、私がコードを書いた理由と、書いたコードの補足です。
現象となる原因何か?分かっているのかな?と思ったからです。


   
わいひら reacted
返信引用
共有:

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

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

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

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

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

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

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

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