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 画像をダウンロードできるようになる。
flickr の写真の詳細ページで、HTML 表示から、画像 JPEG のみの表示に切り替えて、
そこに表示されている写真のみを表示するためのブックマークレットです。
[fl]
↑のリンクをブックマークツールバーにドラッグ&ドロップしてください。
IE8 では、右クリックして「お気に入りに追加」で「お気に入りバー」に追加してください。
flickr の写真詳細ページ(例えばここ)で、このブックマークレットをクリックして使います。
あるいは、写真をダウンロードせずに、flickr 上の画像ファイルを直接参照させる場合は、
HTML ソースを生成した方が便利かも? と思って書いてみたのがこちら。
[fH]
↑のリンクをブックマークツールバーにドラッグ&ドロップしてください。
このブックマークレットは、以下のように a タグ+img タグを書いてくれます。
flickr の写真詳細ページへのリンク付きの画像表示の HTML です。

title 属性で写真の名前、画像サイズに合わせて width・height 属性もつけるバージョンです。
[fr]
↑のリンクをブックマークツールバーにドラッグ&ドロップしてください。
以下のように、img 要素に title・width・height 属性が付きます。

Flickr で新しいインターフェースが使えるようになりました。
デフォルトで表示される画像(medium)が500ピクセルから640ピクセルに大きくなっています。
また、HTML が変わって、table 組みから div+css になっています。
新インターフェースでは、従来のブックマークレットでは対応しません。
新インターフェースに対応した新バージョンのブックマークレットはこちら:
[fr]
なお、このブックマークレットは、旧インターフェースでも使えます。(新旧どちらでも動作)
*English translation of this post is here.
通常は、最新の 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.
この記事へのコメント
こちらの記事を参考にさせていただき、WordPressでHighslide JSを利用したFlickrへの投稿方法の記事を書きました。
ブックマークレットを改造して利用させていただいています。
配布に問題があるようでしたらご連絡をいただけると幸いです。
素晴らしい情報をいただき感謝しております。ブログの投稿が非常に楽に効率良くできるようになりました。
今後ともよろしくお願い申し上げます。
▼ひとぅブログ(該当記事)
http://hitoxu.com/01265
http://asazuki508.exblog.jp/14303275/
再配布に問題等ございましたら、お手数ながらご連絡頂ければと思います。
この度はお世話になりました。ありがとうございました。