diary のデザインを刷新した - dev.jgs.me

http://diary.jgs.me


Tumblr は独自のマークアップ {block:Post} みたいなのをふんだんに使ったマークアップを一枚絵にして出さないといけないので結構大変。2013年の4月から使っている前のテーマは、適当なシンプルなテーマから足し引きしたりして当時の自分にイイ感じのスタイルにしていた。すると toihrk に参考にされていて 結構嬉しくなった。

とはいえ、もう2年近く同じスタイルで使い続けていたのでさすがに飽きてきてたのもあったし、イチから自分用のマークアップを書きたい欲求もあったのでごっそり書き起こした。

http://github.com/jgsme/diary

さすがにこの2015年にあの一枚絵をモリッと書いていくのはハートブロークンなので Jade と Stylus でひたすらに切り刻んで見通しを良くした。全体のレイアウトは index.jade のようなひたすら include するやつにして、各パーツで posts/photo/template.jade posts/photo/style.styl のような簡単な Jade と Stylus を持つようにして全体の見通しをめっちゃ良くした。

gulp で例の一枚絵を錬成してそれを Tumblr の Theme editor にコピペして確認して〜という作業をひたすら繰り返す。ここらへんもいっそライブプレビューぐらいできるようにしようかとおもったが、そっちの方にコストがかかりそうだったので愚直にコピペを繰り返した。

個人的な要件として

コンテンツをデカく表示したい
Tumblr のどの種類の投稿なのか見やすくしたい
字が読みやすい


あたりが大きかったのでそれぞれ

コンテンツをデカく表示したい -> 写真は横1024pxのやつを持ってきて100%表示
-> その他コンテンツも100%っぽい表示に

Tumblr のどの種類の投稿なのか見やすくしたい -> 日付のバーを Tumblr の投稿種別アイコンの色に
-> Link や Video はコンテンツの隙間を種別色と同じで埋める

字が読みやすい -> 大きめ明朝体が自分の中でブームなのでそういう感じ



というような対応をした。だいぶ気に入ってるのでしばらくはこれでいきます。あと、リポジトリのコード類もまあまあ再利用効くとおもうので fork して自分の好きなようにスタイルを変えたり構成を変えたりして使えるかとおもうのでよろしければ。ただ、自分が全然使わない Chat とか Audio あたりは手抜き状態なのでそこだけはお気をつけくださいー。

original: http://dev.jgs.me/2015/03/07/redesign-diary
#20150307 #0307

関連ページとランダムに選ばれたページ

筆者について

jigsaw(ジグソウ、1991年6月12日-)は日本のプログラマ、会社代表。本名は小林貴也(こばやし たかや)。主にウェブ、フロントエンド領域で活動している。カミング・スーン合同会社の代表社員。
さらに詳しく

寄附について

面白かったらBTCETHでの寄附をお待ちしております。
寄附のきろく