フリッカーに投稿されてる画像をウェブサイトに表示させるには | ちょっとした「Webお役立ち情報」とかを主に書いてます。
AmebaAmeba 20th Anniv.ホームピグアメブロ
芸能人ブログ人気ブログ
新規登録
ログイン

ちょっとした「Webお役立ち情報」とかを主に書いてます。

ネットで調べて、「わかったこと」を備忘録の代わりのメモ帳のようにして使ってます。

フリッカーに投稿されてる画像をウェブサイトに表示させるには

せせらぎ

flickrにアップされた写真をブログ等に表示させる方法


今回、これで、フリッカーについて書くのは３回目になります。



アメブロ等のウェブサイトに、フリッカーに投稿した画像を表示させる方法を御案内してみたいと思います。

二通りあります。
画像ＵＲＬから、その画像を一旦、パソコンに保存して、それをサイトのファイル（画像）フォルダーにアップして表示させる方法と、フリッカーで提供される埋め込みコードを使う方法です。

２～３ヶ月前の仕様変更で、フリッカーに投稿した画像を右クリックで、画像ＵＲＬが取得できなくなって、前者の方法では、少し手間が掛ります。

なので、今回は、簡単な埋め込みコードを使って表示させる方法を御案内してみます。

※これは、自身が投稿したものでも、他の方が投稿したものでも、「公開設定」にしてある画像であれば「埋め込みコード」が取得出来ます。

前置きが、なが～～くなりました^^;


1.フリッカーのページで、御自身のサイトに表示させたい画像をクリック。


01/05


2.切り替わった画面右下の矢印をクリック


01/05


3.HTML埋め込みコードをコピーする。

※切り換わった画面右下のＨＴＭＬにマークが付いている事を確認して（＊初期の状態だと、付いていると思います。付いてなければ、マークを付けて下さい）、表示されたコードをコピーして下さい。

01/05


4.コードをサイト（：アメブロ）に貼って、サイズ調整。


上でコピーしたコードは、このようになってます（↓）。

<a href="https://www.flickr.com/photos/123482122@N06/15180352424" title="指原莉乃9 by hiroshi watanabe, on Flickr"><img src="https://farm8.staticflickr.com/7517/15180352424_db49528712_o.jpg" width="1198" height="1590" alt="指原莉乃9"></a>


上の画像の場合、わりとサイズが大きいものなので、サイトの記事幅に合わせて、表示サイズを縮小します。
このブログは記事幅が、６００ピクセルですので、上のコードのwidth="1198"の数字を６００（：半角数字）にして、 height="1590"は、削除します。
（※ height="1590"を削除しないと、縦横比がくるって、ゆがんだ写真になってしまいます。）

サイズを調整して表示してみました（↓）。

<a href="https://www.flickr.com/photos/123482122@N06/15180352424" title="指原莉乃9 by hiroshi watanabe, on Flickr"><img src="https://farm8.staticflickr.com/7517/15180352424_db49528712_o.jpg" width="600" alt="指原莉乃9"></a>

↓

指原莉乃9
※この画像は（↑）、リンクになっていて、クリックするとフリッカーに移動します。

○要約
フリッカーのページで、御自身のサイトに表示させたい画像をクリック→切り替わった画面右下の矢印をクリック→HTML埋め込みコードをコピー→コードをサイト（：アメブロ）に貼って、サイズ調整



○思うこと
自分は、このアメブロに愛着があり、また、サイバーエージェント社長の藤田晋さんのブログの更新は欠かさず見るようにしているアメブロファンであります^^;
ただ、ちょっと残念に思うのは、アメブロの画像フォルダーにアップした画像は、その画像ＵＲＬを使って、他のサイトに表示させると消えてしまう事であります。
画像パクリ仲間の為にも、アメブロの画像フォルダーは使わないようにしようと思ってます^^。

そんな意味でも、このフリッカーは便利かな～～と^^;


☆ブィブィ  ('-^*)/


もおぉぉ～～、後で遊んであげるって言ってるのにぃぃ～～