はてなブログのコードの埋め込みの折り返しを無効にする

こんにちは、たねやつです。

小ネタですが少し気になっていたので、タイトルの通り修正してみました。あまりにも長いコードはgistとかを活用して外に出してしまうのが得策かもしれませんが、ブログ内で表示せるのが好きなのでやってみました。

以下のような感じで、500pxの高さであふれた縦と横の部分はスクロールできるようになります。

/**
 * 背景色を切り替えます。
 * @param {boolean} flg true を渡すと黒背景色に変更します。
 *                      falseを渡すと元の背景色に戻します。
 */
function changeBgColor(flg) {
    
    if (flg) {
        // 背景を暗くする
        
        const color_veryblack   = '#000000';
        const color_black       = '#121212';
        const color_darkgray    = '#202020';
        const color_white       = '#e5e5e5';
        const border_radius_6px = '6px';

        /**
         * 画面内に一つしか存在しない要素、クラス
         */
        setAttributeStyle('#content',                       'background-color:'     + color_black       + ';'); // 一番背景の背景色
        setAttributeStyle('#blog-title',                    'background-color:'     + color_veryblack   + ';'); // タイトルの背景色
        setAttributeStyle('.hatena-module-related-entries', 'background-color:'     + color_veryblack   + ';'); // 関連記事
        setAttributeStyle('.table-of-contents',             'background-color:'     + color_veryblack   + ';'
                                                          + 'box-shadow:'           + 'none'            + ';'); // 目次
        setAttributeStyle('#main-inner',                    'color:'                + color_white       + ';'); // 本文文字色
        setAttributeStyle('blockquote',                     'color:'                + color_veryblack   + ';'); // 引用
        
        /**
         * 画面内に複数存在する要素、クラス
         */
        setAttributeStyleAll('code',                        'background-color:'     + color_veryblack   + ';'); // code
        setAttributeStyleAll('.archive-entry',              'background-color:'     + color_darkgray    + ';'
                                                          + 'border-radius:'        + border_radius_6px + ';'); // アーカイブ
        setAttributeStyleAll('h5',                          'color:'                + color_white       + ';'); // h5
        setAttributeStyleAll('th',                          'color:'                + color_veryblack   + ';'); // th
        setAttributeStyleAll('.entry-title-link',           'color:'                + color_white       + ';'); // 記事タイトル
        setAttributeStyleAll('.comment-content',            'color:'                + color_white       + ';'); // comment
        setAttributeStyleAll('.hatena-asin-detail',         'color:'                + color_veryblack   + ';'); // asin

        /**
         * 例外
         */
        // .entry-dateとarchive-dateの存在チェックでTOPページか、各記事のページかを判定
        var date_elem = document.querySelector('.entry-date');
        if (date_elem) {
            setAttributeStyle('#main', 'background-color:' + color_darkgray + ';');     // トップツールバーの背景色
            date_elem.children[0].setAttribute('style', 'color:' + color_white + ';');  // タイトルの日付
        }

        var date_elems = document.querySelectorAll('.archive-date');
        if (date_elems) {
            for (var i = 0; i < date_elems.length; i++) {
                date_elems[i].children[0].setAttribute('style', 'color:' + color_white + ';');  // タイトルの日付
            }
        }

        // サイドバーのモジュール
        var module_elem = document.querySelector('#box2-inner');
        if (module_elem) {
            for (var i = 0; i < module_elem.childElementCount; i++) {
                var child = module_elem.children[i];
                child.setAttribute('style', 'background-color:' + color_darkgray + ';');
            }
        }
    
    } else {
        // 背景を明るくする
        
        /**
         * 画面内に一つしか存在しない要素、クラス
         */
        removeAttributeStyle('#content');                       // 一番背景の背景色
        removeAttributeStyle('#blog-title');                    // タイトルの背景色
        removeAttributeStyle('.hatena-module-related-entries'); // 関連記事
        removeAttributeStyle('.table-of-contents');             // 目次
        removeAttributeStyle('#main-inner');                    // 本文文字色
        removeAttributeStyle('blockquote');                     // 引用

        /**
         * 画面内に複数存在する要素、クラス
         */
        removeAttributeStyleAll('code');                // code
        removeAttributeStyleAll('.archive-entry');      // アーカイブ
        removeAttributeStyleAll('h5');                  // h5
        removeAttributeStyleAll('th');                  // th
        removeAttributeStyleAll('.entry-title-link');   // 記事タイトル
        removeAttributeStyleAll('comment-content');     // comment
        removeAttributeStyleAll('.hatena-asin-detail'); // asin

        /**
         * 例外
         */
        // .entry-dateとarchive-dateの存在チェックでTOPページか、各記事のページかを判定
        var date_elem = document.querySelector('.entry-date');
        if (date_elem) {
            removeAttributeStyle('#main');                  // トップツールバーの背景色
            date_elem.children[0].removeAttribute('style'); // タイトルの日付
        }

        var date_elems = document.querySelectorAll('.archive-date');
        if (date_elems) {
            for (var i = 0; i < date_elems.length; i++) {
                date_elems[i].children[0].removeAttribute('style'); // タイトルの日付
            }
        }

        // サイドバーのモジュール
        var module_elem = document.querySelector('#box2-inner');
        if (module_elem) {
            for (var i = 0; i < module_elem.childElementCount; i++) {
                var child = module_elem.children[i];
                child.removeAttribute('style');
            }
        }
    }
}

/**
 * 指定した要素にstyle属性を付加します。
 * @param {string} cond     querySelectorで取得する条件
 * @param {string} style    設定するstyle
 */
function setAttributeStyle(cond, style) {
    if (!cond || !style) return;
    
    var elem = document.querySelector(cond);
    if (!elem) return;
    
    elem.setAttribute('style', style);
}

/**
 * 指定した要素にstyle属性を付加します。
 * @param {string} cond     querySelectorAllで取得する条件
 * @param {string} style    設定するstyle
 */
function setAttributeStyleAll(cond, style) {
    if (!cond || !style) return;
    
    var elems = document.querySelectorAll(cond);
    if (!elems) return;

    for (var i = 0; i < elems.length; i++) {
        var elem = elems[i];
        elem.setAttribute('style', style);
    }
}

/**
 * 指定した要素のstyle属性を除去します。
 * @param {string} cond     querySelectorで取得する条件
 */
function removeAttributeStyle(cond) {
    if (!cond) return;
    
    var elem = document.querySelector(cond);
    if (!elem) return;
    
    elem.removeAttribute('style');
}

/**
 * 指定した要素のstyle属性を除去します。
 * @param {string} cond     querySelectorAllで取得する条件
 */
function removeAttributeStyleAll(cond) {
    if (!cond) return;
    
    var elems = document.querySelectorAll(cond);
    if (!elems) return;

    for (var i = 0; i < elems.length; i++) {
        var elem = elems[i];
        elem.removeAttribute('style');
    }
}

CSSに追加

以下のスタイルをCSSに追加します。

pre, code {
    max-height    : 500px;
    overflow      : scroll;
    white-space   : pre !important;
    text-overflow : clip !important;
}

max-height

あまりにも縦長すぎるソースの場合に横スクロールバーが画面上に表示されない問題対策です。コードのボックスの最大の高さを500pxに制限します。

max-heightなので500px以下の場合や、1行だけの場合もちゃんとぴったりの大きさのボックスで表示されます。

heightぐらいしか知らなかったのですが、こんな便利なプロパティもあるんですね！

overflow

ここにscrollを指定することで、内部の文字列などが外側にはみ出ている場合に縦横のスクロールが有効になります。overflow-x overflow-yなどで縦と横を別々に指定することもできます。

今回の場合はどちらの軸もスクロールしたいのでoverflowで設定しています。

white-space

preを設定することで目的の折り返しが発生しない状態にすることができます。

はてながデフォルトで設定している値がpre-wrap (cssの.entry-content pre内)なので折り返しが有効になってしまっているようです。

これを上書きするために!importantを設定してあげる必要があります。

text-overflow

ここにclipを設定しないと、ボックスからoverflowしている部分が三点リーダー(…)で省略されてしまいます。

コチラもはてながデフォルトで設定している値がellipsisのために発生しているので同じく!importantで打ち消してやりましょう。

完成!

上にもありますがこんな感じになります！

/**
 * 背景色を切り替えます。
 * @param {boolean} flg true を渡すと黒背景色に変更します。
 *                      falseを渡すと元の背景色に戻します。
 */
function changeBgColor(flg) {
    
    if (flg) {
        // 背景を暗くする
        
        const color_veryblack   = '#000000';
        const color_black       = '#121212';
        const color_darkgray    = '#202020';
        const color_white       = '#e5e5e5';
        const border_radius_6px = '6px';

        /**
         * 画面内に一つしか存在しない要素、クラス
         */
        setAttributeStyle('#content',                       'background-color:'     + color_black       + ';'); // 一番背景の背景色
        setAttributeStyle('#blog-title',                    'background-color:'     + color_veryblack   + ';'); // タイトルの背景色
        setAttributeStyle('.hatena-module-related-entries', 'background-color:'     + color_veryblack   + ';'); // 関連記事
        setAttributeStyle('.table-of-contents',             'background-color:'     + color_veryblack   + ';'
                                                          + 'box-shadow:'