はてなブログBrooklynユーザー必読！デザイン崩れを修正する方法

どうも！フジグチです！

つい先日テーマの乗換えをお手伝いする時に、ヒアリングした印象から【Brooklyn】をおススメしました。

はてなブログのテーマでも常にトップを争っているテーマであり、2016年から使用され約4万インストールもされている実績もあるので、安心しておススメできるテーマとして提案しました。

実際にサイトにインストールして、デザインの確認をしてみると･･･

「えっ!？めっちゃデザイン崩れてるんですけどっっっ！！！」

ということに気付き、修正方法を検索してみたりデモサイトに情報が載ってないか確認してみましたが、見つからなかったので自分で修正しました。

現状、このコードを入れて修正しないとBrooklynはデザイン崩れが起きています。

はてなブログテーマBrooklynのデザイン崩れを修正する方法

デザイン崩れの該当箇所
- デザイン崩れの検証
デザイン崩れを修正するCSS
- テーマで使用出来るグローバルナビゲーションを使っている場合
まとめ

デザイン崩れの該当箇所

デザイン崩れの該当箇所は画面幅920px～1150pxの間の「ブログタイトル」と「コンテンツ」の部分です。

ブログタイトルを内包している箱（#blog-title-inner）や、メイン要素やサイドバーを内包している箱（#content）の部分に1020pxという固定値が指定されています。

このため画面幅が1020pxより縮小されても、#blog-title-innerや#contentが1020pxのまま固定されてしまい、余白が失われたり意図せぬスクロールが発生してしまいます。

デザイン崩れの検証

この現象を確かめるために「デザイン」内で変更できる「背景色」を指定してみました。

画像では背景色をオレンジにしてみましたが、ウィンドウを縮小していって1037pxを切るとスクロールバーが出現します。

Brooklyn画面幅1036px時デザイン崩れ箇所

920pxになりスクロールすると、見切れる幅がかなり広がり背景色を付けたbody要素からサイドバーがはみだしているのが分かります。

Brooklyn画面幅920px時デザイン崩れ箇所

この現象を解消するために、画面幅920px～1150pxの間のCSSの指定方法を変更します。

デザイン崩れを修正するCSS

デザイン崩れを修正するには以下のコードを、

ダッシュボード > デザイン > スパナマーク > デザインCSSの枠内に入れます。

余談ですが上記のようにアイコンを本文で使う場合は、はてなブログで使えるアイコンフォント全125種でコードを取得すると簡単に使うことが出来ます。

リンク先ではアイコンをクリックするだけでコードがコピー出来るようになっているので、いつでも簡単にアイコンを使用することが出来ます。

カスタマイズする時だけでなく、このような説明をする場合に使用すると、より分かりやすく説明することが出来ます。

/*** Brooklynデザイン崩れ修正コード ***/
@media (min-width: 920px) and (max-width: 1150px) {
    #blog-title-inner {
        width: 93.75%;
    }
    #container #content {
        width: 93.75%;
    }
    #main {
        width: calc(100% - 340px);
    }
}

テーマで使用出来るグローバルナビゲーションを使っている場合

テーマで使用出来るグローバルナビゲーションを使っている場合は、このナビゲーションを指定するCSSにもデザイン崩れの原因となる記述がされているので、注意してください。

修正するために、先ほどのコードに.global-menu-list {width: 100%;}を追記します。

/*** Brooklynデザイン崩れ(グローバルナビゲーションを含む)修正コード ***/
@media (min-width: 920px) and (max-width: 1150px) {
    #blog-title-inner {
        width: 93.75%;
    }
    #container #content {
        width: 93.75%;
    }
    #main {
        width: calc(100% - 340px);
    }
    .global-menu-list {
        width: 100%;
    }
}