みずー工房

気ままライフを綴るブログです

【HTML】GoogleDriveの画像を記事に貼る

Googleドライブに保存されている画像を直接はてなブログの記事に貼る方法です。
はてなフォトライフの容量制限回避やフォトライフ非対応形式の画像を掲載したい場合に役に立ちます。
Googleフォト”ではなく、Googleドライブ”です。

f:id:exe_3Z1K:20210119203929p:plain



Googleドライブから画像を貼り付ける

Googleドライブにある写真を直接記事に貼り付けてみましょう。

ポイント
あくまでこの方法は緊急処置のようなものと考えておいたほうがいいです。
使いすぎるとページの読み込み時間などにも影響を与える可能性があるので、
はてなフォトライフとうまく付き合いつつ、この方法を使うことをおすすめします。


貼り付けたい画像の共有設定を変更する

目的の写真があるユーザでログインし、Googleドライブにアクセスします。
貼り付けたい画像を選択して「リンクを取得」 をクリックします。

f:id:exe_3Z1K:20210119204137p:plain


リンクの共有方法を変更します。
この部分から 「リンクを知っている全員」に変更しましょう。

f:id:exe_3Z1K:20210119204146p:plain
注意
共有する画像からは、アカウント名とそのメールアドレスが閲覧できる状態になります。
共有する画像のアカウントの選択は十分注意してください。


最後に 「リンクをコピー」をクリックします。

f:id:exe_3Z1K:20210119204202p:plain


はてなブログに貼り付けられるように変換

このリンクのままだと画像が表示できないので、URLを変換します。
以下の変換ツールを作ったので、 ここに先ほどコピーしたURLを貼り付けてください。
この変換ツールはJavaScriptのみで構成されており、サーバとの通信は一切行いません。安心して使ってください!


変換ツール
使い方
  • 変換ツール”の下にGoogleドライブのURLを貼り付けます。
  • 貼り付けた瞬間に自動変換され、右の””をクリックすると変換内容をコピーできます。


変換内容はHTMLの ”img” で出力されるので、ブログにそのまま貼り付けて使えます。
これでGoogleドライブの画像を貼り付けることができました!
以下はGoogleドライブからの画像です。



おわりに

はてなフォトライフは月ごとにストレージが決まっているので、
その月の容量が足りなくなっちゃった時には、ぜひ応急処置的に使ってみてください!


おすすめ記事