「Tumblr on freo」表示サンプル

freoにtumblrの新着情報を掲載できるプラグイン「Tumblr on freo」で使えるテンプレート集です。このページはサンプル用にHTML化しているので動的には表示変化はしません。

サンプル1

75×75px四方のサムネイルを並べる形。

HTML

<ul>
<!--{foreach from=$tof_sample.post.response.posts|smarty:nodefaults item='tof'}-->
	<li><a href="{$tof.post_url}"><!--{if $tof.photos.0.alt_sizes.5.width ge "75"}--><img src="{$tof.photos.0.alt_sizes.5.url}" alt="{$tof.date|date_format:'%Y/%m/%d'}" width="{$tof.photos.0.alt_sizes.5.width}" height="{$tof.photos.0.alt_sizes.5.height}" /><!--{else}--><img src="{$tof.photos.0.alt_sizes.4.url}" alt="{$tof.date|date_format:'%Y/%m/%d'}" width="{$tof.photos.0.alt_sizes.4.width}" height="{$tof.photos.0.alt_sizes.4.height}" /><!--{/if}--></a></li>
<!--{/foreach}-->
<li class="more"><a href="{$tumblronfreo.info.response.blog.url}">more</a></li>
</ul>
	   

CSS

.tof_photolist1 ul{
	overflow: hidden;
}

.tof_photolist1 li{
	float: left;
	margin-right: 5px;
	padding: 0;
	list-style: none;
}

.tof_photolist1 .more a,
.tof_photolist1 img{
    border: solid #cccccc 1px;
}

.tof_photolist1 .more a,
.tof_photolist1 .more a:link,
.tof_photolist1 .more a:visited,
.tof_photolist1 .more a:hover,
.tof_photolist1 .more a:active{
	font-size: 20pt;
	text-align: center;
	background:;
	height: 75px;
	width: 75px;
	display: block;
	line-height: 75px;
	background-color: #cccccc;
	color: #ffffff;
	text-decoration: none;
}
	   

サンプル1 角丸ver

75×75pxの角丸サムネイルを並べる形。HTMLはサンプル1と同じでCSSだけ入れ替え。

CSS

.tof_photolist1 ul{
	overflow: hidden;
}

.tof_photolist1 li{
	float: left;
	margin-right: 5px;
	padding: 0;
	list-style: none;
}

.tof_photolist1 .more a,
.tof_photolist1 img{
    border: solid #cccccc 1px;
    border-radius: 5px;
}

.tof_photolist1 .more a,
.tof_photolist1 .more a:link,
.tof_photolist1 .more a:visited,
.tof_photolist1 .more a:hover,
.tof_photolist1 .more a:active{
	font-size: 20pt;
	text-align: center;
	background:;
	height: 75px;
	width: 75px;
	display: block;
	line-height: 75px;
	background-color: #cccccc;
	color: #ffffff;
	text-decoration: none;
}
	   

サンプル1 丸ver

75×75pxの丸いサムネイルを並べる形。HTMLはサンプル1と同じでCSSだけ入れ替え。

CSS

.tof_photolist1 ul{
	overflow: hidden;
}

.tof_photolist1 li{
	float: left;
	margin-right: 5px;
	padding: 0;
	list-style: none;
}

.tof_photolist1 .more a,
.tof_photolist1 img{
    border: solid #cccccc 1px;
    border-radius: 75px;
}

.tof_photolist1 .more a,
.tof_photolist1 .more a:link,
.tof_photolist1 .more a:visited,
.tof_photolist1 .more a:hover,
.tof_photolist1 .more a:active{
	font-size: 20pt;
	text-align: center;
	background:;
	height: 75px;
	width: 75px;
	display: block;
	line-height: 75px;
	background-color: #cccccc;
	color: #ffffff;
	text-decoration: none;
}
	   

サンプル2

大き目の指定サイズにトリミングしてドロップシャドウ。

全ての記事一覧へ

HTML

<ul>
<!--{foreach from=$tof_sample.post.response.posts|smarty:nodefaults item='tof'}-->
    <li><a href="{$tof.post_url}">
    <!--{if $tof.photos.0.alt_sizes.2.width ge "400"}-->
    <img src="{$tof.photos.0.alt_sizes.2.url}" alt="{$tof.date|date_format:'%Y/%m/%d'}" />
    <!--{else}-->
    <img src="{$tof.photos.0.alt_sizes.1.url}" alt="{$tof.date|date_format:'%Y/%m/%d'}" />	        
    <!--{/if}-->
    </a></li>
<!--{/foreach}-->
</ul>
<p><a href="{$tumblronfreo.info.response.blog.url}">全ての記事一覧へ</a></p>
	   

CSS

.tof_photolist2 ul{
	margin:0;
}

.tof_photolist2 li{
    float: left;
    width: 200px;/* トリミング後の横幅 */
    height: 200px;/* トリミング後の縦幅 */
    position: relative;
    overflow: hidden;
    border: solid #ccc 1px;
    -webkit-box-shadow: 3px 3px 2px -2px #aaa;
       -moz-box-shadow: 3px 3px 2px -2px #aaa;
            box-shadow: 3px 3px 2px -2px #aaa;
    margin: 15px;
}

.tof_photolist2 li a {
    position: absolute;
    left:50%;
    top: 100%;/* トリミングする位置調整 */
    width: 1000%;
    height: 282px;
    line-height: 2000px;
    margin:-1000px 0 0 -500%;
    text-align: center;
}

.tof_photolist2 li a img{
    min-height: 200px;
    min-width: 10%;
    vertical-align: middle;
}
	   

サンプル3

トリミングしてタグ情報つき。

2014/02/08
2014/02/08
Ar tonelicoアルトネリコ2
2014/01/24
2014/01/24
norn9ノルンノネット
2014/01/21
2014/01/21
ガンダムビルドファイターズgundam build fighters
2014/01/05
2014/01/05
アルトネリコ2ar tonelico
2014/01/05
2014/01/05
2013/12/22
2013/12/22
ガンダムビルドファイターズgundam build fighters

全ての記事一覧へ

HTML

<!--{foreach from=$tof_sample.post.response.posts|smarty:nodefaults item='tof'}-->
	<dl>
    <dt><a href="{$tof.post_url}">
    <!--{if $tof.photos.0.alt_sizes.2.width ge "400"}-->
    <img src="{$tof.photos.0.alt_sizes.2.url}" alt="{$tof.date|date_format:'%Y/%m/%d'}" />
    <!--{else}-->
    <img src="{$tof.photos.0.alt_sizes.1.url}" alt="{$tof.date|date_format:'%Y/%m/%d'}" />	        
    <!--{/if}-->
    </a></dt>
    <dd>
    	<div>{$tof.date|date_format:'%Y/%m/%d'}</div>
    	<!--{foreach from=$tof.tags|smarty:nodefaults item='tof_tags'}--><span>{$tof_tags}</span><!--{/foreach}-->
    </dd>
	</dl>
<!--{/foreach}-->
<p><a href="{$tumblronfreo.info.response.blog.url}">全ての記事一覧へ</a></p>
	   

CSS

.tof_photolist3 dl{
    float: left;
    width: 210px;
    height: 290px;
    margin: 15px;
    padding: 0px;
    border: solid #ccc 1px;
    background-color: #ffffff;
    -webkit-box-shadow: 3px 3px 2px -2px #aaa;
       -moz-box-shadow: 3px 3px 2px -2px #aaa;
            box-shadow: 3px 3px 2px -2px #aaa;
}

.tof_photolist3 dt{
    width: 210px;/* トリミング後の横幅 */
    height:200px;/* トリミング後の縦幅 */
    position: relative;
    overflow: hidden;
}

.tof_photolist3 dt a{
    position: absolute;
    left:50%;
    top: 100%;/* トリミングする位置調整 */
    width: 1000%;
    height: 282px;
    line-height: 2000px;
    margin:-1000px 0 0 -500%;
    text-align: center;
}
.tof_photolist3 dt a img{
    min-height: 200px;
    min-width: 10%;
    vertical-align: middle;
}

.tof_photolist3 dd{
    width: 200px;
    margin: 0px;
    line-break: strict; 
}

.tof_photolist3 dd div{
    color: #aaa;
    font-size: 12px;
    margin: 3px 5px;
}

.tof_photolist3 dd span{
	background-color: #eeeeee;
	color: #666;
	margin: 3px;
    font-size: 10px;
	padding: 0 7px;
    border-radius: 10px;
}
	   

サンプル改造編1

リンク先をTumblrの個別記事から拡大画像ページに変える。

HTML

<a href="{$tumblronfreo.info.response.blog.url}image/{$tof.id}">
	   

サンプル改造編2

freoに標準装備されているColorboxをつかって表示させる(画像への直リンクになってます)

HTML

<a href="{$tof.photos.0.original_size.url}">