codepenで画像を表示させる方法

公開日 2020/10/14 最終更新日 2023/3/18

じいちゃん、codepenで画像を表示させる方法ってないの？

もちろんあるぞい！わかりやすく解説してあげよう

それでは、codepenで画像を表示させる方法を、画像を使いながら解説したいと思います。

また、codepenで画像を表示させるには、Google Driveが必要になりますので、ダウンロードしておきましょう！

まず、以下のように、Google Driveに画像を載せましょう！

1.ファイルから画像をアップロードする。

2.画像のファイルを右クリックして、『リンクを取得』をクリックする。

3.リンクをコピーをクリックして、URLを取得する

これで、Google Driveでの作業は終了です！

Google Driveから画像のURLが取得できたら、

codepen用のURLに変更します！

変更方法は、以下のGoogle DriveのURLの赤文字部分を、

https://drive.google.com/file/d/1Z6jTBHbQTrTiSsvbMA3spET8wJ1-36P-/view?usp=sharing

以下のcodepen用のURLの最後に記載します。

https://drive.google.com/uc?export=view&id=画像のURL

ここでの例の場合、

https://drive.google.com/uc?export=view&id=1Z6jTBHbQTrTiSsvbMA3spET8wJ1-36P-

となります。

最後に、codepen用のURLを、以下のように貼り付けたら終了です！

完成例は、以下になります。

See the Pen wvWKgyy by ryu (@ryu-no-sss) on CodePen.

まとめ

・Google DriveからURLを取得する。

・URLをcodepen用のURLに変更する。

みなさんのお役に立てたのなら幸いです。

それでは、最後まで読んでいただきありがとうございました。

タグ