たねやつの木

Photos and Programming

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

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

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

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

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

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

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

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

目標

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

079A0227.jpg


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

IMG_20180311_180848_719


登録

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

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

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

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

f:id:ibuquicallig:20180405232446p:plain


項目 入力する値
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桁の数字)が送信されます。

f:id:ibuquicallig:20180405232443p:plain


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

f:id:ibuquicallig:20180405232440p:plain


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

f:id:ibuquicallig:20180405232436p:plain


f:id:ibuquicallig:20180405232433p:plain


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

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

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

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

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

f:id:ibuquicallig:20180405232428p:plain


追加の設定

プロフィールの設定

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

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

f:id:ibuquicallig:20180405232425p:plain


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

f:id:ibuquicallig:20180405232421p:plain


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]をクリック。

f:id:ibuquicallig:20180405232418p:plain


コレで設定完了です。

アップロード

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

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

f:id:ibuquicallig:20180405232415p:plain


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

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

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

f:id:ibuquicallig:20180405232410p:plain


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

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

f:id:ibuquicallig:20180405232406p:plain


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

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

f:id:ibuquicallig:20180405232406p:plain


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

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




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

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

f:id:ibuquicallig:20180405232353p:plain


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

後は埋め込むだけ!

埋め込み

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

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

f:id:ibuquicallig:20180405232347p:plain


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

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

f:id:ibuquicallig:20180405233009p:plain


ヘッダーやフッターを付与して、画像の情報を足すことも出来ますが、 なにも表示しないほうが写真の周りがキレイになり、読み手に優しいでしょう。 ですので、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>

とすると、写真を中央揃えで表示できます。縦画像や真四角の画像の時、画像が左に寄ってしまうのを防ぎます。

後はコレをブログの記事作成画面に貼り付けるだけですが、、、この方法で素直に貼り付けられるのはマークダウン記法とHTML記法のみ可能です。

みたまま記法の場合は以下の連携を参照してください。

この期にMarkDown記法に挑戦してみてはいかがでしょうか!スパスパかけて楽しいですよ...

連携

記事作成画面で、右側のツールバー内にFlickrを表示させます(○○みたいなやつ)。

無い場合は、プラスボタンから追加します。

スクリーンネームの部分に自分のアカウントの名前を入力します。そして連携ボタンをクリック。

リンクできると一覧に画像が表示されます。あとは普通に写真を貼り付けるときと同じです。(´ω`)

最後に

以上で基本的な使い方と埋め込み方は終了です。

一旦慣れてしまえば、アップロード → アルバム追加 → 埋め込みをサササッとできるようになるので、 どんどん速く写真記事を量産できます(笑)

さらにLightroomとの連携も紹介したい(というかコレが便利すぎる)のですが、一旦終了(笑)。

わからない点や間違っている点などあればコメントなどで指摘していただけると助かります。