はてなブログでのFlickrの使い方をまとめてみた。(登録〜画像埋め込みまで)

こんにちは。たねやつです。

新生活が始まるこの季節、暖かくなってきたので絶好のお出かけ日和 & 写真日和ですね！私もどっか転勤になって新たな写真スポットに行ってみたいです(笑)

今日はFlickrの使い方と、ブログへの写真の埋め込み方やその他Tipsについて書きたいと思います。

会社の中でも写真仲間が増えてきたのでその人たちへの紹介も含めて書いていきます！

Flickrで写真を管理すると以下のような嬉しいことがあります。

写真の大きさを割と自由に変更できる。
ブログ上での写真のファイルサイズを小さくすることができる。 →ページの表示速度が速くなり読み手に優しい。
写真のバックアップにもなる。(1TBまでアップロード可能)
しかもアップロードしたファイルは無変換状態のものを再ダウンロード可能。
はてなフォトライフよりもエンコード後の画質がいい。 →特に夜景などの暗い写真のノイズ感が段違いに良い。

といった具合に利点満載です。英語ページしか無いことを除けば。。。

目標
登録
- 追加の設定
  - プロフィールの設定
  - EXIFデータの削除
アップロード
埋め込み
連携
最後に

目標

こんな感じでブログの記事の幅にあった大きさで写真を埋め込むことができるようになる。

また、画像をカラムの中央に寄せる方法についても紹介します。

登録

※PCでの作業を想定しています。多分スマホでもほとんど変わらないと思います！

まずはFlickrに登録します。以下のページにアクセス。

画面中央、もしくは画面右上の[Sign Up]ボタンをクリック。[Sign In]と[Sign Up]って非英語話者にとって結構間違えやすいですよね。

入力項目が表示されるので、値を入力していきます。

項目	入力する値
First Name	下の名前
Last Name	名字
Your current email address	メールアドレス
Password	パスワード
Birth Month	生まれた月
Day	生まれた日にち
Year	生まれた年
Gender(optional)	性別(入力しなくてもOK)

という感じです。以前はyahoo.comのドメインしか受け付けてくれませんでしたが、今ではgmail.comとかでもOKです。ありがたす(´ω｀)

入力が完了したら[Continue]ボタンをクリック。内容に問題がなければ、認証コードを送るという画面に移るので、 [Send me an Account Key]をクリック。登録したメールアドレスに認証コード(5桁の数字)が送信されます。

数分後にメールが届くので、認証コードを入力して[Continue]をクリック。ちなみに5回入力をミスすると最初からやり直しになります！

無事に認証が完了してアカウントが作成されると次のような画面になります。[Let's get started]をクリックすると、

のような入力項目が表示されます。コレはFlickr上で表示する内容です。

初期設定では、First NameとLast NameはFlickr上でお互いにフォローし合っている同士は見ることが出来てしまいます。 ですのでプライバシーを気にされる方は、当たり障りのない仮名を入力しておくことをおすすめします(´ε｀ )

Flickr screen nameはFlickr上の誰にでも見えるところに表示される名前です。ここはお好みの名前を入力しましよう！

画面下の[Next]ボタンを押すと設定完了です。コレで基本的な設定は完了しました！

左上のFlickrロゴの横のYouを押すとあなたのページに移動することが出来ます。この場所をブックマークしておくと便利です(´ε｀ )

追加の設定

プロフィールの設定

右上のベルの→側の丸い写真機みたいなアイコンをクリック > Settingsより設定画面に飛べます。

飛んだ先の右下のProfileブロックの中にYour real name is ...という部分があります。

そこのChangeをクリック。以下の画面に飛びます。

Describe Yourself...の部分に自分の説明をかけます。ある程度のHTMLタグは使用できるようです。

Your website addressに自分のページのアドレスを貼ることが出来ます。

EXIFデータの削除

写真をアップロード時、EXIFデータを削除するように設定できます。スマホでGPSをオンにした状態で写真を撮ると、位置情報が写真のメタデータに記録される場合があり、個人特定につながる恐れがあります。

一眼でとっている場合もGPSロガーとかオンになっていると同じことが発生します。 しかし、この設定をオフにすると機種名や撮影情報(SSやISO感度、F値など)も削除されてしまうので、ちょっと不便です。 今回は紹介しませんが、Adobeの写真管理・現像ソフト「Lightroom」からであれば、位置情報だけを削除するという理想的な機能がありますので、そちらがおすすめです。

話がそれましたが、設定方法です。先程のSetting画面の上の方に、Privacy & Permissionという項目があるのでクリック。

6番目ぐらいの項目にHide your EXIF dataという部分があるので、editを押してYesのチェックを外して[SAVE CHANGES]をクリック。

コレで設定完了です。

アップロード

いよいよ写真をアップロードしてみましょう！今回はLightroomとの連携は使わずに、WEBページからそのままアップロードする方法を紹介します。

右上のベルの←側のアップロードボタンをクリック。

こんな黒い画面になったら、この黒い部分にアップロードしたい画像ファイル・フォルダをドラッグして貼り付けます。

[Choose photos and videos to upload]をクリックするとエクスプローラから写真を選択することが出来ます。今知ったのですが動画もあげられるのか！！(笑)

ドラッグ&ドロップが成功すると、写真が赤枠で囲われた状態で表示されると思います。赤枠で囲われた状態とは写真が選択状態であることを意味します。

余白をクリックしてしまったりなどで赤枠状態が解除されたら、Windows感覚で左クリック&ドラッグで範囲選択することでもう一度選択状態に出来ます。

そのまま右上の[Upload XX photos]をクリックしてもいいのですが、せっかくなのでより管理しやすくするために写真をアルバム化(グループ化)してみましょう！

写真を選択した状態で画面左側の[Add to albums]をクリック。既存のアルバムに追加したい場合にはそのアルバム名をクリックすればいいのですが、 新しくアルバムを作成したい場合には、[Create a new album]をクリック。Album titleに好きな名前を付けます。Album Descriptionには説明をかけばいいのですが、無くてもOKです。

[Create]を押すと、チェックマークとともにアルバムが新しく作成されます！

その新しいアルバムをクリックして、[Done]を押すとアルバムへの追加対象になります。現段階ではまだ写真はアップロードされていませんので注意！

写真一覧に戻って、右上の[Upload XX photos]をクリックしてようやくアップロードできます！

アップロードが完了すると、自分のフォトストリーム(アップロードした写真が時系列順に表示される所)に飛ばされます。今回アップロードしたファイルが追加されていれば無事完了です！

アルバムは、Albumと書いてあるとこをクリックすると確認することが出来ます。

ちゃんと追加されていますね！

後は埋め込むだけ！

埋め込み

さあ、いよいよブログに貼り付ける時間です！ (なんか変な日本語訳みたいになった)

フォトストリームからでも、アルバムからでもいいので埋め込みたい写真を1枚選択します。

このような閲覧画面に飛ばされるので、右下の→ボタンをクリック。(左から2つめのボタン) ちなみに、↓を押すと写真をダウンロード出来ます。

ポップアップのようなものが表示されるので、Embedをクリック。

ヘッダーやフッターを付与して、画像の情報を足すことも出来ますが、 なにも表示しないほうが写真の周りがキレイになり、読み手に優しいでしょう。 ですので、Header, Footer, SlideShowのチェックボックスを外します。

そして一番大事なのが画像サイズ。自分のブログの記事エリアの幅にあった大きさのサイズを選択する必要があります。

私のブログは横幅800pxで設定してあるので、Medium 800 x 534でピッタリ合うのですがブログのテンプレートやCSSによってこの辺はまちまちです。

ぶっちゃけて言えば、Large 1600を選択しておけば、Flickr側で勝手に縮小してくれるようになっているので特に問題にはならないはずですが、その辺きっちりしたい人や、少しでもページサイズを小さくしたい！という人は大きさを調整しながら繰り返してみてください。

チェックボックスを外したり、大きさを変更すると埋め込みコードが変わるので、コードを取得します。

<a data-flickr-embed="true"  href="https://www.flickr.com/photos/153853557@N08/26281361517/in/album-72157667310336968/" title="079A0775.jpg"><img src="https://farm1.staticflickr.com/895/26281361517_afbd4a82cd_c.jpg" width="800" height="534" alt="079A0775.jpg"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>

こんな感じ。ちなみにコピーした内容を、

<div style="text-align:center;">
  ...
</div><br>

で挟み込んで、

<div style="text-align:center;">
  <a data-flickr-embed="true"  href="https://www.flickr.com/photos/153853557@N08/26281361517/in/album-72157667310336968/" title="079A0775.jpg"><img src="https://farm1.staticflickr.com/895/26281361517_afbd4a82cd_c.jpg" width="800" height="534" alt="079A0775.jpg"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>
</div><br>