【はてなブログ】サイドバーをスマホでは非表示にする方法

はてなブログのサイドメニュー

はてなブログでは、サイドバーがPCとスマホで登場する場所が異なっています。

パソコンで閲覧時

スマホで閲覧時

本記事ではスマホのみサイドバーを消すためのコードを紹介しています。

サイドバーを表示させないコード

以下コードをデザインCSS( Stylesheet )に追記します。

@media(max-width: 767px){
 #box2 {
 display: none;
 }
}

コードの解説

Media Queriesと呼ばれる、デバイスのスクリーンサイズを条件に読み込むスタイルを切り替えるCSSの機能です。

max-width : XXXpx

は767px以下用の設定を意味し、この数字はスマホとタブレット/パソコンで分ける際によく採用されます。
ここの値を細かく指定すればスマホ/タブレット/パソコンで表示を切り替えれます

また、はてなブログのhtmlを確認すると、サイドバーあたりは以下のような構造になっています。

<aside id="box1">
<div id="box1-inner">
</div>
</aside>
</div><!-- #wrapper -->  
<aside id="box2">
<div id="box2-inner">
...サイドバーに関する情報
</div>
</aside>

よってbox2のdisplayをnoneにすれば表示されない、という算段です。

以上、ご参考ください。