こんにちは！もっくんです。
以前、こちらの記事でブログにソースコードをカッコよく表示させる方法をご紹介させていただきました。
今回はさらに、
コードだけじゃなく、実行結果も見れるようにしたい！
という方へ向けて、「CodePen（コードペン）」というサービスを使って、プラグインを使わずにWordPress記事にHTML・CSS・JavaScriptのソースコードと、そのデモを表示させる方法についてご紹介します。簡単に登録して使えるので、ぜひ参考にしてみてください。
登録手順
CodePenを使用するには、アカウント登録（無料）が必要です。メールアドレスで簡単に登録できますので、以下の手順に従って登録を済ませましょう。
手順（新規登録の場合）
メール認証が終わると、アカウント登録は完了です。次は実際に使っていきましょう！
使用方法
CodePenの使い方について、説明します。
基本的な使い方
新規作成するには、ログインしていることを確認し、左側のCREATEエリアから、「Pen」を選択します。
すると、以下の画面が表示されます。各入力エリアにはコードを記述します。実際にはエディターソフトを使って記述したものをそれぞれコピペしていく形になります。
ためしに、HTMLエリアと、CSSエリアにコードを入力してみます。
画面下にプレビューが表示されているのが確認できました。
コードの埋め込み手順（WordPress）
つづいて、上記で入力したソースコードをWordPressの記事に埋め込む方法を説明します。
記事に埋め込む手順（カスタムHTMLを使用）
実際の表示を確認
埋め込んだCode Penのコードは、このように表示されます↓↓↓
See the Pen Untitled by gainadesign (@gaina-design) on CodePen.
コードの種類、結果の表示・非表示の切り替え、再表示、倍率の変更など、ユーザーにとって使いやすい機能が装備されていますので、使い心地を試してみてください。
動きの変化もわかりやすく表示
また、CSSアニメーションもしっかり反映されます。「Result」ボタンを押すと、デモが表示されます。
ソースコードだけでは、なかなかイメージがしづらいのでとてもありがたいです！
See the Pen spin square by gainadesign (@gaina-design) on CodePen.
まとめ
いかがでしたか？
ブログでソースコードの記述だけでなく、動きや見た目をユーザーに伝えたい時など、デモ表示ができる「CodePen」はとても便利なサービスです。他にも色々な機能が備わっているので、いろいろと試してみていただければと思います。
GAINA DESIGNでも、CodePenを使って様々なコードを紹介していきたいと思いますので、ぜひチェックしてみてください！
