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

5月/6月のフォトセッション受付中!

松本と横浜を中心とした地域で撮影します。あなたのお気に入りの場所で、あなたが自然に振舞っているような雰囲気で、あなたのステキを撮らせてくださいな。

 

DSCF5162

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

[ss class=”alignleft” rel=”nofollow” width=”170″ url=”http://nnamm.com/?p=107″ title=”ブログにFlickrの画像リンクを貼る方法と著作権について書いてみる【2015年1月版】 | 信州 Snap::Life”]

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

 
スポンサーリンク

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

リンクの貼り方

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

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

ss_2016-03-04a

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

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

「Embed」をクリックして、表示したいサイズを選ぶ。それだけでOKです。

ss_2016-03-04b

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

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

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

ss_2016-03-04c

マウスオーバーすると

ただし、普通にURLをコピペすると、PCブラウザの場合、マウスオーバーすると今までにない情報が表示されます。

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です。画像がセンタリングされます。

Header、Footer、Slideshowについて

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

ss_2016-03-04e

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

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

ss_2016-03-04f

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

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

ss_2016-03-04g

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

おわりに

リンクを貼る方法は簡単です。ただ、僕としては仕様変更されたことで、手間が増えましたね。

でも、それほど問題はないので「ま、いっか」としています。置換機能だけでもサクッとできますから。

DSCF5163

ブログを書くときに愛用しているテキストエディタです

Tree 2

1,400円
(2015.11.17時点)
posted with ポチレバ
Byword

1,400円
(2015.11.17時点)
posted with ポチレバ
Byword

720円
(2015.11.17時点)
posted with ポチレバ

【空気感フォトグラファーからのお知らせ】

(1)5月/6月の撮影依頼受付中!

松本と横浜を中心とした地域でプロフィール/ポートレイト撮影します。

あなたのお気に入りの場所で、あなたが自然に振舞っているような雰囲気を僕が引き出します。あなたのステキを撮らせてください。

(2)あなたのステキをそっとすくい撮ります!

WebやSNSに顔写真を公開するのがなんだか恥ずかしい。けれどエイっと勇気を出して公開したい!今の自分を見せたい!あるいは実は撮られたかったんです。という方々、そのサポートを僕にやらせてくださいな。

僕なら、あなたが気がつかないときに、あなたのステキをそっとすくい撮ります。だから大丈夫。

詳しくはこちらからどうぞ!

Profile

花村貴史 / Takashi Q. Hanamura
花村貴史 / Takashi Q. Hanamura<空気感フォトグラファー>
「”自分の好き”を大切にしよう」と思いきって大好きな信州に移住したフォトグラファー。その人/その場の空気感をそっとすくい撮る写真が好評。

2017年はプログラミングやCGにも手を出し、「写真」「エンジニア」「芸術」「心理」、それぞれの分野を楽しんでいきます。

詳しいプロフィールはこちらへGo!!