CODEPENで画像を挿入 する方法

本記事では、 CODEPEN （無料版）で画像を挿入する方法を解説します。

コードと実行結果が同時に閲覧できるサービス『 CODEPEN 』、無料版の人は『あれ？画像って挿入できないの？』『imgタグのソースどこを参照すればいいの？』って困ったことがありませんか？この記事にたどり着いた方はまさに、その状況なのではないかと。

CODEPEN で画像を挿入する3ステップ

下記３ステップで画像が挿入できます。

①挿入したい画像をアップロードする

②アップロードした画像のリンクをコピー

③ CODEPEN のimgタグsrc属性に張り付け

①挿入したい画像をアップロードする

まず、ローカル環境に保存してある画像はCODEPENで読み込むことができません。

そのため、画像をアップロードして、CODEPENが読み込めるようにしてあげる必要があります。

アップロード方法は色々あると思いますが、私が一番簡単だと思うGoogleドライブでのアップロード方法を紹介します。

※CODEPENでは、もちろんローカル環境に保存したファイルを読むこむことはできない

Googleドライブでの画像アップロード方法

方法は簡単でアップロードしたい画像をドラッグアンドドロップするだけです。

これでCODEPENが画像を読み込める環境ができました。

②アップロードした画像のリンクをコピー

次に、アップロードした画像を左クリックすると下記画像のようなメニューが表示されるので、『リンクを取得』を選択します。リンクがコピーされる画面が表示されるので、『リンクをコピー』でコピーします。

③ CODEPEN のimgタグsrc属性に貼りつけ

最後に、コピーしたリンクをimgタグの参照先に貼りつけます。

ここで一つ注意点があります。コピーしたリンクをimgタグのsrc属性にそのまま貼りつけても、画像は表示されません。

そこで、リンク先を下記のように書き換えてあげる必要があります。

googleドライブからコピーしたリンクのファイル名の部分を、

“https://drive.google.com/uc?export=view&id=”の後に挿入してください。

コピーしたリンク：https://drive.google.com/file/d/ファイル名/view?usp=sharing

↓

変更後リンク：https://drive.google.com/uc?export=view&id=ファイル名

まとめ

以上、CODEPEN無料会員版で、画像を挿入する方法でした。

少しコツが必要なのが、コピーしたリンクを修正する必要がある点ですが、ここさえ押さえておけばめちゃくちゃ簡単に画像が挿入できます。

Code Pen、Googleドライブは、無料で十分使えるサービスですのでとてもオススメです。

ABOUT AUTHOR

シュウヘイ

フリーランスのマークアップエンジニアとしてweb制作を中心に活動
HTML,CSS,Wordpress,javascript,その他独学方法やWeb制作フリーランスの経験談について情報を発信しています。