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

0
contrail

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

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

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

IE 10以下を切ったコトで大きく変わったのは…
CSSのFlexboxを使いました。

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

画像を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以上と限定してしまったから
実は「やらない方が良かった」かもな変更です、今回は(苦笑)。

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

RELATED ITEMs
Adobe Creative Cloud コンプリート(12ヶ月版)
Adobe Creative Cloud コンプリート(12ヶ月版)

adobe( no date )

amazon
0

RELATED POSTs

SELECT ITEMs [ AMAZON ]

COMMENTs 0

コメントを残す

・メールアドレスは非公開です
・htmlタグは使えません
・URLは無効となります
・name と comment( * )は必須です