日曜エンジニアのIT道場
ITを学び、DXに備える
    CODEPEN

    Codepenで画像を表示する方法

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

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

     

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

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

     

    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は、手軽に使えてすごく便利だ!