はてなブログのテーマでレスポンシブが機能しなかった
前の記事に書いたように,レスポンシブなテーマをカスタマイズしていたところ,iPhone5Sでの表示が崩れる問題に遭遇しました.
TL;DR
MINIMというテーマで,レスポンシブにするための記述がiPhone5Sに対応していなかった.
iPhone5Sは横幅360pxなんだけど,何故かテーマではmin-width: 362pxが指定されていて,レスポンシブ指定から外れていた
— tellusium (@tellusium) 2017年3月9日
まずはテーマのバニラ状態で崩れるか確認する
MINIMのサンプルサイトをiPhone5Sで表示させてみたところ,崩れることが確認できました.
PCのブラウザの幅を狭くしてみても,同様の現象が確認できました.
しかも幅を狭くしすぎると崩れることが確認できます.
正常
異常(横にもスクロールできてしまう)
どうやら幅が狭くなりすぎると起こる現象なので,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. 元のテーマを決める
最初から各パーツのデザインを全て決めるのは難しいので,あるテーマを元に,それをカスタマイズするという方法をとりました.はてなブログのテーマは,次のページにまとまっています.
この中から,自分のイメージに一番近いテーマを選びます.今回私は
を選択しました.
2. CSSの追加
設定 -> デザイン -> カスタマイズ -> デザインCSS から,CSSを追記できます.
この作業については下のサイトなどが参考になりました.
自分のいじりたい要素を探すのには,Chromeのデベロッパーツールなどを使いましたが,少々面倒でした.後になって見つけたのですが,次のサイトにどの要素がどのような名前かがまとまっているので,参考になりそうです.
3. フォントを変える
せっかくここまでカスタマイズしたんですから,フォントもデフォルトでなくカッコ良いものに変えちゃいましょう.
私は次の2つのサービスを使いました.
このブログでは,タイトルにLato,本文にUD新ゴ,見出しにM+を使っています.
(3/16追記:見出しもUD新ゴになりました)
設定方法などは,次のサイトが参考になりました.
おまけ
自分の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%;
}
}
re: start
ブログを再始動しようと思います.
Tipsというよりは,製作物の過程や結果をまとめていく日記的なものになる予定です.
よろしくお願いします.