なんか作ることになったので、
さらに言えばtumblr大好きなので、
ちょっくら調べた。
参考
-
Creating a custom HTML theme | Tumblr
- 公式ドキュメント
-
- いいかんじの日本語資料
基本
tumblrには、
- 投稿一覧:
/ - 投稿詳細:
/posts/{投稿ID} - タグごとの投稿一覧:
/tagged/{タグ名} - 日付ごとの投稿一覧:
/day/{年}/{月}/{日} - 検索ページ:
/search/{検索ワード}
と5種類のページがある。
WordpressやMTならば、このそれぞれにテンプレートを作成していくカタチだが、
tumblrの場合、 テンプレートはひとつしかない。
(ブログ設定画面 → テーマのカスタマイズ → 「HTMLを編集」で出るもの)
ひとつのテンプレートの中で、
現在のコンテキストを判別するblockタグをいろいろ使って、表示するものを決めていく。
主軸になるのは {block:Posts}…{/block:Posts} というタグ。
このなかには、
- 投稿一覧ならば、最新の投稿数件
- 投稿詳細ならば、その投稿
- タグごとの投稿一覧ならば、そのタグのついた投稿数件
- 日付ごとの投稿一覧ならば、その日の投稿数件
- 検索ページなら、検索でマッチした投稿数件
というように投稿が入ってくる。
(こまかいことを言えば、それぞれの投稿のコンテキストがループされて入ってくる)
なお、そういう仕様なので、
CSSは外部ファイルにせず、テンプレートファイルの中に埋め込んでしまうケースが多いようです。
こういうこともできる
投稿一覧ページ(トップページ)でだけ表示するコンテンツ
{block:IndexPage}…{/block:IndexPage} で囲むと、投稿一覧ページでだけ表示する部分を作れる。
この部分にがっつり要素を置けば、
いわゆるタンブラーっぽくない、階層のあるサイトも作ることができる。
投稿詳細でだけ表示するコンテンツ
{block:PermalinkPage}…{block:PermalinkPage}で囲むと、
ページのURL = その投稿のURL となっている時だけ表示してくれるみたい。
「もっと読む」
「もっと読む」が設定されている投稿のコンテキストでは、
{block:More}…{block:More}が表示されるので、これを使う。
このなかで、投稿の固有URIへのリンク({Permalink})を置けばよい。
(投稿詳細では、かならず投稿全文が表示される模様)
テーマユーザーがカスタマイズできる項目を作る
テーマですべてを決めてしまうのではなく、テーマを使うユーザーがカスタマイズできる部分もいろいろ作れるみたい。
こういうことできなさそう
投稿の種類ごとの一覧ページをつくる
- たとえば、動画投稿のみをまとめたページをつくるとか
- トップページでは、動画の投稿しか表示しないようにする、ということは可能。その場合、全種類の投稿を一覧できるページはなくなってしまうけど。
トップページ等で、タグごとに整理して投稿を表示
- 投稿のコンテキストで、「この投稿に、あるタグが付いているかどうか」を判別する手段はないので、これは無理
- とりあえず混ぜこぜで並べてしまって、Javascriptでむりやり引き剥がすとかいうのはあり。だいぶ無茶だけど。
写真の引用元情報の参照
-
{Caption}にとりこまれて表示されちゃうみたい。
カスタムページに関するあれこれ
テーマカスタマイズから追加ができる、カスタムページ。
こちらで「テーマ準拠デザイン」を選んだ場合、ページはどのように表示されるのか?
正解は 「テキスト投稿と全く同じ」、だった。
つまるところカスタムページは、 きれいなURLを付けられるテキスト投稿でしかないみたい。ぬー。
したがって、カスタムページを表示するレイアウトをカスタマイズしたい場合は、テキスト投稿のpermalinkページをつくる場合と全く変わらない。
{block:PermalinkPage}
{block:Posts}{block:Text}
{block:Title}{Title}{/block:Title}
{Body}
{/block:Text}{/block:Posts}
{/block:PermalinkPage}
またこの仕様からか、普通のテキスト投稿と同様、カスタムページに入力したHTMLは、 一部タグが欠落してしまう ようだ。
(自分が見つけた限りでは、 section・tableなど)
そのため、複雑なHTML・CSSを使いたいページがあるときは、カスタムページを使うと不具合が出る可能性もある。