Udemyなら最安1200円でプログラミングがずっと学べる!

CodePenでHTML・CSS・JSをブログに埋め込む方法

Codepenソースコード

ソースコードをブログに埋め込みたい

プログラミングの記事をブログで扱う際、読者が理解しやすいようにソースコードを埋め込みたいですよね。

そんな時に役立つのがCodePen(コードペン)です。

CodePenならHTML・CSS・JSのソースコードをただブログに埋め込むだけでなく、下のように実際のウェブページ上でどんな風に表示されるか一眼で分かります。

See the Pen hタグ by Tsunagu (@Tsunagu) on CodePen.

今回はそんなCodePenの登録方法とブログへの埋め込み方法を分かりやすく紹介します。

目次

CodePen(コードペン)の登録方法

Codepen登録1

まずはCodePen公式サイトを開いて「Sign Up for Free」をクリック。

Codepen登録2

登録はTwitter、GitHub、Facebook、メールのいずれかで可能です。

メールで登録する場合は、名前、ユーザーネーム、Email、パスワードを入力し「Submit」をクリック。

これでCodePenの登録は完了だよ!

CodePenでソースコードをブログに埋め込む方法

Codepen登録3

CodePenにログインした状態でトップページ左サイドバーにある「Pen」をクリックしてコーディングページに移ります。

Codepenソースコード埋め込み1

上のような画面が表示されるので、ブログに埋め込みたいコードを入力して「Embed」をクリック。

Codepenソースコード埋め込み2

ソースコード埋め込みの詳細画面が表示されるので「テーマ①」と「埋め込み用フォーマット②」を選択し、「Copy Code③」で埋め込み用コードをコピーします。

WordPressでブログを運営している方は、HTMLの埋め込み用コードをコピーして「カスタムHTML」にコピペするのがおすすめです!

まとめ

See the Pen hタグ by Tsunagu (@Tsunagu) on CodePen.

HTML・CSS・JSのソースコードをブログに埋め込むなら「CodePen」がおすすめ!

目次
閉じる