CSS で Elementor Lightbox が開いているときにページのスクロールを無効にする方法 - フォトンゆらぎネットワーク｜WordPress のプロフェッショナルな修理サービス、グローバルリーチ、迅速な対応

Elementor Lightboxはポップアップ表示機能Elementor Lightbox は、画像、動画、またはリンクがクリックされたときに、Web サイトが現在のページ上のポップアップウィンドウに関連するコンテンツを表示することを可能にします。このチュートリアルでは、Elementor Lightbox が開いているときにページのスクロールを無効にする方法を詳しく説明します。これにより、Lightbox が開いている間でも背景のページがスクロールされる状況を回避できるため、ユーザーにとってより良いエクスペリエンスが提供されます。

この効果は、以下のステップを踏むことで、ウェブサイトの双方向性とユーザビリティを高めることで簡単に得ることができます。

ページスクロールを無効にする理由

デフォルトでは、Elementor の Lightbox 機能がトリガーされると、スクロールしてもページの背景コンテンツが表示されます。この状況は時にユーザーの ライトボックス 特にページが長く、複雑なレイアウトを含む場合、背景のスクロールはユーザーにとって邪魔になる可能性がある。

ページのスクロールを無効にすることで、ユーザーは閲覧中の画像や動画コンテンツにより集中することができ、ユーザーとのインタラクションの質が向上します。スクロールバーをなくすことで、ページも視覚的にすっきりし、サイト全体がより洗練されたプロフェッショナルな雰囲気になります。

Elementor Lightboxが開いているときにページのスクロールを無効にする方法

この効果を得るには、簡単なCSSコードを使います。このコードをWordPressサイトのグローバルCSSエリアこれにより、ElementorのLightboxが開いたときにページのスクロールが自動的に無効になります。

ステップ1: CSSを追加したい場所を見つける

WordPressには、カスタムCSSを追加できる場所がいくつかあります：

子テーマのstyle.cssファイル子テーマを使用している場合は、子テーマのスタイルファイルにカスタムCSSを追加することができます。
エレメンタル・グローバルCSSElementorエディタでは、"グローバル設定"を使って、サイト全体に適用されるようにCSSを追加する。
テーマカスタマイザー > 追加CSSWordPressダッシュボードの "外装状態">"カスタマイズ">"追加CSS"領域、またはカスタムCSSをグローバルに追加することができます。

ステップ2：スクロールを無効にするCSSコードを追加する

以下は、ページのスクロールを無効にするカスタム CSS コードです。このコードは、Lightbox が開いているときにページの背景がスクロールしないようにします：

.elementor-lightbox__container { {.
    overflow: hidden；
    overflow: hidden; position: fixed；
    top: 0；
    overflow: hidden; position: fixed; top: 0; left: 0；
    right: 0；
    bottom: 0; }.
}

body.elementor-lightbox-open { { } }.
    overflow: hidden !important; } body.elementor-lightbox-open{。
}

コードについて説明してください：

最初のコード .elementor-lightbox__container </table ライトボックスのコンテナが開いたときに画面に固定され、スクロールによって移動しないようにします。
セカンドコード body.elementor-lightbox-open。 はページのスクロール動作を完全に無効にし、Lightbox が開いているときにページがスクロールしないようにします。

コードの実装：Elementorでページスクロールを無効にする

Elementorエディタを開きます。を入力してください。ページスクロールを無効にするなウェブページ.
グローバル設定へElementorエディターの左下にある"サイト設定「を選択します。カスタムCSS".

コードの貼り付け上記のコードをカスタムCSSエリアに貼り付けます。
変更の保存クリック "セーブ「をクリックして変更を適用する。

これらの手順により、ユーザーはLightboxが開いているときにバックグラウンドのページをスクロールすることができなくなり、ブラウジング体験が向上します。

さらなる最適化：カスタムCSS配置の有効化

サイトのニーズに応じて、このCSSをさまざまな場所に追加することができます：

特定のページだけスクロールを無効にしたい場合ElementorエディタでこのページにカスタムCSSを追加できます。

ウェブサイト全体のライトボックススクロールを無効にする必要がある場合これはごかんけいせいぼおんグローバル・スタイル・ファイル（例えば スタイル.css) またはWordPressのカスタマイザー "追加CSS「そのエリアにコードを追加する。

概要

Elementor Lightboxが開いたときにページのスクロールを無効にすることは、ユーザーエクスペリエンスを向上させ、画像を表示するときに背景のコンテンツが邪魔にならないようにする、シンプルですが効果的なテクニックです。この効果は、カスタム CSS コードを追加することで、サイト全体または特定のページに簡単に実装できます。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み