CSSを使用してWebサイトの要素を非表示にする方法

Rifat WordPressチュートリアル Oct 19, 2021

私たちのウェブサイトの美しさの理由の1つは、その美しいデザインと、その美しさを高めるのに役立つさまざまなWordPressテーマです。 ただし、Webサイトの独自性を維持するために、多くの人がテーマをカスタマイズして、開発者がページごとにさまざまなことを省略しています。 たとえば、サイドバーまたはテキストボックスを省略します。 そのためには、可視性と表示という2つの特定のCSSプロパティについてのアイデアが必要です。 これらの2つのプロパティを使用すると、誰でも簡単にページ要素を非表示にできます。 そして、それが今日のチュートリアルで見るものです。

要素を隠す背後にある理由

開発者がWordPressテーマを作成するとき、彼はあらゆる種類の人々の好みとニーズについて考えます。 ただし、全員が同じというわけではないため、カスタマイズが必要です。 通常、人々がWebサイトから省略しているのは、ヘッダーまたはナビゲーションメニューです。

通常、特定のページから何かを削除したい場合は、この種のアクションが必要です。 もっと率直に言って、ブログ投稿からレビューまたは評価セクションを削除したいとします。 これで、テーマ設定全体からレビューセクションを削除すると、すべての投稿ページから削除されます。 特定のページから削除したいので、CSSを使用してページのその要素を非表示にすることができます。

非表示にする要素をターゲットにする

非表示にするページ要素はわかっていますが、わからないのは、コーディング言語で何を言っているか、または開発者がどのように指定したかです。
簡単に見つけることができます。 非表示にする要素を右クリックして、[検査]を選択します。

素晴らしいウェブサイトを作成します

最高の無料ページビルダーElementor を使用

今すぐ始める

次に、開発ツールの「要素」セクションに移動します。 ここで、選択した要素のCSSIDを確認できます。 次に、要素コードにマウスを合わせると、ページに強調表示されたセクションが表示されます。 正しい行をクリックして、選択をロックします。

次に、このセレクターを使用してCSSに変更する必要があります。

ディスプレイCSSの使用

要素を非表示にする最も簡単な方法は、要素を消去することです。 これは、「 display:none 」プロパティを使用して簡単に行うことができます。 その結果、その要素はそのページに表示されなくなります。 そして、その特定の要素をカバーする部分は自動的に削除され、埋められます。 また、応答性に問題はありません。

この画像では、メインヘッダーを削除したかったことがわかります。 最初に要素IDをクリックし、次にCSS調整用のスタイルパネルに移動して、以下に示すコードを追加します。

display:none

そして、Webサイト全体から要素を削除する最も簡単な方法が完了しました。

可視性CSSの使用

表示CSSと同様に、可視性CSSを使用して要素を非表示にすることもできます。 理論的には、どちらも同じ仕事をしますが、実際には、ここでは要素を非表示にするだけで、削除することはありません。 可視性CSSは、要素を非表示にするのに役立ち、割り当てられたスペースを保持します。

visibility:hidden;

可視性または表示:どの状況でどちらを使用する必要がありますか?

どのCSSコードがどのような仕事をするかはすでにわかっています。 ページから要素を完全に削除する場合は、ディスプレイCSSを使用します。 また、位置を保持した状態で要素を非表示にしたい場合は、VisibilityCSSを使用します。

たとえば、単一列の行の背景を削除する場合は、「visibility:hidden」を使用します。これは、背景のみを削除し、単一列の行とそのコンテンツを残すためです。 また、「display:none;」を使用すると、その中のコンテンツ、行、列が背景とともに削除され、ページが新しい方法で自動編成されます。

特定のページで要素を非表示にする

これまでに見た内容に変更を加えると、ウェブサイト全体に影響が及びます。 次に、特定のページで要素を非表示にする方法を説明します。 このために、特定のページIDクラスを見つける必要があります。 これは単純なページID番号であり、 CSSIDではないことを忘れないでください。

ページ上でマウスを押すと、このIDを簡単に見つけることができます。 ここでは、例として投稿を取り上げています。 リンクの場所にマークされた長方形の中に「post = 3」が表示されます。これは、Webサイトの「プライバシーポリシー」ページのページIDです。

このIDは、編集ページまたはプレビューページから確認することもできます。

次に、このページにDisplay CSSを追加して、サイドバーを非表示にします。 これは、テーマカスタマイザーから実行できます。

.page-id-3 div#sidebar {
display:none;
}

上に書かれたコードは、特定のページからサイドバーを削除するだけで、以下に書かれたコードはどこからでも要素を削除します。

dev#sidebar {
visibility:hidden;
}

最後の言葉

今日のチュートリアルでは、表示と可視性のCSSプロパティの違いと、WordPressサイトをカスタマイズするときに使用する必要があるプロパティについて説明します。 このブログ投稿がお役に立てば幸いです。 はいの場合、シェアは驚異的です!

Divi WordPress Theme