当サイト「からあげ棒、ありったけ」では有料のワードプレステーマ THE THOR を使用しています。
THE THOR はそのままの仕様でも良いテーマですが、個人的な好みで色々なカスタマイズを行っています。
今回は「サイドバーをスマホで非表示にする方法」です。
-
圧倒的にSEOに強く・上位表示されやすいWordPressテーマ
テーマ詳細 THE・THOR(ザ・トール)
- 「からあげ棒、ありったけ」のカスタマイズはこちら
カテゴリーTHE THOR 記事一覧
THE THOR
スマホ表示で サイドバー を表示しない理由
「からあげ棒、ありったけ」はサイドバーのある2カラム設定にしています。
※以前は1カラム設定にしていました。
2カラム設定の良いところはサイドバーを表示してPCの広い画面を有効に活用できること。
スマホ表示の場合は、記事の下にサイドバーが表示されます。
PC表示では特に問題ないのですが、スマホ表示のときは少し邪魔に感じます。
特にトップページでは、サイドバーの表示が終わってから記事ランキングやカテゴリ別新着記事などのフッターエリアが表示されるので、フッターエリアの重要な情報になかなかたどり着けません。
このサイトでは WordPressテーマ THE THOR を使用しています。サイトの レイアウト 変更で曖昧だった部分をまとめました。 THE THOR をまだ使用していない方はこちらをご覧く[…]
当サイトの場合、サイドバーに表示しているコンテンツは基本的にサブメニューの中にも表示しています。
サブメニューを開くことに抵抗の少ないスマホでは、サイドバーを非表示にすることにしました。
※今後の運用によりサイドバーを復活させる可能性はあります。
サイドバーを非表示にする方法
サイドバーの非表示は追加CSSで行います。
外観 → カスタマイズ → 追加CSS
以下のコードをコピペします。
/*サイドバースマホ非表示*/
@media only screen and (max-width: 768px){
.l-sidebar {
display: none;
}
}
これでサイドバー全体がスマホ表示のときに非表示となります。
※カスタマイズは自己責任でお願いします。
サイドバーに使いそうなウィジェットのクラス名
サイドバーすべてを非表示にするのではなく、ウィジェットを個別に非表示にする場合はクラス名を変更してください。
| ウィジェットの名前 | ウィジェット指定するクラス |
| [THE]人気記事 | .widget-side .widgetArchive-rank |
| [THE]絞込検索 | .widget-side .widget_fit_search_refine_class |
| [THE]画像付新着記事 | .widget-side .widgetArchive |
| [THE]著作者情報 | .widget-side .widgetProfile |
| アーカイブ | .widget-side .widget_archive |
| カテゴリ | .widget-side .widget_categories |
| タグクラウド | .widget-side .widget_tag_cloud |
| ナビゲーションメニュー | .widget-side .widget_nav_menu |
| 検索 | .widget-side .widget_search |
| カスタムHTML | .widget-side .widget_custom_html |
| [THE]スタイルテキスト | .widget-side .widget_fit_styleitem_class |
| カレンダー | .widget-side .widget_calendar |
| 追従サイドバー | .widgetSticky |
使い方は、全体を非表示にするコードの.l-sidebarの部分を上記コードで置き換えます。
複数の場合は.widget-sideを省略して,でつなげます。
サンプル
/*サイドバースマホ非表示_人気記事_タグクラウド*/
@media only screen and (max-width: 768px){
.widget-side .widgetArchive-rank,.widget_tag_cloud {
display: none;
}
}
※カスタマイズは自己責任でお願いします。
サイドバーをスマホで表示しない
あとがき
現状では、サイドバーに表示するコンテンツが定まっていないのでザックリとした対応となりました。
今後に備え、個別対応できるよう一部ウィジェットのクラス名を調べたので載せておきます。
