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

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

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

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

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

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

★詳細:ポートレイト/プロフィール撮影(Photo Session)
★詳細:Photo Shooting

撮影予約可能日

【関西エリア】
・当面の間は関西にいます。ご依頼お待ちしています。

【関東エリア】
・7月上旬、8月上旬に関東予定です。

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

この記事を書いた人

花村貴史|Takashi Q. Hanamura

人物や風景、街並み、小物を好んで撮っている空気感フォトグラファー。本職であるPhotographerのかたわら、Engineer、Creatorとしても活動中。
その人・その場の「空気感をそっとすくい撮る」写真が好評。「自分の素敵に気づける写真」を撮る。数年間の心のお稽古によるカウンセラーマインドによって、撮影は「心のセッション」になることも。
オシゴトについては「撮影サービス」からどうぞ。

撮影|Photo Session

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

撮影|Photo Shooting

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

写真術|Photo Lecture

カメラの使い方、撮影術、Lightroomの使い方などの「マンツーマンレクチャ」や「少人数制のワークショップ」について。写真に関する疑問の解決に。

販売:Photo Sales

A3ノビ〜A4程度のサイズの額装販売および、壁紙などの写真データの販売。ご自宅やコミニュティスペースに飾り、癒しになれば嬉しい。