グーグルプラスに投稿した画像をWebページに表示させる

Google＋の画像の埋め込みコードを使ってブログ等に表示

こんにちワ。

自分は以前は、このアメブロに画像を表示させるのにGoogleフォトに投稿した画像を使ったりしてました。
ところが、iPhone　Safariだと画像が表示されないのが解ってからは、専らグーグルプラスにアップした画像を使ってます。
いわゆる直リンクってやつであります。

この記事冒頭の画像は、このアメブロの画像フォルダーにアップしたものを使ってますが、タグ編集エディタの場合、画像を文章の途中に入れようとしても、それが出来ず、いちばん下に張り付いてしまうんであります。

ま、その他にも理由はあるんですが、クドいようですが、専らグーグルプラスを使って画像を表示させてます^^;

グーグルプラスの画像の埋め込みコードの取得の仕方が以前と変わってましたので、今現在の方法を紹介がてらメモしておきたいと思います。

グーグルプラスの画像の埋め込みコードを取得

【手順】
1.画像一枚だけのページ
2.右クリック

1.画像一枚だけのページ

まず最初に、お目当ての画像をクリックして、その画像だけが表示されるページへ移動します。（↓）

↓

2.右クリック

a.画像上で右クリックして、現れたメニューの「検証（I）」（Ctrl+Shift+I）をクリックします（↓）。


b.つぎに以下のように切り換わった画面の背景色（※この場合は青）の付いた箇所にカーソルを乗せて（※サムネイル写真が表示される）、右クリック。現れたメニューの「Copy」から辿って「Copy element」をクリックします。


■すると以下のようなコードがPCのクリップボードにコピーされます。

<img class="HAa Eha" src="//lh6.googleusercontent.com/-3aBeE6sxQGw/VvQ5nUnHW_I/AAAAAAAA7vI/X4XdVzaXfMAtaJMtNYaC7eXnIkXkaAEMg/w885-h553-no/kappadokia%2B%25E3%2582%25AB%25E3%2583%2583%25E3%2583%2591%25E3%2583%2589%25E3%2582%25AD%25E3%2582%25A2.jpg">

で本来の画像サイズが小さい場合は、このコードをそのまま編集面をHTMLモードにして貼り付ければ表示されるんですが、画像サイズが大きい場合、アメブロでは以下のように右側が切れてしまいます。

（※FC2ブログやワードプレスなんかだとサイドバーの背景のようになってしまいます^^;）

サイズ調整

サイズが大きい場合、Webページ（ブログ等）の記事幅に合わせて大きさを調整します。
まず、赤色の-h553は削除します。そしてピンク字のコードの数字（横幅）を任意の数字（例えば記事幅）に縮小します（↓）。

<img class="HAa Eha" src="//lh6.googleusercontent.com/-3aBeE6sxQGw/VvQ5nUnHW_I/AAAAAAAA7vI/X4XdVzaXfMAtaJMtNYaC7eXnIkXkaAEMg/w885-h553-no/kappadokia%2B%25E3%2582%25AB%25E3%2583%2583%25E3%2583%2591%25E3%2583%2589%25E3%2582%25AD%25E3%2582%25A2.jpg">

このブログの記事幅は、およそ595ピクセルですので、コードを以下のように変更すると、端が切れずに表示させることが出来ます。

<img class="HAa Eha" src="//lh6.googleusercontent.com/-3aBeE6sxQGw/VvQ5nUnHW_I/AAAAAAAA7vI/X4XdVzaXfMAtaJMtNYaC7eXnIkXkaAEMg/w595-no/kappadokia%2B%25E3%2582%25AB%25E3%2583%2583%25E3%2583%2591%25E3%2583%2589%25E3%2582%25AD%25E3%2582%25A2.jpg">

↓

Google+ のログインとログアウト - Google+ ヘルプ

Google+ のログインとログアウト - Google+ ヘルプ

◯思うこと
同じSNSでもTwitterやフェースブックには、こんな画像フォルダー代わりに出来る機能は無いんじゃないかと思います。
ま、ちょっと邪道的な使い方かもしれませんが^^;

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