Googleの新サービス「Google フォト/Google Photos」の写真をはてなブログに貼り付ける・埋め込む方法がないか調べてみました。
Googleフォトについては前回の記事をご覧ください。
今回、はてなブログに一応貼り付けることができました。
分かってしまえば非常に簡単です。
以下、パソコンのウェブブラウザを使って、はてなブログにGoogleフォトに保存された写真を貼り付ける方法です。
後述のようにHTMLタグで挿入もできるので、はてなに限らず利用できるかと思います。
更新：9月4日ごろから今回の方法で取得できる写真のURLの記述が変更されたようです。詳しくは本記事の一番下をご覧ください。
写真のURLをコピー
写真を選んだら、右クリックで「画像URLをコピー」を選択しURLをコピーします。
このようなURLがコピーできるはずです。
https://lh3.googleusercontent.com/e8jYWZQxTP047qutzD05QaTYTh_n-CdmlMR_Aw8J_rp8=w720-h600-no
はてなブログに貼り付け
はてなブログの「記事を書く」で編集画面を開き、そこに先ほどコピーしたURLをペーストします。
ここでは編集モードを「はてな記法」にしています。
すると、上の写真のように、はてなブログの「リンクを挿入」機能でコピーしたURLを画像として貼り付けることができます。
なお、Googleフォトにある共有機能を使い、その写真のリンクを取得することも可能ですが、そのリンクをはてなブログに貼り付けてもリンクとしてしか認識されませんでした。
Shared album - Google user - Google Photos
はてな記法以外、通常のHTMLタグでも表示可能です。
<a href="https://lh3.googleusercontent.com/e8jYWZQxTP047qutzD05QaTYTh_n-CdmlMR_Aw8J_rp8=w720-h600-no"><img src="https://cdn-ak2.f.st-hatena.com/images/fotolife/k/kobonemi/20010228/20010228131430.jpg" /></a>
これならそこそこ便利に使えそうです。
スポンサーリンク
写真サイズを指定する
デフォルトでは画像サイズはブログの幅に応じて（画像のサイズを上限に）可変します。
HTMLはもちろん、「はてな記法」を使って画像の幅や高さを指定することも可能です。
下の写真は、幅を200ピクセル「W200」に指定してみました。
その他、高さ「h」や位置「left」「right」なども指定できます。
複数指定する場合は「,」で区切ります。
下の写真は、幅300ピクセルで右寄せしています。
https://lh3.googleusercontent.com/tTP-0H2SDz2yH0uct1r26PSBfvbfm-ymiBEU1xOs717N=w940-h600-no:image=https://lh3.googleusercontent.com/tTP-0H2SDz2yH0uct1r26PSBfvbfm-ymiBEU1xOs717N=w940-h600-no:W300,right
ここまで使えるなら実用的でしょうか。
拡張子がなくても問題ない？
今回やってみて分かったことは、「.jpg」や「.png」というような拡張子がなくとも画像ファイルとして利用できるということです。
私はオールドタイプなので、拡張子のないファイルに抵抗がありましたが、今のところ問題なさそうです。
このブログでは、これまでGoogleのPicasaを使って写真を貼り付けていました。
Googleフォト登場後も引き続きPicasaも利用できます。
Picasaで写真をアップロードしてもGoogleフォトで管理でき、その逆も可能です。
個人的にはPicasaで慣れているので、アップロードと管理はPicasa、画像貼り付けは今回の方法でGoogleフォトのURLでやってみようかなと思います。
更新2015年9月7日：9月4日ごろから上記方法でコピーできる画像URLの変更が行われたようです。ものすごくURLが長くなっています。自分のブログで確認したところ、全て試したわけではありませんが一部で表示できない写真が出てきています。
たとえば、本ページで事例として挙げた写真の場合、
9月4日まではこんな短いURLでしたが、
https://lh3.googleusercontent.com/e8jYWZQxTP047qutzD05QaTYTh_n-CdmlMR_Aw8J_rp8=w720-h600-no
9月7日現在、こんなに長くなっています。
https://lh3.googleusercontent.com/jOcuBuwEl4X1K181bhoaeVLUrNmYVcLRyKaa1FfXtWqCDrUQOBByuKTesTOOvVcIYoV-coEQGEYInLXcXeMWB2MBMw7mhwA_syAbAa0MxOTbhzvqQ6j91rml3HQmrtZLfAopUnmpKxMIub0KF7tsXDfoTbTmtxz169Zb-VDC3mQ_wmGkmj6T8GhC0YtUnAsHCqegiiWVb5fmibFoO8bteMecklwRfR_z3rfled8AXdCYnjJMUHzhKslBrUV4tYxR8sbnLsNw87vP0q5BWcMsvk3mHnGGRwv6CT41VG6XflVaQ0_cioRUxrroQfnF3PwNI-JtTJ1hCEDn9zFqlqS7yRbCDKdJf8SK7rB46GaAkc8cN6NQWYLLyDndFeF0GAHch9wb3tw_xHgJCZpTY48ow1N41QcWhMZDFN1wJjcJXwx-hMmaDT_J8I1okbyGH4LP_WqzyhEygHBLw2Kp8CejqPktobxpqs1SuZv5fjCF0cG_LJpJe3ckiJME_a6YdmNnJyZeaiCdZUDPGt9kSt0XyHuY=w720-h600-no
上のURLをブログに貼り付けたところ。
同じように見えるかと思います。
ただし、一部の写真で表示されないものがありました。
したがって、この方法は万全ではないと思います。他の方法がないか調べてみますが、それまでは従来通りPicasaでやるしかなさそうです。
追記：はてなブログはGoogleフォト貼り付けに対応したようです。はてなユーザーはこの方法が一番だと思います。
試したところ、次のように貼り付けできました。
画像のURLは下のように拡張子が付きました。
https://lh3.googleusercontent.com/-qT7fU-wxsRY/VWfS3vgJxEI/AAAAAAAAil8/xtO4zf27Omw/s1024/Google-Photos_04.jpg
このURLだけをはてなブログに直接貼り付けると以下のようになりました。ここでは上記で試したように画像サイズを指定しています。
二度手間となりますが、後者の方ははてな記法でサイズや位置を指摘できるので便利かと思います。
