flickr の写真をブログに貼り付ける際に便利なブックマークレット

Flickr の写真をブログに貼り付けたいときに便利なブックマークレットを書きました。
通常は、最新の fr(2) または img2html をご利用ください。(2010/9/26更新)

fl = そのウインドウで画像のみを表示する版
fH = HTML ソース生成版
fr = title/width/height 対応ソース生成版(5/5追記)
fr(2) = Flickr 新インターフェース対応版(7/22追記)
img2html = Flickrに限らず、Picasaなど汎用に使える版(9/26追記)

ブックマークレットを書いてみた背景


デジカメで撮影した写真をブログで使う際、まず flickr にアップロードして、
flickr が横幅500ピクセルに縮小してくれた画像ファイルを使っています。
(flickr へのアップロードは、flickr Uploadr か、iPhoto を使ってます)
しかし、ドラッグで領域選択して Note や Person など写真の注釈を入れるモードが
flickr に追加されてから、photo-drag-proxy のレイヤーが優先されてしまうみたい。
flickr にログインしているときだけ有効かな?
でも、いちいちログアウトしたり、ブラウザ変えたりしたくないし。
これらのブックマークレットで、簡単に flickr 画像をダウンロードできるようになる。


fl = そのウインドウで画像のみを表示する版


flickr の写真の詳細ページで、HTML 表示から、画像 JPEG のみの表示に切り替えて、
そこに表示されている写真のみを表示するためのブックマークレットです。

[fl]

↑のリンクをブックマークツールバーにドラッグ&ドロップしてください。
IE8 では、右クリックして「お気に入りに追加」で「お気に入りバー」に追加してください。

flickr の写真詳細ページ(例えばここ)で、このブックマークレットをクリックして使います。


fH = HTML ソース生成版


あるいは、写真をダウンロードせずに、flickr 上の画像ファイルを直接参照させる場合は、
HTML ソースを生成した方が便利かも? と思って書いてみたのがこちら。

[fH]

↑のリンクをブックマークツールバーにドラッグ&ドロップしてください。
このブックマークレットは、以下のように a タグ+img タグを書いてくれます。
flickr の写真詳細ページへのリンク付きの画像表示の HTML です。




fr = title/width/height 対応ソース生成版

(5/5追記)
title 属性で写真の名前、画像サイズに合わせて width・height 属性もつけるバージョンです。

[fr]

↑のリンクをブックマークツールバーにドラッグ&ドロップしてください。
以下のように、img 要素に title・width・height 属性が付きます。




fr(2) = Flickr 新インターフェース対応版

(7/22追記)

Flickr で新しいインターフェースが使えるようになりました。
デフォルトで表示される画像(medium)が500ピクセルから640ピクセルに大きくなっています。
また、HTML が変わって、table 組みから div+css になっています。
新インターフェースでは、従来のブックマークレットでは対応しません。
新インターフェースに対応した新バージョンのブックマークレットはこちら:

[fr]

なお、このブックマークレットは、旧インターフェースでも使えます。(新旧どちらでも動作)



*English translation of this post is here.


Flickr Hacks
Oreilly & Associates Inc
Paul Bausch

amazon.co.jpで買う
Amazonアソシエイト by ウェブリブログ商品ポータルで情報を見る


この記事へのコメント

ひとぅ
2010年09月14日 05:31
はじめまして。ひとぅと申します。
こちらの記事を参考にさせていただき、WordPressでHighslide JSを利用したFlickrへの投稿方法の記事を書きました。
ブックマークレットを改造して利用させていただいています。
配布に問題があるようでしたらご連絡をいただけると幸いです。
素晴らしい情報をいただき感謝しております。ブログの投稿が非常に楽に効率良くできるようになりました。
今後ともよろしくお願い申し上げます。

▼ひとぅブログ(該当記事)
http://hitoxu.com/01265
asazuki
2011年08月08日 15:51
こちらで提供されているブックマークレットをもとに改変・再配布されているものを当方にてさらに改変し、以下のブログ記事にて再配布致しましたので、ご連絡申しあげます。
http://asazuki508.exblog.jp/14303275/
再配布に問題等ございましたら、お手数ながらご連絡頂ければと思います。
この度はお世話になりました。ありがとうございました。

この記事へのトラックバック