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

イントロダクション

記事「Blogger:ボタンを押すと、ブラウザの幅いっぱいまでコンテンツを表示する (最低幅は固定）」では、ボタンを押すとブラウザの幅いっぱいまでコンテンツを広げて表示する方法について紹介しました。

その時に以前紹介した「ページの右下に常に表示されるナビゲーション」を使っている場合には、コンテンツとページの右下に常に表示されるナビゲーションが重なってしまい、ページが見づらい状態になってしまいます。

コンテンツに重なったページの右下に常に表示されるナビゲーション

そこで、今回はボタンを押してコンテンツをブラウザの幅いっぱいまで表示した時には、ページの右下に常に表示されるナビゲーションは非表示にしたいと思います。

コード

以下のコードを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);

        // ページ右下のナビは消す
        css.addRule("#page-navi", "display", "none");
    }

//-->
</script>

変更箇所は changeContentMaxWidth 関数の最後に追加した以下のコードです。

        // ページ右下のナビは消す
        css.addRule("#page-navi", "display", "none");


ページの右下に常に表示されるナビゲーションの id である page-navi に対して、スタイルの display を none にすることで、ページの右下に常に表示されるナビゲーションを非表示にしています。

結果

以下のように、「コンテンツを最大化」ボタンを押すと、ページの右下に常に表示されるナビゲーションは非表示になります。

「コンテンツを最大化」ボタンを押す前

↓

「コンテンツを最大化」ボタンを押した後

これで、最低限、ページの右下に常に表示されるナビゲーションがコンテンツの上にかぶって見づらくなるということは避けられるようになりました。