header_img

ブログ

サイトデザインをリニューアル!

久しぶりにサイトデザインをリニューアルしました。 コリスさん というWeb関連の情報サイトがあるんですけど ここのデザインをインスパイア参考にさせてもらって 自分流にアレンジしてみました。

PC向けではサイドは固定表示全体の横幅を可変に。 具体的には960px~1140pxで変化します。 959px以下でスマホ/タブレット向けの表示に。 タブレットで横向きの時にPCと同じ表示になるので 見やすくなったと思います。

あとスクロールバーをデフォルト表示に戻しました。 白背景との一体感を高めるためにカスタムしてたのですが 白背景自体やめたので、必要ないだろうと。

そしてスマホ向けには長らく使っていた 上部のナビゲーションを下部に変更。 スマホアプリでよく使われるボトムナビというやつです。

近年のスマホは大型化が進み、片手操作時に 画面上部へタッチしづらいらしいので思い切って下にしました。 (私は両手で操作するので気にしてなかった) ちなみにLunalysの次期バージョンもこれになります。

ついでにスクロールに追随するアニメーションを廃止。 ちょっとポリフィルのサイズが大きいし 今回はシンプル路線にしてみました。 CSSで全ブラウザが実装されたら復活するかも。

ヘッダー画像もPC/スマホで共通に。 まー途中といえば途中なんですがw 相変わらず色が塗れないのでスクリーントーンで それっぽく出来ないか試行錯誤してる最中です。

前後のエントリー