Treat Myself

海外生活中アラサー女子の英語・プログラミング学習備忘録

CodePen に画像を挿入する方法【無料会員】

スポンサーリンク

yaponka

無料版CodePenで画像が挿入できたら。。。と思ったことはありませんか?

私が実際使っている簡単に画像を挿入できる方法をご紹介します。

 

 

CodePen内で表示させたい画像をアップロード

有料会員になるとCodePenのアップロードサーバーが使えるようになりますが、無料版はアップロードサバーが使えません。

 

なので無料で画像をインターネット上に置いておくことができるサイトからCodePen内で表示させたい画像をアップロードします。

 

私が利用しているサイトはこちら↓

Postimage.org — free image hosting / image upload

 

アップロードの手順

1. 画像を選ぶ

サイトにアクセスしたら、アップロードしたいサイズや、画像アップロードをしておく期間などを選び、「画像を選択します」ボタンからアップロードしたい画像を選びます。

uplaod

 ドロップダウンタウンから選択できる項目↓

setting for uploading

 

2. アップロードが完了するまで待つ

アップロード中は進捗情報が確認できます。

インターネットの環境やファイルの大きさにもよりますが、私の場合は1分もかからず完了しました。

progress bar

 

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

アップロードが完了したら画像に付与されたURLを確認できて、CodePenで表示させたい場合は「直接リンク」のURLをコピーします。

 

generated URL

 

 

4. CodePen内にリンクを貼付ける

コピーしたURLをCodePen内にペーストしたら完了です!

 

inserting URL

 

SVGファイルの場合

ご紹介した画像をアップロードするサイトではSVGファイルは非対応なので、SVGファイルの画像をCodePenで表示させたい場合は一度ファイルの形式を変換する必要があります。

 

画質は落ちてしまうのですが、私はPNGファイルにコンバートするためオンラインの無料サービスを使っています↓

ezgif.com

 

SVGからPNGへ変換する手順

1. ファイルを選ぶ

PNGファイルに変換させたいSVGファイルを選択してアップロード

converter upload

 

2. PNGへコンバートする

アップロードされた画像を確認して(今回はハンバーガーアイコンです)「SVG to PNG」を選択したら、「Convert to PNG!」ボタンをクリック

SVG converter

 

3. 保存する

PNGファイルに変換されたのを確認したら「save」ボタンを押すとPNGファイルに変換された画像がダウンロードできます。

press save


4.画像ホストサイトにアップロード

PNGファイルを画像ホストサイトにアップロードしてURLを取得してCodePen内に貼付けます。
 

まとめ

画像が挿入できるようになるとCodePenでできることが更に広がるので試してみてください。

 

CodePenに関しての他の記事はこちら↓

 

treatmyself.hatenablog.jp