サイトデザインをリニューアル!
久しぶりにサイトデザインをリニューアルしました。
コリスさん
というWeb関連の情報サイトがあるんですけど
ここのデザインをインスパイア参考にさせてもらって
自分流にアレンジしてみました。
PC向けではサイドは固定表示、全体の横幅を可変に。 具体的には960px~1140pxで変化します。 959px以下でスマホ/タブレット向けの表示に。 タブレットで横向きの時にPCと同じ表示になるので 見やすくなったと思います。
あとスクロールバーをデフォルト表示に戻しました。 白背景との一体感を高めるためにカスタムしてたのですが 白背景自体やめたので、必要ないだろうと。
そしてスマホ向けには長らく使っていた 上部のナビゲーションを下部に変更。 スマホアプリでよく使われるボトムナビというやつです。
近年のスマホは大型化が進み、片手操作時に 画面上部へタッチしづらいらしいので思い切って下にしました。 (私は両手で操作するので気にしてなかった) ちなみにLunalysの次期バージョンもこれになります。
ついでにスクロールに追随するアニメーションを廃止。 ちょっとポリフィルのサイズが大きいし 今回はシンプル路線にしてみました。 CSSで全ブラウザが実装されたら復活するかも。
ヘッダー画像もPC/スマホで共通に。 まー途中といえば途中なんですがw 相変わらず色が塗れないのでスクリーントーンで それっぽく出来ないか試行錯誤してる最中です。