🥃

Tumblr のカスタムテーマを作ってみた

2022/12/25に公開1

最近ブログを Wordpress から Tumblr に移行したこともあって、せっかくだからと Tumblr のカスタムテーマを作ってみた。
カスタムテーマというとややこしそうな印象を受けるが、Tumblr のカスタムテーマは自由度がそれほど高くないため、1 ファイルのシンプルなテンプレートファイルだけですむ。

できたもの

https://github.com/obata15/minimum-maximum

運用中のブログ

https://text15.tumblr.com/

ドキュメント

公式

テンプレートの記述方法と簡単なチュートリアルが載っている。

https://www.tumblr.com/docs/ja/custom_themes

補足として、2017 年に投稿形式が Neue に統一された。
このため、おそらくこれまでテキストのみを投稿していたユーザーはテンプレートを作る際に Text 以外の投稿タイプを考慮しなくて良い(はず)。
Web 版ではまだ Neue がデフォルトではないので、新しいエディタを使うように設定すると良い。

https://engineering.tumblr.com/post/164826109535/building-the-tumblr-neue-post-format

非公式

一応 LIG が Thumblr のテーマの作り方をサンプルを交えて解説する記事を出しているので、公式ドキュメントと併読すると良い。
ただし 2014 年の記事なので、日本語検索の対応状況が違ったり {block:HomePage} に対応していなかったりと内容がやや古い。

https://liginc.co.jp/web/service/other-service/110898

エディタの設定

公式では明言してない(?)が、テーマのサンプルは Smarty っぽい構文に見える。
VSCode などで Smarty の拡張を導入すると、コードが見やすくなる。

ベーステンプレート

公式チュートリアルを読み進めていくと 完成したテーマのマークアップ例 というセクションがあるので、最初はそのコードをベースに作る感じにする。

あとは、デフォルトのテーマである Tumblr Official のコードあたりも参考になるのだが、構造がやや複雑すぎるのでベースにするというより参考コードして見ると良い。(公式にコード自体が配布されているわけではないので、コピーして自分が見られる場所に置いている)

デプロイ

ローカルでテンプレートファイルをいじって、それを Tumblr に反映させるためには、コードをコピペして Tumblr のテーマエディタにペーストするのだが、もう少しスマートに同期させる方法もあるらしい。が、別にコピペデプロイでもいいかなと思って導入していない。

https://github.com/positlabs/tumblr-templatr

https://chrome.google.com/webstore/detail/easythemes-for-tumblr/ngfojhkndbikighpgpnjfgpckecacpeo?hl=ja

つらいところ

  • if/else や not 構文はサポートしてない
  • (本文中の)サムネイルの画像 URL だけ抜き出すことはできないため、表示をコントロールするにはトリッキーな CSS もしくは JS を書く必要がある

Discussion