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

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

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

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

この記事を書いた人

花村貴史|Takashi Hanamura

◆Photographer|木漏れ日や水、空が魅せるきらきらが好き|写真を通じて「やさしい世界」を伝えてゆく ◆Software Engineer|Private: Go/C++/WebGL|Work: SAP/SAC

写真素材note発売中

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

人物写真|Photo Session

お話しながらのポートレイト撮影です。「今」そして「これから」のあなたにフォーカスして撮影します。SNSやサイト用のプロフィール写真に。

イベント写真|Photo Shooting

「友達と楽しんでいる」「セミナーで講演している」「パーティーを主催している」など、皆さんが大切な時間を過ごしている瞬間をスナップします。