CodePenで自身が指定した画像を表示させるためには、Googleドライブが必要でGoogleドライブに画像をアップロードし、その画像を読み込むといった流れです。
![codepen](https://design-pull.com/wp-content/uploads/2022/09/bandicam-2022-09-06-19-35-36-841-1024x428.jpg)
ADVERTISEMENT
Googleドライブを開く
![マイドライブ](https://design-pull.com/wp-content/uploads/2022/09/bandicam-2022-09-06-10-37-04-401-1024x593.jpg)
Googleドライブ→新規→ファイルのアップロード→画像ファイルをアップロードで画像をドライブにアップロードします。
![画像アップロード](https://design-pull.com/wp-content/uploads/2022/09/bandicam-2022-09-06-10-38-05-811-1024x593.jpg)
画像の上で右クリック→リンクを取得をクリック。
![リンクを取得](https://design-pull.com/wp-content/uploads/2022/09/bandicam-2022-09-06-10-38-10-818-1024x593.jpg)
制限付きをクリック。
![制限付き](https://design-pull.com/wp-content/uploads/2022/09/bandicam-2022-09-06-10-38-15-826-1024x593.jpg)
リンクを知っている全員を選択しクリック。
![リンクを知っている全員](https://design-pull.com/wp-content/uploads/2022/09/bandicam-2022-09-06-10-38-25-809-1024x593.jpg)
リンクをコピーを選択し完了をクリック。
![リンクをコピー](https://design-pull.com/wp-content/uploads/2022/09/bandicam-2022-09-06-10-38-30-809-1024x593.jpg)
ここまでがGoogleドライブでの操作になります。
GoogleドライブのURLを変更する
Googleドライブの画像リンクURLを取得したらメモ帳などに一度張り付けて残しておきます。
ここからCodePen用にURLを変更します。
▪GoogleドライブのURL⇩
https://drive.google.com/file/d/19Z_BMxDckb_AAca7FTl94iHO_OjlSpVI/view?usp=sharing
https://drive.google.com/file/d/(ここのURLを使用します)/view?usp=sharing
▪CodePen用のURL⇩
https://drive.google.com/uc?export=view&id=(ここにGoogleドライブの一部URLを張り付け)
▪上記GoogleドライブのURLだった場合⇩
https://drive.google.com/uc?export=view&id=19Z_BMxDckb_AAca7FTl94iHO_OjlSpVI
CodePen
See the Pen Untitled by pull-design (@design90806871) on CodePen.
CodePenをもっと便利に使う
▪Codepenの始め方と使い方-記事内にコード埋め込みについて
▪Codepenをもっと便利に使うための設定
ADVERTISEMENT