[ 解決済 ] メニューをクリックする度にヘッダー箇所がブレる

[c-y]

■ WordPress のバージョン
6.6.2

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ 子テーマをご利用の場合は親テーマに変更して症状が改善するか確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
15.27.1

■ Pro Unit のバージョン
0.28.0

■ スキンの種類
Origin III

■ 関連しそうなプラグインを一つずつ停止して症状が改善するか確認してください。
確認しました。

■ プラグインの種類・バージョン
Akismet Anti-spam: Spam Protection バージョン 5.3.3
All-in-One WP Migration バージョン 7.87
Category Order and Taxonomy Terms Order バージョン 1.8.6
Contact Form 7 バージョン 5.9.8
Hello Dolly バージョン 1.7.2
Lightning G3 Pro Unit バージョン 0.28.0
LiteSpeed Cache バージョン 6.5.2
Site Kit by Google バージョン 1.138.0
VK All in One Expansion Unit バージョン 9.99.6.0
VK Block Patterns バージョン 1.32.4.0
VK Blocks Pro バージョン 1.89.0.0
VK Link Target Controller バージョン 1.7.6.0
VK Post Author Display バージョン 1.25.0
WP Multibyte Patch バージョン 2.9

■ 期待する動作
ヘッダー箇所のブレを直したい。

■ 自分で試した事
ヘッダーロゴのサイズ変更。
グローバルメニューの箇所の見直し等。

■ 症状が発生するブラウザ
Google Chrome

■ 実際の症状
メニューをクリックする度にヘッダー箇所が横にブレる
ヘッターロゴ画像を大きくすると今度は、縦にもブレる。

■ その他特記事項
このバターンを利用した他のホームペーシでも同じ現象。

Attachments:

You must be logged in to view attached files.

---

該当URL : https://*********

※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

[c-y]

追伸です。
ヘッダーロゴ画像とヘッダーコンタクトあり & ナビ貫通に変更した場合はこうなります。

HOME

[対馬 俊彦]

たぶん、Google Fonts の読み込みがフッターの後ろなので、これが影響しているのではないかと思います。

そうだとすると、デザインスキンを Origin III から プレーン に切り替えるとブレる現象が解消されるはずです。

Origin III が Google Fonts をフッターの後ろで読み込んでいるのは理由があると思いますので（表示速度とか…）、上記の通りだとすると、以下のどちらかで対応するのではいかがでしょうか。

【案１】デザインスキンを プレーン にする
スタイルをカスタマイズするのであれば、プレーンの方が都合がいいです。

【案２】ヘッダー部分で Google Fonts を使わない
以下の CSS を書けば、ヘッダー部分に Google Fonts が使われなくなります。

body header {
    font-family: "ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}

[石川＠Vektor,Inc.]

Lightningのご利用ありがとうございます。株式会社ベクトルの石川と申します。

ご指摘に件は “文字の書体が少し遅れて切り替わる” という事を指していますか？

[c-y]

石川様へ
多分、そういうことだと思います。
表現が難しいのですが、ロゴ、メニューをクリックする度にロゴやメニュー箇所が「ビヨーン」てする症状です。一応、添付した動画の通りの状況です。

[c-y]

対馬様へ、
ご享受、ありがとうございます。
【案１】デザインスキンを プレーン にする
【案２】ヘッダー部分で Google Fonts を使わない。※CSSを追加

上記、両案を試してみましたがやはり横ブレは直りません。
ご参考に両案反映後の動画をアップさせて頂きます。

Attachments:

You must be logged in to view attached files.

[石川＠Vektor,Inc.]

おそらくサイトの高速化全体の話になると思います。

ウェブページは様々はファイルを読み込んで、描画できるものから順番に処理されていきますので、
HTMLとして読み込んだあとでCSSが読み込まれて再描画が走ったり、サーバーのレスポンスが悪くてCSSなどの他のファイルの読み込みに時間がかかったりする結果、現在のような症状になっています。

対応方法としては

* もっとレスポンスの良いサーバーに引っ越す
* ページキャッシュやソース圧縮など高速化関連のプラグインを使う
* CDNなどを使って高速化する

などがあります。
このあたりは手法は多岐にわたりますし、弊社製品固有のトピックではなくなってくるため、

WordPress 高速化 などで検索していろいろ試してみてください。

[c-y]

石川様へ
ご連絡、ありがとうございます。
現在、L社のハイスピードプランを利用していますが、それでは不十分(遅い)だと言うことですね。

[対馬 俊彦]

私もロリポップのハイスピードプランを使っています。

私の作業用サイトにデモサイトデータをインポートして試したら、たしかにブレを感じます。

ロリポップ！アクセラレータ を有効にしたらブレが気にならなくなりました。

ご参考まで。

[石川＠Vektor,Inc.]

とりあえずサーバーの引っ越しはドメインとかも絡みますし、引っ越して早くなる保証はできないので、
まずは高速化系のプラグインとか調べて試してみると良いのではないかなと思います。

[c-y]

対馬様へ、

ご教授、ありがとうございました。

私の拙い症状説明も、完璧にご理解下さり、改善案もバッチリです。
今まで、他の有識者に尋ねても契約しているサーバーのパワーが不足、不足のせいだと1年近く言われ続けましたが、
これで、やっと自分自身納得が出来ました。
本当に助かりました。
改めて、ありがとうございました。
我慢して、対馬様よりの追加のご教授を待っていてよかったです。
そうでなければ、諦めておりました。

[投稿者]

投稿