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

イントロダクション

Blogger のほとんどのテンプレートでは、コンテンツの最大幅が決まっています。
この最大幅はテンプレートのカスタマイズにて、幅を指定することができます。

ただし、人によっては最大幅を指定せず、ブラウザの表示領域全てをコンテンツの表示のために使いたいという人もいると思います。

そこで、今回は Blogger のテンプレートの HTML を編集して、コンテンツをブラウザの表示領域全てに表示するようにしてみます。

コード

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

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

この部分の、max-width: $(content.width); を書き換えて、次のようにします。

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

スタイルシートの最大幅指定(max-width) を固定値から none に変更したことで、コンテンツがブラウザの幅いっぱいに表示されるようになります。

結果

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

最大幅変更前

↓

最大幅変更後

なお、今回は 最小幅(min-width)は変更していないため、ブラウザの表示サイズを小さくしていった場合には次のようになります。Blogger のテンプレートのカスタマイズで指定したページ幅よりブラウザの表示サイズが小さくなった場合には、コンテンツのサイズはBlogger のテンプレートのカスタマイズで指定したページ幅より小さくはならず、ブラウザに横方向のスクロールバーが表示されます。スクロールすることでコンテンツ全体を見ることが出来るようになります。

注意

Internet Explorer 6(IE6) 以前のブラウザへの対応

max-width は IE6 以前のブラウザでは非対応のため(参考文献1)、今回の対処を施したページを IE6 以前のブラウザで表示すると _width で指定されているコンテンツ幅（テンプレートのカスタマイズで指定したページ幅）が適用されます。

_width の部分を消すことにより、IE6 以前のブラウザでもブラウザの幅いっぱいにコンテンツを表示できるようになるはずですが（IE6以前のブラウザを持っていないため検証できていません。）、最小幅の指定が出来なくなるため、ブラウザの幅が小さい場合にはコンテンツの表示が崩れる恐れがあります。


また、参考文献1 の方法により、IE6 でも最大幅の指定と、最小幅の指定が出来るようです。

しかしながら、既に IE6 のサポートは終了しているため（一部 Windows Server 2003 向けの IE6 は 2015年7月14日までサポートが継続されているようです。(参考文献2)）、IE6 向けに対してそこまで考慮する必要はないと思います。


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

ユーザが動的にコンテンツの表示幅をブラウザの幅いっぱいに変更する
→ 「Blogger:ボタンを押すと、ブラウザの幅いっぱいまでコンテンツを表示する (最低幅は固定）」

参考文献

1

IE 6で泣かないための、9つのCSSハック（1/3） - ＠IT
http://www.atmarkit.co.jp/fwcr/design/benkyo/csshack01/01.html#02

2

Internet Explorer 6 - Wikipedia
http://ja.wikipedia.org/wiki/Internet_Explorer_6