Tumblr 自作テーマ その3

こちらのサイトに合わせて、Tumblr もアップデートしました。

 

主に参考はLIGさんの記事

• Tumblrでもここまでデザインできる！オリジナルカスタマイズの実例解説
• Tumblrテーマを本気でつくる Vol.1「テーマカスタマイズの基本編」
• Tumblrテーマを本気でつくる Vol.2「テーマカスタマイズの独自タグ理解編」
• Tumblrテーマを本気でつくる Vol.3「テーマカスタマイズ実践編」

 

引っかかったところ

 

○indexページではPhotosetの表示を1枚だけに
Photosetの投稿タイプの場合、

{block:Photoset}
	{block:IndexPage}
		{block:Photos}
			<img src=&quot;{PhotoURL-HighRes}&quot;>
		{/block:Photos}
	{/block:IndexPage}
{/block:Photoset}

こういう書き方だとデフォルトでセットの写真がすべて表示されてしまう。
これを1枚だけにしたい場合、

{block:Photoset}
	{block:IndexPage}
		{block:Photos}
			<img src=&quot;{PhotoURL-HighRes}&quot;>
		<!--{/block:Photos}-->
	{/block:IndexPage}
{/block:Photoset}

と {/block:Photos} をコメントアウトすると、2枚目以降が非表示に。
cssでやる方法もあるようです。

 

○参考

• indexing – First image only from photoset on indexpage, then all on permalinkpage – Stack Overflow

 

○オートページャー
ページナビゲーションをやめて、Infinite Scrollを実装しました。
実装が簡単なのはこちらのやり方のようですが、カスタマイズの自由さは既存のjQueryプラグインのほうがあるようです。
JS部分

<script src="jquery.js"></script>
<script src="jquery.infinitescroll.min.js"></script>
<script>
$(function(){
	$('section.mainArea').infinitescroll({
		loading: {
			finished: undefined,
			finishedMsg: 'All Posts Loaded.',
			msg: null,
			msgText: '<p class="loading">Loading Posts...</p>',
			img: null,
			selector: null,
			speed: 0,
			start: undefined
		},
		navSelector  : 'div.pagenation', // ページナビゲーション セレクタ
		nextSelector : 'p.older a', // 次のページリンク セレクタ
		itemSelector : 'section.mainArea article', // 投稿グループ セレクタ
	});
});
</script>

 

○参考

• Greasemonkeyを使わずにTumblrでオートページャー、他