【WordPress】Codepenのソースコードを埋め込む方法

簡単なソースコードをWordpressで公開したいときがあると思います。

そんな時にCodePenというサービスを利用すると非常に便利です。

今回はCodePenのソースコードをWordPressに埋め込む方法をご紹介します。

CodePenとは

CodePenとはブラウザ上でHTML,CSS,JavaScriptのコードを記載して、

リアルタイムで表示を確認しながら開発をすることができるサービスです。

ソースコードを他の人に共有する際によく使用させれます。

まずはCodePenでユーザー登録をしましょう！

ソースコードを書くだけであればユーザー登録は不要ですが、

ソースコードをWordpressに添付するにはユーザー登録が必要になります。

ユーザー登録が終わったら、ソースコードを書いてみましょう。

ソースコードを書いたら、上にある「Save」を押して保存します。

次に一番下にある「Ebmed」を押します。

するとモーダルが表示されます。

ここでWordPressに埋め込んだ時に表示される高さを変更できます。

高さの設定が終わったら右側にある「CodeCopy」を押してコードをコピーします。

記事投稿画面からテキストをクリックして、

該当箇所に先ほどコピーしたコードを貼り付けます。

するとCodePenのソースコードが表示されます！

See the Pen
Untitled by Shungo Matsumura (@shungo0525)
on CodePen.