Tumblrは色々カスタマイズ出来てテーマも共有できて楽しいんだけど、いちから作るとなるとそれなりに大変だったりします。
ワタシがテーマ作成で苦労した主な点を纏めてみました。
Qiitaの公式ブログって、Tumblrを使ってるんですね。
テーマ
本当はcssのみで作りたかったんだけど、携帯からの利用を考えるとスクリプトも使わらずに負えない。
で、cssフレームワークを利用するのがやりやすいのかな。
フォント
フォント指定
これが一番悩ましい。
ユーザーが複数のフォントから選択可能な独自タグ「{TitleFont}(ブログタイトル部分のフォント)、{BodyFont}(ボデイ部分のフォント)」を使う方法があるけど、その中に日本語フォントはありません。
う～ん、Google Fonts + 日本語 早期アクセス • Google Fonts + Japanese Early Accessを使うとか。
cssフレームワークを使う場合はフレームワークのをそのまま使うのが殆どです。
アイコンフォント
どのフォントを使ったら迷ったので、有名なFont Awesomeを使うことに。
だけど、Tumblrはアップロードできるファイルが限られているし,全てが必要なわけではない。
CDNは手軽で便利。だけどサーバーが落ちるとその部分は表示されないし、全てを読み込むし、非常用ならいいんだろうけど。
なので、フォントを選んで使えるアイコンフォントジェネレーターのFontelloを選択。
ダウンロードしたzipファイルを解凍し、fontelloのフォルダの中のcssフォルダの中にある埋め込みファイル(fontello-embedded.css)を使ったらできました。
フォトセット投稿
シンプルに複数枚画像を表示させるだけであれば問題ないのですが、Tumblrダッシュボードのように並び替え可能にさせようとするとそれが大変でした。
レスポンシブ用独自タグに{Photoset}と言うのがあります。
これがそのまま挿入しただけでは携帯ではダメなんですね。
以前はあるスクリプトを使っていましたが、もっとコンパクトに出来ないかなと探しても探しても全くわからないので半ば諦めていました。
それでも根気よくhtmlを弄っていると、cssで@mediaを使って幅の値を指定してやったらレスポンシブに出来ました(^▽^)