【無料会員でOK】CodePenで画像を使う方法を分かりやすく解説【プログラミング】

プログラミング

おはこんばんにちは!ノボル(@Veritas40835638)です。

最近、CodePenをよく使うんだけど、画像を貼りつける方法ってないの?

もちろんあるよ!さっそく解説するね。


そこで今回は、CodePenの無料会員で画像を使う方法を分かりやすく解説します!

現役のプロのメンターから学べるオンラインブートキャンプ

CodePenとは?

CodePen」とは、ブラウザ上でHTML・CSS・Javascriptのコーディングができるサービスです。

リアルタイムにコーディングのプレビューが反映されるのが特徴です。

また、以下の例のように、Webサイトやブログにプレビュー画面を埋め込むことも可能です。

See the Pen BaNKZoP by monkey d ruffy (@ruffy126) on CodePen.


CodePenの使い方

そもそも、CodePenの登録方法や使い方が分からない!」という方は、以下の記事で解説したので、こちらを先にご参照ください。


CodePenで画像を使うために必要なもの

CodePenで画像を使うためには、

Googleドライブ
Dropbox

のどちらかの無料アカウントが必要になります。

簡単に作成できるので、もしまだ持っていないという場合は、先に作ってください。

さっそく、CodePenで画像を使う方法を解説していきます!

Google Driveの場合

Googleドライブに画像をアップロードする

CodePenで使いたい画像を、Googleドライブへアップロードしてください。

ドラッグ&ドロップでアップロードすることもできるので簡単です。


アップロードした画像のURLをコピーする

アップロードした画像を右クリックして、「共有可能なリンクを取得」という項目をクリックしてください。

もしリンクがコピーされない場合は、[右クリック]→[共有]でリンクが表示されるので、それをコピーしてください。


上の画像では、以下のようなURLがコピーされました↓

https://drive.google.com/file/d/1rZVg3bV-CFxvavnLTPvJ5HlIe0S_mbVn/view?usp=sharing


CodePenで画像を読み込む

それでは、CodePenで画像を読み込んでいきましょう!

しかし、CodePenでは、コピーしたURLをそのまま貼り付けても画像は読み込まれません

そこで、CodePenで読み込めるようにするために、URLの一部を書き換えてあげます

コピーした画像のURLは、以下のような形になっていると思います。
(もし違っても、画像IDがわかればOKです)


https://drive.google.com/file/d/画像ID/view?usp=sharing


このURLを、以下のように変換しましょう。


https://drive.google.com/uc?export=view&id=画像ID


僕がコピーした画像のURLは、

https://drive.google.com/file/d/1rZVg3bV-CFxvavnLTPvJ5HlIe0S_mbVn/view?usp=sharing

だったので、

https://drive.google.com/uc?export=view&id=1rZVg3bV-CFxvavnLTPvJ5HlIe0S_mbVn

と変換します。


このURLをCodePenに貼り付けると…

See the Pen vYOGJOv by monkey d ruffy (@ruffy126) on CodePen.

無事、画像を読み込むことができました!

Dropboxの場合

続いて、Dropbox経由で画像を読み込む方法を解説します。

Dropboxに画像をアップロードする

ドラッグ&ドロップで、画像をアップロードしましょう。


アップロードした画像のURLをコピーする

アップロードした画像にカーソルを乗せてください

共有」というボタンが表示されると思うので、クリック。




以下のような画面になるので、右下にある「リンクを作成」クリック。




リンクが作成されたので、「リンクをコピー」から画像のURLをコピーしましょう。


上の画像では、以下のようなURLがコピーされました↓

https://www.dropbox.com/s/h8m4eqsmlaacezl/sunset.jpg?dl=0


CodePenで画像を読み込む

Droboxを使う場合でも、コピーしたURLをそのまま使うことはできません

Drop Boxの画像URLは、以下のような形になっていると思います。

https://www.dropbox.com/〜

この「www」という部分を、「dl」に書き換えましょう。


僕がコピーした画像のURLは、

https://www.dropbox.com/s/h8m4eqsmlaacezl/sunset.jpg?dl=0

だったので、

https://dl.dropbox.com/s/h8m4eqsmlaacezl/sunset.jpg?dl=0

となりますね。


このURLをCodePenに貼り付けると…

See the Pen YzXqxGB by monkey d ruffy (@ruffy126) on CodePen.

無事、画像を読み込むことができました!

最後に

今回の記事では、CodePenの無料会員で画像を使う方法を解説しました。

今日のおさらい

・CodePenで画像を読み込むには、Google DriveかDropboxの無料アカウントが必要

・画像URLをそのまま貼り付けても読み込めないので、変換しよう!

これで、CodePenで自由に画像を使うことができますね!

最後まで読んで頂き、ありがとうございました(o^^o)

コメント

タイトルとURLをコピーしました