WordPressでモバイルデバイスのサイドバーを非表示にする方法
これを読んでいると、モバイルデバイスにサイドバーを配置する必要がないことに気付いたと思います。このSゾーンでは、WordPressでモバイルのサイドバーを非表示にする方法を説明しています。
ほとんどのWordPressテーマでは、サイドバーウィジェットを追加すると（主に大画面向け）、これらのサイドバーウィジェットはモバイルデバイスにも表示されます。
最初の例では、モバイルデバイスでは、サイドバーはサイドバーではなく、ボトムバーになります。さらに、モバイルデバイスでは、サイドバーがメインポストの後に表示され、サイドバーを表示する目的が失われます。
さらに、モバイルデバイスに不要なサイドバーがあると、これらのデバイスのロード時間が遅くなる可能性があります。
一部のWordPressテーマには、デバイスごとにサイドバーをカスタマイズするオプションがある場合があります。テーマがこの機能を提供している場合は、それを使用してください。
ただし、テーマでこのオプションが提供されていない場合は、このガイドの手順を使用して、モバイルデバイスのサイドバーを非表示にしてください。
Steamアバターを変更できませんこのガイドの一部の手順には、基本的なCSSスキルが必要です。ただし、CSSとスタイルシートについて何も知らなくても、ステップバイステップで説明します。
WordPressでモバイルデバイスのサイドバーを非表示にするための高レベルの手順は次のとおりです。
- テーマのサイドバーdivIDを見つけます
- モバイルデバイスからサイドバーを隠すCSSを追加します
- キャッシュをクリアしてテストする
投稿トピックを閲覧する
テーマのサイドバーDIVIDを見つける
WordPressのモバイルデバイスでサイドバーを非表示にするには、基本的にサイドバーのdivをCSSで変更する必要があります。ただし、CSSでdivを変更するには、divIDが必要です。
このタスクは、モバイルデバイスではなく、PCまたはMacのラップトップまたはデスクトップで実行してください。
以下の手順に従って、WordPressWebサイトに使用するテーマのサイドバーのdivIDを見つけます。
- GoogleChromeまたは新しいMicrosoftEdgeブラウザで投稿またはページを開きます。
- 次に、サイドバーの任意の場所を右クリックして、 検査する 。
- Inspect要素は、ページの右側にいくつかのコードを開きます。これには上部があります（下のスクリーンショットで1とラベル付けされています）。また、下部もあります（スクリーンショットで2とラベル付けされています）。
下部では、 スタイル デフォルトではタブが選択されます。サイドバーのdivIDを見つけるには、サイドバーという単語が含まれる要素を探します。一部のテーマは単にサイドバーを使用する場合があります。他の人はサイドバー-メインまたはメイン-サイドバーを使用することがあります。
テーマのサイドバーのdivIDであるため、これに注意してください。私のはサイドバーです。次のステップで必要になるので、これをコピーします。
WordPressのモバイルデバイスのサイドバーを非表示にするCSSを追加する
次のステップは、このコードをWordPressテーマの追加のCSSセクションに追加することです。これは、WordPressのモバイルデバイスのサイドバーを非表示にするコードです。
テーマのサイドバーのdivIDを太字にしました。この値をテーマのサイドバーのdivIDに変更する必要があります。 div IDの前のドット（。）に注意してください。@media (max-width: 768px) .sidebar { display: none; }以下の手順に従って、上記のCSSコードをテーマに追加します。
cydiaインパクターインストールcydiaエクステンダー
- 管理者としてWordPressサイトにサインインします。
- 次に、左側のペインで、 ホバー 以上 外観 を選択します カスタマイズ 。
- [カスタマイズ]オプションが開いたら、下にスクロールして[ 追加のCSS 。
- 最後に、このコードをコピーして貼り付け、セクションの1つに修正します。次に、上部をクリックします。 公開 。
@media (max-width: 768px) .sidebar { display: none; }また、コードの機能と、おそらくコードが追加された日付を説明するコメントを追加することもお勧めします。私のコメントをコピーして、必要に応じて修正することができます。何をするにしても、削除しないでください / * と * / –これらは、コメントの間にあるものを作成するコードであり、CSSコードの一部ではありません。 /* Remove sidebar from mobile devices -3rd April 2021*/
キャッシュをクリアしてテストする
明確にするために、最後のセクションでは、WordPressのモバイルデバイスのサイドバーを効果的に非表示にしました。ただし、キャッシングプラグインまたはCDNを使用する場合、変更をすぐに有効にするにはキャッシュをクリアする必要があるため、このセクションを追加することにしました。
キャッシングプラグインやCDNのキャッシュをクリアした後、モバイルデバイスでWebサイトを開きます。変更がすぐに反映されない場合は、 シークレット （Chrome）または 非公式に （マイクロソフトエッジ）。
このガイドの手順で、WordPressサイトのモバイルデバイスのサイドバーを非表示にできたことを願っています。
また、ガイドがお役に立ててわかりやすいと思いますか？ガイドが役に立った場合は、をクリックしてください はい この投稿は役に立ちましたか？下。
このページの最後にある[返信を残す]フォームを使用してフィードバックを提供することもできます。
最後に、その他のWordPressガイドについては、WordPressとWebサイトのハウツーページにアクセスしてください。
