Googleドライブにアップロードした画像をCodePenで使用する方法

スポンサーリンク
css

codepen無料会員の状態でどうにか画像を使用する方法ないかと思い、探してみた方法を備忘用に記載します!

方法

  1. 対象の画像をGoogleドライブにアップロード
  2. 対象の画像を右クリックし、「リンクを取得」から共有設定
  3. 画像のパスをコピーし、codepen上で使用できるパスに編集
  4. 3で作成したパスをcodepenで使用

対象の画像をGoogleドライブにアップロード

googleドライブを開き、左上の+マーク押下して「ファイルのアップロード」で指定の画像をアップロードする

今回はこちらのフリーの画像を使用

対象の画像を右クリックし、「リンクを取得」から共有設定

アップロードした画像を右クリック→「リンクを取得」を押下する

以下のようなポップアップが表示されるので「制限付き」と記載あるプルダウンメニューを押下して、「リンクを知っている全員」に変更する。

そうするとこのような表示になる

画像のパスをコピーし、codepen上で使用できるパスに編集

「リンクをコピー」押下でリンクを取得する

コピーしたパス:
https://drive.google.com/file/d/16utnSNWKpwoAr2y_Q5nstA5C0N08jk0u/view?usp=sharing

上記で取得したパスのうち、16utnSNWKpwoAr2y_Q5nstA5C0N08jk0uの部分を以下の赤文字部分にコピーする
https://drive.google.com/uc?export=view&id=コピー箇所

編集したパスがこちら

https://drive.google.com/uc?export=view&id=16utnSNWKpwoAr2y_Q5nstA5C0N08jk0u

3で作成したパスをcodepenで使用

上記パスをcodepenのurlの記述部分に記載すると、画像が表示される
↓完成品

See the Pen
by Seiya Takahashi (@takasei)
on CodePen.

終わり

ちなみに以下のようにWordPressに直接画像を添付することも可能でした。

読んで頂きありがとうございました!

css
スポンサーリンク
app crafts

コメント

タイトルとURLをコピーしました