Webサイト制作

    Codepenで画像を表示する方法

    CodePenで、画像を表示する方法です。

     

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

    今日は、CodePenで画像を表示する方法をご紹介します。

     

    これでCodePenでも、好きな画像が表示できますよ〜

     

    CodePenで画像を表示するには、Googleドライブを使えばOKです。

     

    CodePenで画像を表示する方法

    おおまかな流れ

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

     

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

    <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に変更してください">

     

     

    今日のまなび

    • Googleドライブを使えば、CodePenで好きな画像を表示できる。
    • 画像をアップして画像固有のURLを調べて使う。
    • CodePenは、手軽に使えてすごく便利。