ぱらむ・すきっちぇ

参考→Tumblr カスタムテーマの作り方（日本語訳）

グリッドレイアウトでサムネール画像を表示している変数 {PhotoURL-250} を幅100ピクセルサイズを表示する {PhotoURL-100} に変更します。サムネール間の間隔も30→6ピクセルにしてみました。

Cargoテーマ テンプレートソース360行目あたり
   {block:Photo}
   <div class="post_thumb" id="thumb_{PostID}">
    <div class="image photo rounded">
    <!-- PhotoURL-250 をPhotoURL-100に変更
     <div class="bg rounded" style="background-image:url('{PhotoURL-250}')"></div>
     -->
     <div class="bg rounded" style="background-image:url('{PhotoURL-100}')"></div>
     <div class="icon"></div>
    </div>
   </div>
   {/block:Photo}

CSS
.post_thumb{
	float:left;
/* original
	margin-right:30px;
	margin-bottom:30px;
	width:200px;
	height:200px;
*/ 
/* 幅・高さとサムネール間隔を狭く */
	margin-right:6px;
	margin-bottom:6px;
	width:100px;
	height:100px;
	position:relative;
}

他にも

.post_thumb 内の要素で大きさ指定があったもの

• .post_thumb .image
• .post_thumb .regular
• .post_thumb .link
• .post_thumb .loading
• .post_thumb .photoset
• .post_thumb .photoset .thumbs .thumb
• .post_thumb .photoset .thumbs .thumb img
• .post_thumb .info

.grid 内の要素

• .grid .video .bg
• .grid .image .bg
• .grid .image .icon
• .grid .photoset .icon

これらの中で幅・高さ指定がある箇所を
width:200px;→width:96px;
height:200px;→height:96px;に変更
他にもサムネール内でキャプション等の位置が指定してあったりするので、後で文字が隠れたりする箇所があれば修正が必要になりそうです。

サムネールクリックで拡大

サムネール画像が小さくなったとはいえ、クリックして拡大画像（左右500px）を表示させると、その拡大画像と説明文の高さだけグリッド部分が下がってしまいます。

モニターの大きさにもよりますが、縦長の画像や説明文が長いとサムネールが全部隠れてしまい、スクロールを繰り返さないといけないはめになってしまいます。

拡大するとグリッドサムネール画像が下に移動してしまう

縦長画像だとサムネールが隠れてしまう

tumblr Cargo Theme グリッド部分移動

グリッドサムネールのエリアが拡大表示エリアの下になっているので、これを右側に移動します。
幅100px+アキ6pxに変更したサムネールコマが3列入るように 320pxにしました。

そして#entry（多分500pxの写真を表示させるエリア）と.grid（グリッドエリア）をそれぞれ左右にフロートさせます。

CSS
/*メインコラム */
#main_column{
	margin:0px auto;
	width:900px;
	position:relative;
}
/* グリッドエリア */
#main_column .grid{
/*	width:780px; ---original*/
	width:320px; 
	float:right;	
}
/* グリッド内サムネール */
.post_thumb{
	width:100px;
	height:100px;
	margin-right:6px;
	margin-bottom:6px;
	position:relative;
}
/* 拡大写真エリア */
/* original
#entry,
.list{
	width:660px; 
}
 　　　↓　　　*/
#entry {
	width:520px;
	float:left;
}
.list{
	width:640px;
}

これで一応、画像ビューア風のレイアウトになりましたが、tumblr.の変数タグがあまりよくわかっていないので何かおかしなところが出てくる可能性はありそうです。

グリッドレイアウトで開いた時の状態

サムネールクリックで拡大画像を表示