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

イントロダクション

記事「Blogger:ブラウザの幅いっぱいまでコンテンツを表示する方法 (最低幅は固定）」では、Blogger のテンプレートの HTML を修正して、コンテンツをブラウザの幅いっぱいまで広げて表示する方法について説明しました。

今回は、ページが表示された後にボタンを押すと、コンテンツがブラウザの幅いっぱいまで広げて表示される仕組みを JavaScript で作ってみました。

コード

以下のコードをBloggerの HTML/JavaScript ウィジットに貼り付けます。

<form>
<input type="button" value="コンテンツを最大化" onclick="changeContentMaxWidth('none')" />
</form>

<script type="text/javascript">
<!--
    
    // スタイルシートをコントロールする
    function CSSController() {

        /*
            スタイルを追加したいスタイルシートが外部シートの場合、
            Firefox 29 ではセキュリティエラーとなったので、
            新しいシートを追加してそこにスタイルを追加する方式とする
        */
        var sheet;          // スタイルを追加するスタイルシート

        /*
        スタイルシートに新しいルールを追加する

        selector : CSSのセレクタ
        styleName : スタイル名
        value : スタイルの値

        参考：http://bmky.net/text/note/javascript-css/
        http://ash.jp/web/css/js_style.htm
        */
        this.addRule = function (selector, styleName, value) {

            // 追加先スタイルシートが無い場合、新規作成
            if (!sheet) {
                var style = document.createElement("style");
                document.getElementsByTagName("head")[0].appendChild(style);
                sheet = style.sheet;
            }

            var ins_pos;
            if (sheet.addRule) {        // IE
                sheet.addRule(selector, styleName + ":" + value, sheet.rules.length);
            } else if (sheet.insertRule) {
                sheet.insertRule(selector + "{" + styleName + ":" + value + "}", sheet.cssRules.length);
            }
        }
    }
/*
    Bloggerのコンテンツの幅を変更
    width : スタイルの値として使用する幅
    */
    function changeContentMaxWidth(width) {

        var css = new CSSController();

        // コンテンツの幅を最大化
        css.addRule(".content-outer", "max-width", width);
        css.addRule(".content-fauxcolumn-outer", "max-width", width);
        css.addRule(".region-inner", "max-width", width);
    }

//-->
</script>

「コンテンツを最大化」ボタンを画面上に配置します。
そのボタンをクリックすると changeContentMaxWidth 関数が呼び出されます。

changeContentMaxWidth 関数では、コンテンツ幅を設定しているクラス(.content-outer, .content-fauxcolumn-outer, .region-inner)に対して、max-width を none にすることでブラウザの幅いっぱいまでコンテンツを広げるようにしています。


css.addRule メソッドでは指定されたスタイルシートのセレクタに対して、指定されたスタイル名と値を定義します。

既に存在するセレクタのスタイルに対して値を設定すると、元々存在した方の値よりも新しく設定された値の方が優先されます。

そのため、max-width が元々あるピクセル値で指定されていたものが、none に変更されるため、ブラウザ幅いっぱいまでコンテンツが広がります。

結果

以下のように、「コンテンツを最大化」ボタンをクリックすることで、コンテンツがブラウザ幅いっぱいまで広がることがわかります。

「コンテンツを最大化」ボタンをクリックする前

↓

「コンテンツを最大化」ボタンをクリックした後

コンテンツによっては、ブラウザのページ幅いっぱいまでコンテンツを表示した方が見やすい場合もあるため、閲覧者がコンテンツを見やすいようにこのボタンを配置しておくと、閲覧者の使い勝手が向上するかと思います。


ページの右下に常に表示されるナビゲーションを使っている人はこちらの記事もどうぞ
→ Blogger:ボタンを押すと、ブラウザの幅いっぱいまでコンテンツを表示する (最低幅は固定）-ページの右下に常に表示されるナビゲーションを使っている人向け