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

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；
    left: 0; right: 0;；
    right: 0; }；
    bottom: 0; }.
}

body.elementor-lightbox-open}{オーバーフロー: hidden !important; } body.elementor-lightbox-open {オーバーフロー: hidden !
    overflow: hidden !important; } body.elementor-lightbox-open{。
}

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

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

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

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

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

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

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

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

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

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

概要

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