スマホのみサイドバーを非表示にする方法

AFFINGER

【AFFINGER5】スマホのみサイドバーを非表示にする方法

【AFFINGER5】スマホのみサイドバーを非表示にする方法

スポンサーリンク

[方法1] CSSでサイドバーを非表示にする

WordPressの管理画面から「外観」→「カスタマイズ」を選択。

表示されたカスタマイズ画面で一番下にある「追加CSS」を押下し、以下のCSSを追加します。

@media only screen and (max-width: 599px)
#side {
    display: none;
}

これで横幅が599pxより小さい端末の場合は、サイドバーが非表示となります。

 

[方法2] sidebar.phpを修正してサイドバーを非表示にする

WordPressの管理画面から「外観」→「テーマエディタ」を選択。

編集するテーマから「AFFINGER5」を選択する

次に編集するテーマから「AFFINGER5」を選び「選択」ボタンを押下します。

テーマを選択

 

「sidebar.php」を選択する

「AFFINGER5」のPHPファイルの中から「sidebar.php」を選択します。

sidebar.phpを選択

「sidebar.php」の先頭に「モバイル」の場合は表示しない条件分岐を入れる

「sidebar.php」の先頭に「モバイル」の場合は、表示しないという以下の条件分岐を入れます。

<?php if(!wp_is_mobile()): ?>

モバイルの場合表示しない

「sidebar.php」の最後に条件分岐の終了を入れる

「sidebar.php」の最後に先ほどいれた条件分岐の終わりの定義を入れいます。

<?php endif; ?>

分岐終了

これで、スマホ(モバイル)端末の時はサイドバーが非表示となります。

この記事どうでしたか? /

© 2020 ITを分かりやすく解説