本題に入る前に
github pagesでやったほうが楽だけど・・・
- 写真やテキストでの更新がある
- 更新作業がエンジニア以外の人間が行う
- (ペライチ)
という場合はtumblrでやるのも良いかもしれません。一応CSSやjsで制限はあまりありません。
カスタマイズ可能なブログでやってもいいけど、
- 無料で独自ドメインを設定出来る
- スマホアプリで更新が可能(オフラインでも記事が書ける)
等のメリットもあります。
tumblrの制限
まずtumblrでサイト製作するにも、この辺に制限があるので注意です。この辺を許容出来ないのであれば他の方法を探したほうがいいかもしれません。
- アップロード出来るファイルサイズと種類に制限がある※
- ファイルアップロードが手動なのでめんどくさい
※アイコンファイル(.ico)がアップロード出来ません。この対策については後述
手順
目標:tumblr適用がさらっと完了する状態に持っていく
cssもjsもhtmlに直接記載する
gulp等を使って、jadeのincludeを使って出来上がったcss,jsを読むことでindex.htmlに全部統合出来る
画像をspriteにしてアップするのを数枚にまとめる
リピートする画像以外の画像はspriteにして画像アップの手間を省略する。
(他:ogp.pngだけは別途上げる必要あり)
- spriteの注意点:iOSでデカイ画像がボケるのでだいたい2000px*2000px超えたら分けるべし
CSSでのbackgroundをアセッツに登録した画像のURLにする
もし画像をcanvasとかで使いたいって場合はbase64にして突っ込みましょう
faviconも.icoファイルをbase64に変換してhrefに入れる事でIE10,9も表示可能になる
ここまで準備すればtumblrでのサイト製作も随分と楽になります。他にも何かtipsがあれば教えて下さい。