CodePen（無料版）の登録方法とWordPressでの利用方法

こんにちは、ゆんつです。

ブログにHTMLやCSS、JavaScriptなどのコードを記載したい場合。

シンタックスハイライトという機能を使うと、文章部分とソースコードの区別がつきやすくて、とても見やすくなります。

<h2>こんにちは<h2>

ただし、シンタックスハイライトは、あくまでもソースコードを綺麗に表示してくれるだけで実行結果までは表示してくれません。

つまり「このコードを実行するとこうなりますよ」というところまでをワンセットで表現するには別の方法が必要となります。

ゆんつ

WordPressのブログにコードを記載し、なおかつコードを実行した結果まで表示したい！

そんな場合に便利なのが「CodePen」というサービスです。

今日は

について書きたいと思います。

CodePenとは？

HTML、JavaScript、CSSの3つの言語について、ソースコードだけでなく実行結果も表示することができるサービスです。

有料版と無料版があり、当然有料版の方が高機能ですが、ソースコードと実行結果を表示したいくらいなら無料版で十分です。

CodePenに登録する

CodePenの公式ページにアクセスします。

Attention Required! | Cloudflare

codepen.io

トップページに「Sign Up」というボタンがあるのでクリック。

するとプランの選択画面になるので「FREE」をクリックします。

続いて登録画面に進みます。

twitterやfacebookのアカウントで登録できるみたいですが、今回はメールアドレスで登録するので一番下の「Sign Up with Email」ボタンをクリック。

入力フォームが現れるので、必要な事項を入力していきます。

「YOUR NAME」というのが自分のプロフィールの名前になります。

「CHOOSE A USERNAME」に設定したものはマイページのurlになります。

僕は「yuntu」とつけたので、僕のページのurlは

https://codepen.io/yuntu/

です。

またログイン時にはUSERNAMEかメールアドレスのどちらか一方とパスワードを求められますので、その際にもUSERNAMEを使用することがあります。

Emailには使用しているメールアドレスを入力し、Password欄にはログインに必要になるパスワードを入力します。

全ての項目を入力し終わったら「Submit」ボタンをクリックしましょう。

すると「Thanks for signing up,〇〇（YOUR NAMEで設定した名前）」という画面になります。

特に何も記入する必要はないので、そのまま下部の「Save&Continue」をクリック。

これで登録は完了です。

CodePenを使ってみよう

登録が完了したら、さっそく使ってみましょう。

画面右上の人型のアイコンをクリックするとメニューが現れるので「New Pen」をクリック。

エディター画面になります。

画面はHTML、CSS、JavaScriptと言語ごとに分割されているので、それぞれの個所に該当するコードを記述していきます。

コードを記述すると、下の画面にコードの実行結果が表示されます。

コードの記述が終わったら、エディターの上の方にあるSaveボタンをクリック。

画面の右下の「Embed」ボタンをクリック。

Embedボタンをクリックすると「Embed This Pen」という画面が開き、ブログに貼り付けるコードの見た目などの設定をしたり、プレビューを確認することができます。

「Theme」はブログに貼り付けたときのCodePenのカラーをLightかDarkで選択できるので、自分の好きなカラーを選択します。

「Use click-to-load」はコードの実行結果（Result）を表示するのに、そのまま表示するか、クリックをして表示するかを選択します。

クリックすることで結果を表示したい場合にはチェックを入れます。

HTMLやCSS、Resultのボタンは、どれを優先的に表示するかを決めるかのボタンで、ボタンをオンにすることで、そのコードまたは結果を優先表示することが出来ます。

例えばHTMLボタンだけをオンにすると初期状態ではHTMLのほうが優先的に表示されますし、Resultボタンだけをオンにすると初期状態ではResultだけが優先的に表示されます。

表示するCodePenの縦のサイズは「drag to resize」をドラッグして調整します。

ブログでの表示方法の設定が完了したら、下部のタブで「HTML（reccomended）」が選択されていることを確認し、表示されているコードをコピーします。

そして、WordPressの投稿画面で、CodePenを表示したい場所で「カスタムHTML」を選択します。

コピーしたコードをWordPressの「カスタムHTML」に貼り付けます（クラシックエディタを使用している場合はテキストエディタに貼り付ける）

すると、以下のような感じで、コードと実行結果が表示されます（※Use click-to-loadにチェックを入れているので、「Run Pen」をクリックすると結果が表示されます）。

See the Pen
konnichiwa by konpure (@yuntu)
on CodePen.

ソースコードの隣に実行結果が表示されて、とてもわかりやすいです。

以上のように、ソースコードだけではなくて、その結果もすぐ近くに表示させたい場合。

「CodePen」を利用することで実現することができます。

ゆんつ

便利！

それでは、またー。