Kawanet Blog II

アクセスカウンタ

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

<<   作成日時 : 2010/05/04 14:48   >>

なるほど(納得、参考になった、ヘー) ブログ気持玉 1 / トラックバック 0 / コメント 2

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 ウェブリブログ商品ポータルで情報を見る


テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ
気持玉数 : 1
なるほど(納得、参考になった、ヘー)

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(2件)

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

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

コメントする help

ニックネーム
本 文
flickr の写真をブログに貼り付ける際に便利なブックマークレット Kawanet Blog II/BIGLOBEウェブリブログ
文字サイズ:       閉じる