ワードプレスでスマホ表示の時だけ一部要素を隠すスタイルシート

スマホ表示のときのみ、ワードプレスのサイドバー等の要素を一部隠す方法を解説いたします。

CSSスタイルシートだけでスマホ表示の時に一部要素を隠す(表示しないようにする)

スタイルシートには、スマホ幅の画面で表示している場合のみ適応されるスタイルシートを記載する書式があります。
このスタイルシートをワードプレスの管理画面のカスタマイザの「追加css」もしくは、テーマのStyle.cssに記載します。

↓下記の例では767以下の横幅の画面で表示したときに任意のスタイルシートを適応します。

@media screen and (max-width:767px) {
/* ここにスマホ向けのCSS指定 */
}

次に隠したい要素のクラス名やIDをHTMLのソースを表示するなどして探します。

例
＜div class=”sidebarelement1″＞

という要素を隠したい場合、クラス指定接頭子　.　をつけて指定できます。(IDの場合は#を使います)

@media screen and (max-width:767px) {
    /* ここにスマホ向けのCSS指定 */
    .sidebarelement1{
        /* ここにsidebarelement1向けのCSS指定 */
    }
}

最後のこの要素を隠す処理をスタイルシートに書き込みます。

@media screen and (max-width:767px) {
    /* ここにスマホ向けのCSS指定 */
    .sidebarelement1{
        /* ここにsidebarelement1向けのCSS指定 */
        display:none !important;
    }
}

display:noneは、画面幅が767以下の場合、.sidebarelement1　というクラス名を持つ要素を表示しないという意味です。

!important　は、他にこのクラスに何らかのスタイル指定があってもこの処理を最優先で適応せよ　という意味になります。

より詳しいCSS(スタイルシート)の解説は下記をご覧ください、
ワードプレスの見た目を変えるための基本的なcssスタイルの指定方法

WordPress ワードプレスのテーマやプラグインの修正、カスタマイズの代行をいたします。お気軽にご依頼・ご相談をお送りください。