So-net無料ブログ作成

Googleフォトの画像をブログに埋め込む方法 [エレクトロニクス]






以前は[Picasa]から簡単に埋め込みコード(embed code)を取得しブログに画像を貼り付けていましたが、2016年夏頃に[Picasa]が閉鎖され[Googleフォト]に置き換わりました。
この[Googleフォト]の困ったところは、画像の埋め込みコードが取得できないことです。

最近ひょんなことから下記のサイトを見つけ、埋め込みコード生成サイトの存在を知りました。

How to Embed Images from Google Photos into your Website
https://www.labnol.org/internet/embed-google-photos-in-website/29194/

この記事は[Googleフォト]にアップロードした画像を、簡単に自分のブログ(So-netブログ)に埋め込む方法について書いています。
 


 環境

・MacBook Pro Retina 15inch Mid2012, OSX El Capitan 10.11.6
・Safari 10.1





 手順

1 コンピュータのブラウザで Google Photos にアクセスして、自分のアルバムを表示
 https://photos.google.com/
 

2 ブログに埋め込みたい写真を選んで、右上の共有ボタン
 

3 「リンクを取得」ボタン
 

4 リンクをコピーしてから、ポップアップしている小ウインドウ以外のところをクリックしこれを閉じておきます(開いたままだとコード生成に失敗します)
 

5 https://ctrlq.org/google/photos/ へアクセスして、リンクをペーストして右の「GENERATE CODE」ボタン
 

* このコード生成サイトはGoogleのサービスではありません。

6 少しすると自動的にスクロールされますので、生成された Image Embed Code をコピーします
 

7 自分のブログに取得したコードをペーストます
 
 貼り付けられた上の写真はコードをそのままコピーしたもの。下の縮小写真は width=“200” height="200" で大きさを指定したもの。

200x200の例
<a href='https://photos.google.com/share/xxxx?key=xxxx&source=ctrlq.org'>
<img src='https://lh3.googleusercontent.com/xxxx' width=“200” height="200" /></a>





追記 2019年9月16日
DB103さんよりコメントがありました。
写真のリンクを開くとGoogle Photos のページに飛びますが、そこに知られたくない情報がある場合は、「リンク先(Googleフォト)と写真へのリンク(imgsrc)を同じアドレスにすると写真だけが表示される」とのことでした。

この方法の場合は下記のように編集します。(先頭の全角<は、実際使うときは英数字に直してください)
編集前;
<a href='https://photos.google.com/share/xxxxxx?key=XXXXXX&source=ctrlq.org'>
<img src='https://lh3.googleusercontent.com/xxxxxx' />

編集後;
<a href='https://lh3.googleusercontent.com/xxxxxx'>
<img src='https://lh3.googleusercontent.com/xxxxxx' />



nice!(16)  コメント(8)  トラックバック(0) 
共通テーマ:パソコン・インターネット

nice! 16

コメント 8

pukeko

この方法でライブドアブログに写真を埋め込むことができました。
ありがとうございました!
by pukeko (2017-12-29 10:59) 

ふじくろ

>>pukekoさん
お役に立てて良かったです。
by ふじくろ (2017-12-29 13:59) 

あまやどり

ひとり旅のドライブマップを作成していて、
画像を埋め込めずに苦労しました。

ご紹介されていた方法で、解決しました。

ありがとうございました。
by あまやどり (2018-01-28 19:17) 

ふじくろ

>>あまやどりさん
お役に立てて良かったです。
by ふじくろ (2018-01-29 13:20) 

ゆみっぺ

so-netブログアプリが使えなくなり、写真のUPが大変でブログ更新が疎遠になってました!
こちらの方法を使えば簡単に写真埋め込みできそうでうれしいです!
参考にさせて頂きます!!
by ゆみっぺ (2018-09-03 08:20) 

ふじくろ

>>ゆみっぺ さん
私も画像のupに悩んで他のフォトストレージサービスやブログサービスに引越ししようかと考えていました。コメントありがとうございました。
by ふじくろ (2018-09-03 10:41) 

DB103

情報本当にありがとうございました。
サーバーが大分少なくなってきたので大いに助かりました。
なお、教えていただいた方法ですと、リンクでGoogleフォトの画面が表示されてしまいます。
そこには教えたくない情報もある可能性がありますので、リンク先を写真と同じアドレスにしておけば写真だけが拡大表示されますね。
以上、ご参考までに。
by DB103 (2019-09-16 11:52) 

ふじくろ

>>DB103さん
コメントとアドバイスありがとうございました。本文にも追記しました。
by ふじくろ (2019-09-16 15:11) 

コメントを書く

お名前:[必須]
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

トラックバック 0