Terrarium

いわゆる掃き溜めの ありふれた有象無象

はてなブログのテーマでレスポンシブが機能しなかった

前の記事に書いたように，レスポンシブなテーマをカスタマイズしていたところ，iPhone5Sでの表示が崩れる問題に遭遇しました．

TL;DR

MINIMというテーマで，レスポンシブにするための記述がiPhone5Sに対応していなかった．

まずはテーマのバニラ状態で崩れるか確認する

MINIMのサンプルサイトをiPhone5Sで表示させてみたところ，崩れることが確認できました．

PCのブラウザの幅を狭くしてみても，同様の現象が確認できました．

しかも幅を狭くしすぎると崩れることが確認できます．

正常

f:id:tellusium:20170312172831p:plain

異常（横にもスクロールできてしまう）

f:id:tellusium:20170312172818p:plain

どうやら幅が狭くなりすぎると起こる現象なので，CSSを確認してみます．

CSSの確認

デザインCSSでimportしているリンクへ飛ぶと，CSSの中身が確認できます．

レスポンシブ対応を行なっている部分は@media以降の部分なので，それを探します．

見つかりました．一番下にありました．


@media (max-width: 960px) and (min-width: 362px) {
  #content {
    margin: 0 auto;
    width: 100%;
  }
  ...

あれ…min-widthが362pxになっている…iPhone5Sの横幅は360pxなのに…

はい，これで原因がわかりました． 

解決方法

元のCSSを変えるのはできないので，一番手っ取り早い方法として，レスポンシブ対応の部分を丸々デザインCSSにコピペしてきて，min-widthの書式を消去しました．

これでどんなに小さい端末で見てもレスポンシブになるはずです．

余談

なぜmin-width: 362pxにしてあったのかが疑問です．

私はCSS入門者なのでmin-widthを指定する意味がわからないのですが，一定以下に小さくなると，表示が崩れるのでサポート外とする，といった理由でしょうか？

いずれにせよ，360pxという横幅のスマートフォンは少ないはずなので，今現在のほとんどの端末では正しく表示されそうではありますね．

ブログテーマをカスタマイズしてみた

せっかくなので，ブログのデザインをカスタマイズしてみました．

その手順などを簡単にまとめたいと思います．

1. 元のテーマを決める

最初から各パーツのデザインを全て決めるのは難しいので，あるテーマを元に，それをカスタマイズするという方法をとりました．はてなブログのテーマは，次のページにまとまっています．

テーマ ストア - はてなブログ

この中から，自分のイメージに一番近いテーマを選びます．今回私は

MINIM - テーマ ストア

を選択しました．

2. CSSの追加

設定 -> デザイン -> カスタマイズ -> デザインCSS から，CSSを追記できます．

この作業については下のサイトなどが参考になりました．

shiromatakumi.hatenablog.com

自分のいじりたい要素を探すのには，Chromeのデベロッパーツールなどを使いましたが，少々面倒でした．後になって見つけたのですが，次のサイトにどの要素がどのような名前かがまとまっているので，参考になりそうです．

www.yukihy.com

3. フォントを変える

せっかくここまでカスタマイズしたんですから，フォントもデフォルトでなくカッコ良いものに変えちゃいましょう．

私は次の2つのサービスを使いました．

  • TypeSquare：無料で使える書体は1つだけだが，モリサワの高品質の書体を使える
  • GoogleFonts：Googleが提供している様々なフォントを使用可能

typesquare.com

fonts.google.com

このブログでは，タイトルにLato，本文にUD新ゴ，見出しにM+を使っています．

（3/16追記：見出しもUD新ゴになりました）

設定方法などは，次のサイトが参考になりました．

brian.hatenablog.jp

おまけ

自分のCSS構成例を置いておきます．基本的には，フォントと色の設定ですね．

最後の@media以下については，iPhone5Sへのレスポンシブ対応のためで，詳細はそのうちまとめる予定です．

/*  */
@import "http://hatenablog.com/theme/10328749687194646740.css";
/*  */
/* Responsive: yes */

#globalheader-container {
    color: #333;
    background: #fff;
}
body {
    background-color: #fff;
    font-family: "UD Shin Go Light";
    letter-spacing: 1px;
}
#title {
    font-family: "lato",sans-serif;
    font-style: normal;
    font-weight: 200;
}

.entry {
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,.15);
    transition: box-shadow 0.2s;
}
.entry:hover {
    box-shadow: 0 0 20px rgba(0,0,0,.15);
}

.hatena-module {
    border-radius: 10px;
    transition: box-shadow 0.2s;
}
.hatena-module:hover {
    box-shadow: 0 0 20px rgba(0,0,0,.1);
}

h1, h2, h3, h4 {
    font-weight: normal;
}

a,
a:link,
a:visited,
a span {
    color: #660066;
    font-style:normal;
    text-decoration:none;
}
a:hover,
a:active {
    color:#CC00CC;
    text-decoration:none;
}

@media (max-width: 960px) {
  #content {
    margin: 0 auto;
    width: 100%;
  }
  #main {
    margin: 0 auto;
    max-width: 100%;
    width: 100%;
  }
  #main-inner {
    max-width: 95%;
    margin: 0 auto;
  }
  .pager {
    margin-left: 10px;
  }
  #box2 {
    max-width: 100%;
    width: 100%;
    display: block;
  }
  #box2::after {
    content: "";
    display: block;
    clear: both;
  }
  #box2-inner {
    margin: 0 auto;
    width: 95%;
  }
}