【はてなブログ】サイドバーの横幅を狭めてパソコンから非表示にする方法

はじめに

はてなブログのサイドバーをスマホでのみ非表示にする方法は以下の記事に記載しました。

今回はスマホ以外の例えばパソコンでも非表示にする際のTipsについて記載します。

はてなブログのサイドバー非表示問題

パソコンでも非表示にしたければ以下をデザインCSSに記載するか

 #box2 {
 display: none;
 }

デザイン設定にて「サイドバー」のモジュールを全て消去すれば非表示になります。

ただし、一点問題があります。

サイドバーを単純に消してしまうと以下のように本文右側に空白のスペースが大きく残ってしまいます。

本文横に空きスペースができてしまう

問題への解決方法

デザインCSSに以下を記載します。

@media(min-width: 768px){
 #box2 {
  width: 1vw;
 }
 #main {
  width: 70vw;
 }
}

このvwという設定が肝になっており、画面全体を100とした際のパーセントとして動的な表示が可能になります。

上のコードはパソコンで閲覧時に本文のエリアの横幅を表すmain部分を画面全体の70%にせよ と明示的に指定しています。
ここの数字は自らのブログデザインにマッチするよう自由に変更してください。

それにより、もともとサイドバーがあった位置に本文が食い込んでいて画面が有効活用されます。
サイドバーを表すbox2は逆に小さくして目立たないようにしています。

終わりに

ブログのデザインによっては、本文に集中させるためにサイドバーを非表示にしたい場合もあるかと思います。
そのような際は pxでエリアを指定するのではなく vw で横幅を指定する手法がおすすめです。

以上、ご参考になれば幸いです。