はてなブログ云云でアフィリエイトがしたい人のブログ

「はてなブログ」でアフィリエイト・ブログカスタマイズ・最適化・色々試行錯誤中!

【スポンサーリンク】

レスポンシブでスマホ・タブレット表示すると、スクロールバー部分に隙間ができるのをCSSで埋める方法

f:id:yonta24:20160128162932j:plain

今回は、はてなブログテーマ「レスポンシブルー」と使用していてタブレット表示した時にできる隙間を埋める方法を調べてみました。

タブレットでできる隙間を埋めたい

私のブログは現在「レスポンシブルー」を使わせていただいています。

タブレット表示にした時に以下のような隙間が出来ます。

f:id:yonta24:20160128161623j:plain

この写真は、私のiPadでブログを表示したもの。

レスポンシブルーのタイトル部分は幅帯になっていて青いストライプがバシッと決まりとてもお気に入りです。

ただ私の環境(iPad)でタブレット表示した時に、赤い矢印部分に隙間ができてしまうのが少し気になっていました。

overflow:hiddenを追加して解決

タブレットでもブラウザ画面幅100%バシッとストライプが決まらないか調べてみると、Widthを100%にした時に起きるのだそうです。

Firefoxの「要素を調査」で見ると確かに#containerにwidth="100%"が指定されています。

もともとPC表示した場合ここにはスクロールバーが表示されていてパソコン画面では違和感はありません。

そこで、以下のCSSを「デザイン設定>カスタマイズ>デザインCSS」に追加することで解決できました。

【RWD ーレスポンシブー】右にできた謎の余白を消す方法 | バシャログ。 | 横浜でWeb制作を行うシーブレインスタッフによる技術情報ブログ

#container {
    overflow: hidden;
}

画像

f:id:yonta24:20160128161952j:plain

これでタブレットでも、スパっとブラウザ一杯にタイトルのブルーストライプが決まります。

追記:どうやら私の環境だけのようです

(2016-01-29追記)この記事の後で気がついたのですが、自分の他のブログをレスポンシブルーに変更してiPadで見ると初期状態で隙間が出来ない(…なぜ?)ので私のCSSカスタマイズが別の場所で影響ているのかもしれません。

(更に追記)

試しにこのブログの「デザインCSS」で追加した今までのCSSを全て消してみました。

するとやっぱり、隙間登場!

ってことは、少なくとも「デザインCSS」のカスタマイズCSSが影響しているわけではなさそうです。(すると他の部分で変更した箇所が怪しい?)

ともかく、全く何もいじっていない「レスポンシブルー」ではこの事態は起きないことは確かです。

(ただいま原因究明中です…*1

*1:CSS難しい