以下の内容はhttps://retiresaki.hatenablog.com/entry/2019/01/05/200100より取得しました。


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

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

retiresaki.hatenablog.com

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

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

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

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

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

 <img class="magnifiable" src="https://lh3.googleusercontent.com/xxxxx" />

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

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

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

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

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

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

 




以上の内容はhttps://retiresaki.hatenablog.com/entry/2019/01/05/200100より取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14