Discordコミュニティを作りました! 参加する

フォーラム

トピックを立てる前にチェック
  1. フォーラムガイドライン」に必ず目を通してください。
  2. バージョンアップデート後に表示がおかしくなった場合は、
    「SWELL設定」>「リセット」からキャッシュクリアを先にお試しください。
  3. フォーラム内検索で過去に同じようなトピックがないか検索してみてください。
フルワイドブロック利用時のCLSの件
 
通知
すべてクリア

[解決済] フルワイドブロック利用時のCLSの件

20 投稿
5 ユーザー
11 Likes
576 表示
taisy0
(@taisy0)
投稿: 5
メンバー
Topic starter
 

先月より他テーマからSWELLに乗り換え、トップページを作成致しましたが、ここ1〜2週でGoogleのSearch ConsoleでCLSの値が0.1を超え、警告を受けるようになってきました。

Adsenseの広告がCLSに大きく影響することは経験上分かっていた為、予め広告スペースの高さを指定して動かないようにしており、記事ページなどは問題ありませんが、トップページのみ「フルワイド」ブロックを利用している影響か、CLSの値が高くなっております。

 

参考までに当該URLのページ上部の「フルワイド」ブロックは"サイト幅"で利用しております。下記の動画はChromeのデベロッパーツールで読み込み時の動きを撮影したものですが、読み込み時に「フルワイド」ブロックの横幅が"記事幅"から"サイト幅"に拡大されることがCLSに悪影響を及ぼしているものと考えております。

 

なお、ヘッダーと「フルワイド」ブロックの間に表示させているAdsenseの広告を削除すると、「フルワイド」ブロックが最上部に表示されるようになり、横幅のズレがより目立つようになり、CLSの値も悪化するといった状態です。

この動きに対応する方法はあるのでしょうか。Googleで検索しても同じような報告例はなく、お力を頂きたく投稿させて頂きました。

恐らく、メインビジュアルを追加し、「フルワイド」ブロックを読み込み時に表示されない位置まで下げれば改善されることは予想出来ますが、出来ればメインビジュアル無しでいければと考えております。

長文失礼致しますが、宜しくお願い致します。

確認項目
利用規約に同意します*, ガイドラインを読み、内容を把握しています*, よくある質問を先にチェック済みです*, 過去に同じようなトピックがないか検索済みです*, WordPress更新後、SWELLは最新版にしましたか?, Googleなどでも検索してみました
問題が確認できるページのURL
利用中のSWELL本体のバージョン
2.7.9
利用中のPHPバージョン
7.4.33
OS
macOS
利用中のWordPressバージョン
6.1.4
利用中のサーバー会社
WpXクラウド
ブラウザ
Chrome
利用中のプラグイン一覧

Akismet
Auto Featured Image
EWWW Image Optimizer
Pochipp
SEO SIMPLE PACK
WordPress Popular Posts
WP Multibyte Patch
WP-Optimize
XML Sitemap & Google News

 
投稿済 : 15/10/2023 10:07 pm
skillsharejp reacted
skillsharejp
(@skillsharejp)
投稿: 1031
SWELL高速化顧問
 

SWELLのみ、他の影響を一切受けない状態で再現できたので検証中です。

SWELLフォーラムはユーザーフォーラムのため、開発者以外の回答は全て任意です。当アカウントによる回答もボランティアのため、ヒントの提供に留まる場合があります。

ご依頼のご相談・お問い合わせ窓口
https://skillshare.biz/inquiry/

 
投稿済 : 16/10/2023 3:50 pm
taisy0
(@taisy0)
投稿: 5
メンバー
Topic starter
 

skillsharejp様

 

コメント有難う御座います。

検証頂けるとのこと助かります。

ある程度の作業は自分でも出来ますので、また何か良い方法が御座いましたら続報頂けますと幸いです。

 
投稿済 : 16/10/2023 11:56 pm
skillsharejp
(@skillsharejp)
投稿: 1031
SWELL高速化顧問
 

あくまでフルワイドブロックのみを再現したページでしか検証していませんが、下記CSSでCLSはWPT及びPSIのラボデータにおいて0になりました。

.alignfull {
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
}

 

https://pagespeed.web.dev/analysis/https-depressed-dolphin-upglq-instawp-xyz-sample-page/hxu1rm50i0?form_factor=desktop

(WPT結果URLはwpforoが勝手にwebpと判断する謎の症状を確認したため削除しました。)

This post was modified 8か月前 4回 by skillsharejp

SWELLフォーラムはユーザーフォーラムのため、開発者以外の回答は全て任意です。当アカウントによる回答もボランティアのため、ヒントの提供に留まる場合があります。

ご依頼のご相談・お問い合わせ窓口
https://skillshare.biz/inquiry/

 
投稿済 : 17/10/2023 8:12 pm
taisy0 reacted
taisy0
(@taisy0)
投稿: 5
メンバー
Topic starter
 

早速、CSSに適用させて頂きましたが、CLSが0になりました。

有難う御座います!

本当に助かりました。これでSearch Consoleの様子を見てみます。

本当に有難う御座いました!

 
投稿済 : 17/10/2023 9:42 pm
skillsharejp
(@skillsharejp)
投稿: 1031
SWELL高速化顧問
 

ご報告いただくまで気が付かなかったので助かりました。

SWELLフォーラムはユーザーフォーラムのため、開発者以外の回答は全て任意です。当アカウントによる回答もボランティアのため、ヒントの提供に留まる場合があります。

ご依頼のご相談・お問い合わせ窓口
https://skillshare.biz/inquiry/

 
投稿済 : 17/10/2023 10:36 pm
taisy0 reacted
His-
 His-
(@his)
投稿: 53
メンバー
 

@skillsharejp 

ありがとうございます。

以前トピックを立てさせていただいた中の余談で「フルワイドが読み込みの際に収縮する問題」が解決しました。

https://users.swell-theme.com/forum/swell-forum/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%83%ad%e3%82%b4%e3%82%84%e3%82%b3%e3%83%b3%e3%83%86%e3%83%b3%e3%83%84%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%81%8c%e3%83%81%e3%83%a9%e3%81%a4%e3%81%8f%e5%95%8f/

 

理屈がちょっと分からないのですが、こちらは基本的に記述しておいた方が良いという解釈でしょうか。テーマ側で対策いただけるならありがたいですね。

お問い合わせ先▶︎https://blog-mi.com/contact/

 
投稿済 : 18/10/2023 5:39 pm
taisy0 reacted
サブロ
(@windorz)
投稿: 97
メンバー
 

こちらの記述を追加したところ、サイドバー有りのページでは、デザインが崩れました。

もとからあるCSSにtransformを追加し、leftの値と同じ数値をマイナスで指定することで対応できました。

利用している環境で変更箇所は変わるかもしれませんが、修正の方法はそのまま流用できますね。

ありがとうございます。

@media (min-width: 960px){
.-sidebar-on .l-content .alignfull, .-sidebar-on .l-content .alignwide {
left: -16px;
transform: translateX(-16px);
width: calc(100% + 32px);
}}
 
投稿済 : 29/10/2023 5:35 pm
skillsharejp reacted
skillsharejp
(@skillsharejp)
投稿: 1031
SWELL高速化顧問
 
投稿者:: @windorz

こちらの記述を追加したところ、サイドバー有りのページでは、デザインが崩れました。

ご提案ありがとうございます。フルワイドブロックをサイドバーありの状態で使うというのをあまり想定していませんが、実際にどういったページでしょうか?TwitterかDiscordでDMでも構いませんので確認できるURLをご連絡いただけないでしょうか?

SWELLフォーラムはユーザーフォーラムのため、開発者以外の回答は全て任意です。当アカウントによる回答もボランティアのため、ヒントの提供に留まる場合があります。

ご依頼のご相談・お問い合わせ窓口
https://skillshare.biz/inquiry/

 
投稿済 : 29/10/2023 6:25 pm
サブロ
(@windorz)
投稿: 97
メンバー
 

使い方としては少しおかしいかもしれません。

CTAをブログパーツで作成し投稿(サイドバー有り)の最後でウィジェットから呼び出しています。

ブログパーツは、フルワイドブロックを使って作成しています。

投稿の時はブログパーツを呼び出してもフルワイドはならないので、固定ページと投稿で共通で使っています。

 

 
投稿済 : 29/10/2023 6:31 pm
His-
 His-
(@his)
投稿: 53
メンバー
 

確かに、サイドバー有りでも背景色やデザインを取り入れたい場合などにフルワイドブロックを利用するかもしれませんね。

試しに軽く検証してみましたが、サイドバーありの場合はwidthを%で指定してあるためか、CLSに問題はありませんでした。(サイドバーをなしに戻すとCLSは悪化するため対策は必要)

よって、サイドバーなしの時のフルワイドの対策できれば良いかと思いますので、以下のコードで良いかもしれません。

.-sidebar-off .alignfull {
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
}

お問い合わせ先▶︎https://blog-mi.com/contact/

 
投稿済 : 29/10/2023 11:36 pm
skillsharejp reacted
サブロ
(@windorz)
投稿: 97
メンバー
 

参考までに、私の環境で起きたことをまとめておきます。

このスレッドにあったCSSを追記したところ、フルワイドを使っていたブログパーツが左側に飛び出してしまいました。

ウィジェットから呼び出したブログパーツのHTML

<div class="w-singleBottom">
  <div id="text-3" class="c-widget widget_text">
    <div class="textwidget">
      <div class="p-blogParts post_content" data-partsid="138">
        <div class="swell-block-fullWide pc-py-0 sp-py-0 alignfull cta" style="color:#fff;background-color:#fceeca">
          <div class="swell-block-fullWide__inner l-article">
            :
            :
            :
            :
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

//もとからあるSWELLのCSS
@media (min-width: 960px){
.-sidebar-on .l-content .alignfull, .-sidebar-on .l-content .alignwide {
    left: -16px;
    width: calc(100% + 32px);
}}

//追加したCSS
.alignfull {
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
}

transfromを打ち消せばよかったので、translateX(-16px)ではなくtranslateX(0)でよかったです。

// CSSを追加

media (min-width: 960px){
.-sidebar-on .l-content .alignfull, .-sidebar-on .l-content .alignwide {
    left: -16px;
    transform: translateX(0px);
    width: calc(100% + 32px);
}
}

 

 
投稿済 : 30/10/2023 12:25 am
skillsharejp reacted
His-
 His-
(@his)
投稿: 53
メンバー
 

@windorz 

「コンテンツの背景を白にする」をオンにした場合、以下の数値に変更されるため、デザインが崩れてしまいます。

@media (min-width:960px)
.alignwide, .l-content .alignfull {
left: -48px;
width: calc(100% + 96px);
}

 

上書きされるよりは、サイドバーがない時(.-sidebar-offを追加)にのみ適用させた方が安全かもしれません。

お問い合わせ先▶︎https://blog-mi.com/contact/

 
投稿済 : 30/10/2023 1:06 am
skillsharejp reacted
サブロ
(@windorz)
投稿: 97
メンバー
 

@his 

そうですね。

CLSが悪化しているかどうかによって適用するのが本筋だと思いますので、

無理にすべてに適用するよりも、サイドバー無しの時だけ適用する方が良さそうですね。

ありがとうございます。

 
投稿済 : 30/10/2023 1:53 am
His- reacted
了
 
(@loos_ryo)
投稿: 1248
メンバー Admin
 

フルワイドブロックの横幅がちらつくという現象、未だに僕の方では確認できずでして、原因がよく分からずにいます。

SWELL開発者です。

 
投稿済 : 05/11/2023 4:24 pm
了
 
(@loos_ryo)
投稿: 1248
メンバー Admin
 

vw単位はwindowsのスクロールバーが考慮されないため、本来は変数を使ってるのですが...。

その変数のセットが遅れるのかなとも思ったのですが、変数上書きされるまでは0として扱っているので、縮むことはないはずなんですよね... 🤔 

SWELL開発者です。

 
投稿済 : 05/11/2023 4:27 pm
His-
 His-
(@his)
投稿: 53
メンバー
 

@loos_ryo 

なんとなく解決策が分かったかもしれません。

試しにwidth:calc(100vw - 0)としてみましたが、こちらは改善せずでした。

しかし、width:calc(100vw - 0px)と単位をつけると改善できました。

同じように width: calc(100vw - var(--swl-scrollbar_width, 0px));としたところ、改善できていました。

根本的な原因は不明ですが、単位が重要な気がします。

 

ただ、

.-sidebar-off .alignfull {
left: 50%;
transform: translateX(-50%);
width: calc(100vw - var(--swl-scrollbar_width, 0px));
}
 
このようleftプロパティとtransformプロパティを当てないと、右半分にズレた状態から思いっきりレイアウトシフトを起こすので単純にpxだけを追加すれば良いというような感じではありませんでした。
 

お問い合わせ先▶︎https://blog-mi.com/contact/

 
投稿済 : 05/11/2023 9:40 pm
His-
 His-
(@his)
投稿: 53
メンバー
 

あ、alingnfullのleftプロパティの0が当たっている影響ですね。

 どちらも単位をつけるとCLSもチラつきも改善しました。

.alignfull {
left: calc(50% - 50vw + var(--swl-scrollbar_width, 0px)/2);
width: calc(100vw - var(--swl-scrollbar_width, 0px));
}

 

お問い合わせ先▶︎https://blog-mi.com/contact/

 
投稿済 : 05/11/2023 10:01 pm
skillsharejp reacted
了
 
(@loos_ryo)
投稿: 1248
メンバー Admin
 

あー!すみません原因がわかりました!

と思ったらhisさんも書いてくださってました...!

cssのlintで単位消されてたっぽいです...おっしゃるとおり、calcなので0には単位必須ですね

SWELL開発者です。

 
投稿済 : 05/11/2023 11:08 pm
了
 
(@loos_ryo)
投稿: 1248
メンバー Admin
 

数日以内のアプデで修正します、すみませんでした 😫 

SWELL開発者です。

 
投稿済 : 05/11/2023 11:08 pm
skillsharejp reacted
共有: