WordPressでFlickrの写真をブログに簡単に貼り付けるブックマークレット（要Highslide 4 WordPress）

ブロガーに人気のFlickr。何故かFlickrに写真をアップするとキレイなんですよね〜。リサイズのエンジンが優秀？画像サイズが大きくて圧縮率を下げているから？技術的なところはよく分かりません(^_^;)。このブログではMacやiPhoneなどの画面キャプチャが多いですが、私もFlickrを愛用しています。

Flickrの写真をブログに貼り付ける場合、注意点が必要です。Flickrのヘルプページに以下の通り記載があります。

The direct link to a photo file is no longer shown on the page. Per the Flickr Community Guidelines “pages on other websites that display content hosted on flickr.com must provide a link from each photo or video back to its page on Flickr.” Linking directly to the photo file doesn’t do this.
Flickr: Help: Photos

Flickrの写真ページへリンクを貼る必要があり、画像ファイルへ直接リンクは認められていません。Flickrで提供している「Shere this」の「Grab the HTML/BBCode」を利用すればまったく問題ないですが、WordPressで人気の某プラグインでは、画像ファイルへ直リンクしているものも多数あるのも事実。注意が必要ですね。

しかし、ここで悩むのがこのHTMLソースを使うと、画像をクリックすると画像ページが開く点。私はHighslide JSを以前から愛用していて、画像をクリックするとムニュ〜と大きな画像が表示されるのが好きなんです。そこで、ちゃんとFlickrへの写真ページへリンクを入れることができるブックマークレットを作ってみました。

記事のタイトルでは「WordPressで」と書いていますが、WordPressのプラグイン「Highslide 4 WordPress」を使った内容なのでそう書きましたが、Highslide JSに詳しい方はご自身でHighslide JS側の設定をしていただければ以下のブックマークレットをご利用いただけると思います。Flickrへのリンクはキャプションを利用しています。

まずはご案内。以下に掲載しているブックマークレットは、「flickr の写真をブログに貼り付ける際に便利なブックマークレット Kawanet Tech Blog/ウェブリブログ」の記事を参考にブックマークレットを改造させていただきました。川崎有亮さんに感謝です。問題がありましたらご連絡をいただけましたら対応させていただきます。

さて、お待たせしました。本題。

WordPressプラグインインストール

WordPressユーザーの方は「Highslide 4 WordPress」をインストールします。設定画面でLicenseの項目をお読みいただき「I Agree to the License Agreement」にチェック、SAVE。これで前準備完了。

ブックマークレット準備

PC版はMac・PCのブラウザにドラッグ＆ドロップします。iPhone・iPad版はリンクをブックマークしてから中身を編集。アドレスの「javascript:〜」よりも前（https://hitoxu.com/?まで）を削除して下さい。

• Fr(H)（PC版）
• Fr(H)（iPhone・iPad版）

使い方

Flickrの写真のページを表示して、先ほどのブックマークレットをクリックするだけ。写真の上部にHTMLソースが表示されるのでコピーしてブログなどに貼り付ければ完了。簡単っす。

こんな感じで貼り付けられたソースにはFlickrの写真ページへのリンクが貼り付いています！

関連リンク

• flickr の写真をブログに貼り付ける際に便利なブックマークレット Kawanet Tech Blog/ウェブリブログ
  ブックマークレットを改造させていただきました。感謝です。
• 10進、16進文字コードin HTMLユニコード
  ブックマークレットをそのままブログ記事に掲載できないので16進数に変換するときに利用させていただきました。