Blogger:ブラウザの幅いっぱいまでコンテンツを表示する方法 (最低幅も指定しない）

イントロダクション

前回「Blogger:ブラウザの幅いっぱいまでコンテンツを表示する方法 (最低幅は固定）」は、Blogger のコンテンツをブラウザの幅いっぱいまで表示する方法について説明しました。

前回の方法では、最低幅は指定されており、ブラウザのサイズが最低幅を下回った場合には、コンテンツのサイズは最低幅で固定され、横スクロールバーが表示されました。

ブラウザのサイズがコンテンツの最低幅を下回った場合、ブラウザにスクロールバーが表示される

↓右にスクロール

右にスクロールすることで隠れていたコンテンツを見ることが出来る

今回は、最低幅の指定もなくし、コンテンツがブラウザの幅に完全に追従するようにしてみます。

コード

Blogger のテンプレートの HTML の編集より、次の記述を見つけます。

body {
min-width: $(content.width);
}
.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: $(content.width);
max-width: $(content.width);
_width: $(content.width);
}

この部分のスタイルをすべて削除します。
今後元に戻せるように、コメント(/* ... */) で囲んでおくとよいでしょう。

/*
body {
min-width: $(content.width);
}
.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: $(content.width);
max-width: $(content.width);
_width: $(content.width);
}
*/

結果

以下のように元々はページの最大幅が指定されていましたが、変更後はブラウザの表示領域いっぱいまでコンテンツが表示されていることがわかります。

変更前

↓

変更後

そして、ブラウザの幅を小さくすればするほど、コンテンツの幅もブラウザの幅の縮小に追従して小さくなっていきます。

ブラウザの幅を小さく

↓

ブラウザの幅をもっと小さく

これでブラウザがどんなサイズになったとしても、可能な限り横スクロールをせずにコンテンツを表示することができます。

ただし、要素中に画像などの横幅が固定されている要素があると、その分は横スクロールせざるを得なくなります。

また、ページによっては最小幅の指定がないと、ブラウザを極限まで小さくした場合に、まったくコンテンツが読めなくなる場合もあるので、注意が必要です。