フジブロっ!

はてなブログのカスタマイズに役立つ記事やツール、デザインテーマの制作を行なっている、カスタマイズ専門ブログ

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

どうも!フジグチです!

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

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

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

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

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

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

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

デザイン崩れの該当箇所

デザイン崩れの該当箇所は画面幅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%;
    }
}

まとめ

まさかこんなに利用者の多いテーマで、このようなデザイン崩れが起こっているとは思ってもみなかったのですが、この920px~1040px前後の画面サイズのデバイス利用者が少なく、気付く方がいないのかもしれませんね。

もしも、Brooklynから別のテーマに乗り換えた場合は、このコードを削除しないとレイアウトがおかしくなるので、忘れずに削除してください。

本来であれば、テーマ製作者が該当箇所のコードを修正して頂ければ良いのですが、現在サポートをしていないよう(未確認)なので、【Brooklyn】利用者はインストールしたらまず始めに必須設定として、この記事のコードを入れてデザインを修正するべきだと思いますのでご活用ください。

※当サイトの画像を無断で使用する著作権侵害を受けたため、画像だけでなく記事内のコードも原則転載禁止といたしました。

コードを紹介する場合は引用や転載はせずにリンクを明記してください。