ブログの見た目を作る

公開:2015-09-20 18:04
更新:2020-02-15 04:37
カテゴリ:web,ブログ,html5,css

ちょっとずつではあるが、新しいブログシステムの見た目を作りはじめている。正直このあたり苦手なので試行錯誤している。ようやくモバイル用のハンバーガーメニューみたいなものができたところだ。

レスポンシブ・デザインなんていうのは今ではごく当たり前となっているので、どう作ればいいかはググればすぐ出てくる。メディアクエリを使って、画面サイズに応じてUIをどうするかをCSSでデザインしていくだけなのであるが、これが結構面倒くさい。今の出来具合は以下のURLをご覧いただきたい。

http://sfpgmr.github.io/sfstyle/sample/test/20150920/test/

とりあえず960pxを境界として、それ以下であればモバイル用、それよりも大きい場合はデスクトップ用で表示するようにしてみた。

下の画面はモバイル用である。一応ハンバーガーメニューも実装してみた。 https://68.media.tumblr.com/00520329001a3950d97713c1bb8decc1/tumblr_nuywmjGRww1s44dwzo1_1280.png

下の画面はデスクトップ用である。タイトル下にメニューを配置している。

https://68.media.tumblr.com/d0aa2ea51cfd590e9c2a048149f48694/tumblr_nuywmjGRww1s44dwzo2_1280.png

以上のように画面は非常にオーソドックなものである。CSS3になるとトランジションとかいろいろ使えて、UIアニメーションもそこそこ簡単にできるようになっているから、アニメーションにも凝ってみたいんだけど、まだそこまではいってない。

BoostrapのようなUIライブラリにできたらいいなと思って始めたが、作り始めるとそこまで行きつけない気がすごくしてきた。

今回のブログシステムで狙いたいのは高速ブラウジングである。サクサク読めるようにしたいと思っている。サクサク読めるようになればアーカイブもあまり凝らずに済むし、UIも簡素になって使いやすくなると思っている。といってもまだどうしたらよいかは考え中なんだけれどもね。ページの構造がカギだと思っている。

Google様に問題なくクロールされるようなページ構成にしつつも、裏で非同期に前後ページをレンダリングするような仕組みを作りたいんだけどね。