はてなブログでGoogleフォトの画像を扱う(URLの取得)

　この記事はあまりHTMLなどに詳しくない人向けで、どちらかというとHow-Toに近い記事ですので、ご了承ください。

で書いたように、今年からGoogleフォトで画像を保存・管理しています。

はてなのGoogleフォトツールを使うと共有設定などをせずに済み、非常に楽です。

そこで、CSSやJava-script内でその画像を使いたい時は、

"HTML編集"タグのHTMLコードの画像のURL(src の中身)を使えば良いのです。

Googleフォトツールから貼った画像のHTMLをコード見るとこんな感じです。

　※ xxxxxは画像によって変わります。

数十文字とクソながいURLですね (^^ゞ

そこで気になったのが、
　class="magnifiable"
このクラスです。
最初はGoogleフォトに関するクラスなのかと思いましたが、
クリック時の拡大表示用のクラスでした ww

なので、srcの中身
　"https://lh3.googleusercontent.com/xxxxx"
の部分が画像のURLで、ツールを使った後は単独利用が可能です。
imgタグでこのURLを記述してレビューを見ると分りますよ！

いろいろなことができると思いますよ (^o^)v

この記事は、上記の方法で画像を表示していますよ。
2つ目の画像は、さらに画像の自動調整を無効にしていますので、元画像をスクロールで確認できるようにしています。
表示画像サイズの話はまた今度 (๑´ڡ`๑)

retireSakiの日記