Flickrの画像をブログに表示させる方法 〜画像リンクの貼り方【2016年3月版】

Flickrの仕様が変わって、以前書いたこちらの方法からちょっと変わりました。

というわけで、新しい画像リンクの貼り方をまとめます。

リンクの貼り方

(1)画像にアクセス

まずはブログに表示したい画像にアクセスしましょう。

丸で囲っている矢印をクリックします。

ss_2016-03-04a

すると、こういう画面が表示されます。ここからが2015年1月より変わったところ。

とはいえ、やることは簡単。

(2)Embedをクリックしてサイズを選ぶ

「Embed」をクリックした画面で表示したいサイズを選びます。

ss_2016-03-04b

僕は長辺を640pxにしています。

URLは選択状態になっていますので(ブラウザによってはなっていません)、表紙サイズを選んだら「Command+C(Mac)」、「ctrl+C(Windows)」しましょう。

(3)ブログに貼り付ける

WordPressの場合、ビジュアルエディタを使っているなら「HTMLを挿入」ボタンからコピーしたURLを貼り付けてOKボタンをクリック。テキストエディタを使っていならURLをそのまま貼り付けます。

必要に応じて表示位置の調整をしても良いでしょう。僕はセンタリングしています。

なお、「HTMLを挿入」ボタンは使用しているテーマによってないかもしれませんので、相応のボタンを探してみてください。

 

ブログに貼り付けるとこうなります。簡単!

ss_2016-03-04c

マウスオーバーするとFlickr特有の情報が表示される

普通にURLをコピペすると、マウスオーバーすると今までにない情報が表示されます。

ss_2016-03-04d

なぜかというと、コピーしたときクリップボードにはこんな文字列が保存されているのです。

<a href=”https://www.flickr.com/photos/nnammg/24777704973/in/dateposted-public/” title=”R0000501″><img src=”https://farm2.staticflickr.com/1714/24777704973_49b56daca6_z.jpg” width=”640″ height=”424″ alt=”R0000501″></a><script async src=”//embedr.flickr.com/assets/client-code.js” charset=”utf-8″></script>

「data-flickr-embed」や「script」が増えてるんですよね。それがFlickrの付加情報を表示している原因です。

この表示は好き好きでしょうね。

(今のことろ)僕は表示させたくありませんので、ブログを書いてるエディタ「Byword」や「Tree 2」の「置換機能」を使ってます。

 

(検索文字列)「data-flickr-embed=”true” 」
(置換文字列)「空白」

(検索文字列)「><script async src=”//embedr.flickr.com/assets/client-code.js” charset=”utf-8″></script>」
(置換文字列)「 class=”aligncenter”></a>」

 

置き換えはApple Scriptを使えばもっとサクッとできるのかな〜って気がしますが、そこは未だに手を出せない領域です(笑)

ちなみに、「class=”aligncenter”」は、僕が使っているDigiPress社のブログテーマ専用のCSSです。画像がセンタリングされます。

※2018年現在

いちいち置き換えするのが手間なので、置換はせずURLをそのまま貼り付けるようにしました。また、テーマを「Snow Monkey」に変更しているので「class=”aligncenter”」ではなく、WordPress標準機能を使ってセンタリングしています。

EmbedHeader、Footer、Slideshowについて

ところで、Embedをクリックしたとき気になるものがありませんでしたか?

ss_2016-03-04e

そう、Header、Footer、Slideshowの部分。なんかポチってできそうですよね。

というわけで、全部ONにするとこうなります。

ss_2016-03-04f

画像だけでなく、ヘッダーとフッダーが表示されるようになります。

スライドショーはというと・・・、

ss_2016-03-04g

マウスオーバーすると出る「<」と「>」です。画像を切り替えられます。

おわりに

DSCF5163

リンクを貼る方法は簡単です。

僕としては仕様変更されたことで手間が増えましたね。でも、それほど問題はないので「ま、いっか」としています。

置換機能だけでもサクッとできますから。

nnamm.work

こちらでも記事を書いています。Hugo製のエンジニア視点のブログです。

写真素材note発売中

継続課金マガジンで販売しています。ブログに載せるもOK、壁紙に設定するもOK、使い方は自由です。フリー素材も良いけれど、人と被りたくないという方に人気です。

この記事を書いた人

花村貴史|Takashi Hanamura

Software Engineer & Photographer/Golang、Python、C++を嗜み中。オシゴトはSAP。ポートレイトでは撮られることに慣れていない方を撮らせていただいてます。その人・その場の「空気感をそっとすくい撮る」写真が好評です。横浜育ち38年 → 信州移住2年半 → 2018年春から関西在住。2019年秋から夫婦生活スタート。

【お知らせ】出張撮影のご依頼、承ってます

あなたの行きたい場所に出張してポートレイトやプロフィール写真を撮影します。出張エリアは関西エリア(神戸・大阪・京都など)、関東エリア(神奈川、東京など)です。

★詳細:ポートレイト撮影(Photo Session)
★詳細:イベント撮影(Photo Shooting)

撮影予約可能日

【関西エリア】
・関西&土日祝日の撮影をお受けできます。ご依頼お待ちしています。

【関東エリア】
・未定

まずはお気軽にご相談ください