[Download] CSS Based FlickrBadge – Flickrに上げた写真を自動でブログ内にインポートするソースコード一式
こちらの記事、今までは当ブログ内のDownloadページ内にあったものですが、固定ページなくしたいなーとお前から思ってたので、記事としてスピンアウトさせたものです。作ったのは結構前なんだけど、まだ現役で使えるっぽいので1つの記事にしてみました。
flickrのバッジをCSSベースでレイアウトしたもの。純正のものがテーブルレイアウトだったので、DIVレイアウトで作り直しました。わりと簡単に導入できるので、ブログのアクセサリなどにお使いください。
HTMLソース
ユーザーID『55561732%40N00』での動作サンプルです。横幅いっぱいに広がってますが、通常ブログなどの狭いカラム内に入れてしまえば、その中に収まり、また改行もされます。CSSをカスタマイズしてwidthをピクセルで絶対指定しても構いません。
6Photo、Most recent、Square(s)条件での表示。
<div id="flickr_badge_wrapper">
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=6&display=latest&size=s&layout=v&source=user&user=55561732%40N00"></script>
<h3><a href="http://www.flickr.com" id="flickr_www">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a></h3>
</div>
<!– End of Flickr Badge –>
4Photo、Most recent、Thumbnail(t)条件での表示。
<div id="flickr_badge_wrapper">
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?show_name=1&count=4&display=latest&size=t&layout=v&source=user&user=55561732%40N00"></script>
<h3><a href="http://www.flickr.com" id="flickr_www">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a></h3>
</div>
<!– End of Flickr Badge –>
3Photo、random selection、Mid-size(m)条件での表示。
<div id="flickr_badge_wrapper">
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?show_name=1&count=3&display=random&size=m&layout=v&source=user&user=55561732%40N00"></script>
<h3><a href="http://www.flickr.com" id="flickr_www">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a></h3>
</div>
<!– End of Flickr Badge –>
CSS
下記CSSコードを、お使いのCSSファイル内にコピペしてください。もしくは下記定義を単体で別CSSにしておいて、importするのもイイかもしれません。自分の場合は「flickrbadge.css」という別ファイルにしてimportしてます。
width:auto;
text-align:center;
margin:0;
padding:0;
background:#CCC;
border:#AAA solid 1px;
}
#flickr_badge_wrapper img {
margin:5px;
border:#444 solid 1px;
}
#flickr_badge_wrapper h3 {
padding:0 6px 8px;
margin:2px;
}
#flickr_badge_wrapper a:hover {
background:none;
}
#flickr_www {
display:block;
padding:0 !important;
font: 11px Arial, Helvetica, Sans serif !important;
color:#3993ff !important;
}
#flickr_badge_source {
padding:0 !important;
font: 11px Arial, Helvetica, Sans serif !important;
color:#FFFFFF !important;
}