soraizmをレスポンシブ化しました

このブログ（soraizm）をリニューアル！ とまで言わないけど、
いろいろとブラッシュアップしてみました〜♪
90%以上はHTMLタグやCSSって裏側の変更＆改善なので
表側のデザイン的な見栄えはほぼほぼ変わってません（笑）。

つーのも、今年の2016年1月12日以降は
MicrosoftのIEサポート状況が大きく進展して、
古いブラウザを無視できる時期になったのがキッカケ… かな。
提供元のメーカーが切り捨てたモノを個人が守ってもね〜。

・Internet Explorer サポートポリシー変更の重要なお知らせ

なので、このブログは思い切ってIE 11を対象としました！
他のChrome・Safari・iOS・AndroidもIE 11よりは新しいバージョンで。

IE 10以下を切ったコトで大きく変わったのは…
CSSのFlexboxを使いました。
・Flexboxのブラウザ サポート状況。

Flexboxを使うのはかなり悩んだけどね〜。
やりたいレイアウトはFlexboxを使わなくても他のCSSで実現可能なのだ。
ただFlexboxを使った方が簡単で楽に実装できる。
んが、楽になるけどブラウザをIE 11以上と限定してしまう（汗）。
作ってる途中でも心の天秤が揺れる揺れる（笑）。

画像をSVG（SVGZ）に切り替えました。
・SVG（SVGZ）のブラウザ サポート状況。

iPhoneなんかのRetinaディスプレイに対応するため
1つの画像でPC用とスマホ用ってサイズ違いを用意していたのだけれど、
SVGなら1つの画像でどんな解像度もOKって便利な画像形式なので、
がっつり全ての画像をSVGに差し替えました〜♪

ただ、SVGは容量が重いのでSVGの圧縮版なSVGZを使ってます。
この圧縮版がもし無かったらSVGは不採用！ ってぐらいの重さです（汗）。

んで、ついにこのsoraizmも
流行りのレスポンシブに対応しましたよー♪

今まではPC用とスマホ用のHTMLを作って
WordPressのプラグイン「Any Mobile Theme Switcher」で表示を切り替えてたけど、
右も左もレスポンシブが当然のような世の中になってきたし…。
一応は自分もレスポンシブを流行らせたスマホを使ってるので（苦笑）。

ちなみに…
WordPressでスマホを判断する関数「is_mobile」を使ってるんだけど、
この「is_mobile」ってのは「UserAgent」で判定しています。
なので、CSSの切り替えはブレイクポイント（サイズ）でなく、
関数にあわせて「UserAgent」にしました。

と、まぁ、やらなくてもいいブラッシュアップばかりでしたね〜。
むしろ、ユーザー環境をIE 11以上と限定してしまったから
実は「やらない方が良かった」かもな変更です、今回は（苦笑）。

リニューアル後もまだ心の天秤がゆれてる（笑）。