スマホサイトの画面上でサイドバーって必要？
こんにちはchessinuです。
今回の記事はPCサイトの画面上ではサイドバーを表示させ、スマホサイトの画面ではサイドバーを表示させない方法について紹介します。
ぶっちゃけスマホサイトで下までスクロールしてサイドバーまで合わせて見てる人ってほとんどいないですよね。
それなのに無駄にサイトを縦長にしたり重くしたりしてサイトスピードにも影響が出たりしたらSEO的にも嫌な感じです。
そもそもサイドバー的な役割は、より便利なハンバーガーメニューなりボトムナビゲーションなり横スクロールナビゲーションなりを使用すればいい話ですからね。
なので自分はスマホサイト画面上ではサイドバーは常に消しています。
<-追記-10月現在、やはり何となくサイドバーを表示させる事にしました。またその内に消すかも知れません笑>
メディアクエリ
方法は色々とありますが、ここでは一番簡単にできるHTML/CSSでメディアクエリを使用して消すやり方を紹介します。
メディアクエリは画面の幅や解像度に対応してサイトのデザインなどを調節できるので、昨今におけるレスポンシブウェブデザイン必須化の状況においてとても便利で重要な要素となります。
メディアクエリの書き方は、HTMLの<head>タグ内に記述するやり方とCSSファイル内に記述するやり方の２通りありますが、
WordPressを使用してサイトを作っている場合はCSSファイル内に記述した方が良いかと思います。
コード
では実際のコードです。
@media screen and (max-width: 480px){
/* 画面サイズが480px以下に適用される。 */
xxxx{
display: none;
}
}この様にCSSファイル内に記述します。
xxxxの部分はそれぞれ使用しているテーマによって違いますので、テーマエディターやchromeブラウザのデベロッパーツールなどを利用して確認しておいてください。
ちなみに自分の場合は.penci-sidebar-contentです。
補足ですがタブレット以下のサイズで表示させないようにするには、480pxの数字をタブレットサイズに合わせて例えば768px(数値は任意)などに変更して調節します。
逆にスマホ以上のサイズで表示させたい場合はmax-width(以下)をmin-width(以上)に変更します。
また組み合わせる事によって○○以上☓☓以下という様な指定もできます。
この様にメディアクエリは他にも色々とセレクタやプロパティや特性を付け足すことでデザインを細かく調節することができとても便利なのでぜひ調べて応用してみてください。
終わりに
レスポンシブウェブデザインに適応することはSEO的にもとても大事な要素なので、ぜひメディアクエリなどを活用してサイトを作ってみてください。
以上でこの記事は終わりになります。
それではまた別の記事でお会いしましょう！
この記事が気に入りましたら、下のアイコンをクリックしてSNSシェアの方をお願いします！