Posts Tagged “badge”

プロフィールを iddy というサービスに書いていたのだけれど、同じようなページを自分のブログに置いておきたいと思い立ち、移行した際のメモ。

移行した先のプロフィールページはこちら
http://lllnorikolll.com

iddyにあったflickrのサムネイル表示と同等のものを用意したい!

そこで、flickr のブログパーツを探していたところ、flickr本家サイトにあった。

Flickr: Make a badge
http://www.flickr.com/badge.gne

Step 1: What sort of badge would you like to use?

HTML版とFLASH版が選べるようになっている。今回はHTML版を選んだ。

(iPhone, iPad では FLASHが見れないというウワサを聞いていたので、未試験だけれどもFLASHは避けた。)

flickr make badge step1

Step 2: Choose content

自分がアップロードした画像を表示させたいので Yours を選択。

今回はすべての写真を対象としたいので All of your public photos and video を選択した。

flickr make badge step2

Step 3: Layout

プロフィールページに表示させるので、flickrの自分のアイコンやスクリーンネームは非表示にした。

個数は 1, 3, 5, 10 から選択が可能。表示幅に合わせて選択。

最新orランダムは、はじめ最新に設定したら雪景色の写真で非常に寒々しかったので、ランダムに設定してみた。

(ランダムにしても高確率で航空関連の写真が出る…。)

写真サイズは、Square, Thumbnail, Mid-size から選択が可能。表示幅に合わせて選択。

Vertical(縦に並べる), Horizontal(横にならべる), None(自分で設定可能とする)から選択。

Vertical, Horizontal は、全体がtableタグで個々の写真はtdタグの中にimgタグが入る。

None は、全体も個々の写真もdivタグでかこまれる。

CSSでスタイルを指定することに慣れている人は、Noneのほうが使い勝手が良さそうだ。

flickr make badge step3

Step 4: Colors

背景色や枠線の色の設定が可能。

flickr make badge step4

Your badge!

表示されたコードをブログに貼り付ければ、完成。

↓は完成したもののサンプル。



www.flickr.com

ちなみに、iPhoneでの見た目はこちら↓

lllnorikolll.com iPhone キャプチャ

Comments Flickr badge : 本家ブログパーツ はコメントを受け付けていません。