CodePen(無料版)の登録方法とWordPressでの利用方法

ブログ関連

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

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

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


<h2>こんにちは<h2>

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

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

ゆんつ
ゆんつ

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

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

今日は

CodePen(無料版)の登録方法とWordPressでの利用方法

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

CodePenとは?

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

CODEPENエディタ画面

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

CodePenに登録する

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

Attention Required! | Cloudflare

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

CODEPENトップページ

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

プラン選択

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

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

メールアドレスで登録

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

入力事項

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

プロフィール画面

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

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

https://codepen.io/yuntu/

です。

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

CODEPENログイン画面

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

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

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

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

これで登録は完了です。

CodePenを使ってみよう

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

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

人型のアイコンをクリックして「New Pen」をクリック

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

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

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

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

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

コードが完成したらエディターの上の方にあるSaveボタンをクリック

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

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

「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」を選択します

カスタムHTMLを選択

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

コピーしたコードをWordPressの「カスタムHTML」に貼り付け

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

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

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

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

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

ゆんつ
ゆんつ

便利!

それでは、またー。

コメント