bloggerの見出しに背景画像を付ける

見出しのhタグにbackground-image で画像のURLを指定してやれば何となく簡単に出来そうです。この背景に使う画像のある場所が自分のレンタルサーバーなどなら話は簡単。でもこれがgoogleフォトにある画像を使おうとすると、はてどうすればいいのか？

その画像をが表示されたhtmlへのリンクなら簡単に取得できますが、はて、一枚の画像そのもののURLを取得するにはどうすれば良いのか？

googleフォトにある画像へのリンクを取得する

YOUTUBEの動画などはブログやホームページにその動画を埋め込む為のコードが取得できます。しかし、googleフォトにある一枚の画像へのリンクは？？？？？

方法としたら、例えばh3タグの背景に画像を入れようとした場合、以下のようにすれば良いわけですが、問題はこのxxxxxxの画像のurlをどうして取得すればいいのか？と言う事になります。

<h3 style="background-image:url(https://xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.jpg); color: white; margin-top: 0px; padding: 0.5em; text-align: left;">h3タグの背景に画像を入れる</h3>

少し見にくいですが、ご勘弁を！
このxxxxxに入るリンクを取得出来さえすれば、あとは訳もなく出来ます。

レンタルWebサーバーなどに画像データをアップしておいて、この画像ファイルへリンクするのなら簡単にできます。厄介なのはgoogleフォトにある一枚の画像だからなのです。

そこでチョット考えてみたら、自分のgoogleフォトにある画像をブログに貼り付ければ、そこにその画像のURLが書き出されている筈です。このURLをコピーして貼り付けてやればいいのでは？
試しに画像を貼り付けてやってみました。

htmlに切り替えてで表示してみると、画像表示の部分は以下のようなコードになっています。少し違う部分もあるかもしれませんが、肝心なのは赤字で示した https://から.jpg までの部分です。

<div class="separator" style="clear: both; text-align: left;"><a
href="https://xxxxxxxxxxxxxxxxxxxxxxx.jpg"imageanchor="1" style="margin-left: 1em;
margin-right: 1em;"><img border="0" data-original-height="512"
data-original-width="1200" src="https://xxxxxxxxxxxxxxxxxxxxxxxxx.jpg"
width="320" /></a></div>

随分と長ったらしいコードになっていますが、xxxxxxの部分は文字を伏せた部分なので、実際にはもっと長い文字列が入っています。

この「https://からxxxxx.jpg」までがgoogleフォトに保存されている、このトマトの画像のURLと言う事になりますから、この部分を選択してコピーしておきます。

見た目のバランス調節をして完成！

画像のURLが分かれば 前述のh3タグのstyle=の中にこのURLを貼り付け てやればメデタク見出しの背景にこの画像が配置されることになります。
やってみたらこれが大正解でした。

後は、画像と文字が旨くバランスのとれるように、文字サイズやこの文字の上下に余白を入れて画像が見やすくなるくらいに縦幅を広げてやれば出来上がり。

h3の上下のpaddingを0.5em に広げてやって見え方を調節したものが、最終的な下の見出しになりました。

全て完了したら、URLを取得するために、仮配置した画像は削除して全て完了です。

もっと簡単な方法もあるのかもしれませんが、今の自分にレベルで出来るのはこれくらいまでかな。

完成！
 

h3タグの背景に画像を入れる。縦幅を欲しいので、2行になるくらいに見出しの文を調節した方がいいです。 

この後でもっと簡単な方法でgoogleフォトの画像のURLを取得する方法を知りました。

それはGoogleフォトで使う画像を表示しておいて、右クリックで現れるメニューから「画像アドレスをコピー」をクリックすればアドレスがクリップボードにコピーされるという方法でした。

手順もこの方が手短に済みそうです。

試しにやってみたところ確かに同じような結果になりました。でも書き出されたURLは自分がやった方法とはかなり違っていましたが、URLは少し短くなっています。

ただ、気になる情報もあり、それによれば、この方法ではリンクは永続的なものではなく数日で切れてしまうといった話でした。この書き込みは2017年の日付でしたので、少し古い情報ではありますが、気になります。

そう言えば、以前はGoogleフォトの写真のURLはもっと簡単に知ることが出来るようになっていたと記憶しています。これで取得したURLで何かの地図へ画像を貼り付けたら、その後、その殆どは写真は表示されなくなっていた事がありました。
もしかしたら、このリンク切れを起こしていたのかもしれません。

実際、2つのURL取得方法で得られるアドレスは、片や最後は画像ファイル名になっていて、いかにも画像のアドレスを表しているようですが、新しい方法で取得したURLはアドレスというようなものでは無さそうでした。

リンク切れ試験

試しに両方表示させておけばそのうちにその結果も分かるのかもしれません。
新しく知った方法で同じ画像を貼り付けておいて見ます。永続的に画像のリンクが生きているのかどうかの試験です。