Tumblr 自作テーマ その4

Tumblrを最近いじりまして、結構はまりました。
投稿は画像と画像セットだけで良かったのでまだ良かったのですが、フルカスタマイズはほんと大変そう…
 
○カスタムページリンク

{block:HasPages}
	<ul>
		{block:Pages}<li><a href="{URL}">{Label}</a></li>{block:Pages}
	</ul>
{/block:HasPages}

 
○インデックスページ

{block:IndexPage}
	{block:Posts}
		{block:Photo}
			<figure><a href="{Permalink}"><img src="{PhotoURL-1280}" alt="{PhotoAlt}"></a></figure>
		{/block:Photo}
		{block:Photoset}
			{block:Photos}
				<figure><a href="{Permalink}"><img src="{PhotoURL-1280}" alt="{PhotoAlt}"></a></figure>
			<!-- {/block:Photos} -->
			<!-- インデックスページで1枚のみ画像を表示する -->
		{/block:Photoset}
	{/block:Posts}
{/block:IndexPage}

 
○投稿詳細ページ

{block:Permalink}
	{block:Posts}
		{block:Photo}
			<figure>{LinkOpenTag}<img src="{PhotoURL-1280}" alt="{PhotoAlt}">{LinkCloseTag}</figure>
			{block:Caption}
				{Caption}
			{/block:Caption}
		{/block:Photo}
		{block:Photoset}
			{Photoset}
			{block:Caption}
				{Caption}
			{/block:Caption}
		{/block:Photoset}
	{/block:Posts}
{/block:Permalink}

 
○カスタムページ

{block:Posts}
	{block:Text}
		{block:Title}
			{Title}
		{/block:Title}
		{Body}
	{/block:Text}
{/block:Posts}

カスタムページで「テーマ準拠デザイン」を選ぶ際にはテキスト投稿のタグを使う

• tumblrのテンプレートをつくろう – Qiita

ありがとうございます
 
 
○画像セットのCSS
画像セットは投稿ごとにiframeで出力されるので、JSを使った

$(window).load(function(){
	var photoset = $('iframe.photoset');
	photoset.removeAttr('height').css({'zoom':'1'});
	photoset.contents().find('.photoset').css({'zoom':'1','transform':'scale(1)'});
	photoset.contents().find('.photoset_row').css({'zoom':'1'});
	photoset.contents().find('.photoset_row').css({'margin':'0 0 40px','width':'auto','height':'auto'});
	photoset.contents().find('.photoset_row:last-child').css({'margin-bottom':'0'});
	photoset.contents().find('.photoset_row img').css({'width':'100%','height':'auto'});
	setTimeout(function(){
		var photosetCount = photoset.contents().find('.photoset_row').length;
		var photosetHeight = photoset.contents().height();
		var plusHeight = photosetCount * 40;
		var totalHeight = photosetHeight + plusHeight;
		photoset.attr('height',photosetHeight);
	},1);
});

css – Resizing Tumblr Post iframes with Jquery – Stack Overflow
ありがとうございます
 
 
あとTumblrの初回の投稿表示は管理画面から15までしか指定できないのですがもっと多く見せるには
読み込み時は非表示にして、裏でInfinite Scrollを動かして擬似的にやるしかなさそう。