CODEPEN

Codepenで画像を表示する方法

私はCodePenが好きでよく使います。

実はこのCodePen、自分の好きな画像を使うことができるのです。

 

そこで今回は「CodePenで画像を表示する方法」をご紹介します。

CodePenで画像を表示するには、Googleドライブを使います。

 

目次
  1. CodePenで画像を表示する方法
  2. 画像固有のidを調べる方法
  3. 今日のまなび

CodePenで画像を表示する方法

おおまかな流れ

  1. Googleドライブに画像をアップロードする。
  2. アップした画像のURLを調べる。
  3. CodePenに書く。

 

画像を表示する時は、以下のコードを貼り付ければよいです。

<img src="https://drive.google.com/uc?export=view&id=この部分を画像固有のIDに変更してください">

 

id=の部分には、画像固有のidを入力します！！

 

画像固有のidを調べる方法

  1. Googleドライブに画像をアップロードします。
  2. アップロードした画像を右クリック。
  3. 「共有可能なリンクを取得」「共有設定」「リンクをコピー」でURLをコピー。
  4. コピーしたURLをメモ帳などに貼り付ける。

 

URLの英数字の羅列になっている部分が「画像固有のid」です。

 

固有のid部分だけをコピーして、以下のid=””の部分を書き換えれば、画像が表示できます。

<img src="https://drive.google.com/uc?export=view&id=この部分を画像固有のIDに変更してください">

 

 

今日のまなび

  • CodePenでも好きな画像を使うことができる。
  • そのためにはGoogleドライブを使う。
  • 画像をアップして「画像固有のURL」を調べる。
  • それを貼り付ければOK。簡単！
  • CodePenは、手軽に使えてすごく便利だ！
関連記事