『CodePen（コードペン）』を実際に記事内で使ってみる方法についてです。
まず前提ですが、
『CodePen（コードペン）』とは、ソースコードを簡単に共有できるWebサービスです。
利用すると、⬇のような感じで「ソースコード」と「その結果」を埋め込むことができます。
See the Pen
xxRMEoQ by daniel__blog (@daniel__blog)
on CodePen.
すごく見やすいですよね。
見やすいだけでなく、『CodePen』には下記のメリットもあります。
- ブログやWebサイト内に簡単に埋め込むことができる！
- 書いたコードがリアルタイムで反映される！
- 基本的に無料で使える！
上記のとおりです。
僕もブログの各記事内で使っています。とても便利です。
使い方も簡単なので、実際にブログ等に埋め込む方法をご紹介しますね。
この記事を書いている僕は、Wordpress歴1年ほど。
カスタマイズしながら、楽しくブログ生活を送っています。
Contents
CodePenを記事内に埋め込む方法
まずは、ページにソースコードを表示するまでの全体の流れをお見せします。
設定方法の流れ
以下の流れで設定できます。
- 手順①：『CodePen』に登録する
- 手順②：「Pen」をクリックする
- 手順③：ソースコードを記述する
- 手順④：保存する
- 手順⑤：「Embed」をクリックする
- 手順⑥：「Copy & Paste Code」をコピペして完了！
順番に見ていきます。
手順①：『CodePen』に登録する
以下のリンクを開きます。
CodePenのトップページが開きます。
画面右上の「Sign Up」をクリックします。
サインアップ方法は複数用意されています。
いずれかでご登録し、ログインしてみてください。
手順②：「Pen」をクリックする
CodePenにログインします。
画面左上の『Pen』プルダウンを開き、『Pen』をクリックします。
上記のとおり、コードを実際に書き込んでいく画面が表示されます。
手順③：ソースコードを記述する
上記のように、ソースコードを記載していきます。
結果はすぐに反映されます。大変心地よいです。
手順④：保存する
ペンアイコンをクリックすると、お好みの名前を付けられます。
デフォルトの「Untitled」でも保存できます。
『Save』をクリックして保存します。
手順⑤：「Embed」をクリックする
保存すると、上記のようなボタンが画面下部に表示されます。
「Embed」をクリックします。
上記の画面（「Embed This Pen」ウィンドウ）が表示されるはずです。
手順⑥：「Copy & Paste Code」をコピペして完了！
「Theme:」からソースコードを載せたときの見た目を変更できます。
以下の２種類から選べるので、お好みの方をどうぞ。
- Light
- Dark
僕は、Darkが好きです。
上記のように、画面下部に「Copy & Paste Code」が表示されています。
「HTML(recommended)」の内容を全てコピーします。
コピーできたら、ソースコードを表示させたいWebサイト、またはWordpressの記事ページを開きましょう。
上記のように、Webサイト内やWordpressの記事内（コードエディター）に貼り付けます。
See the Pen
gOLqLzm by daniel__blog (@daniel__blog)
on CodePen.
⬆こんな感じで表示されます。
これで無事、サイト内で表示することができました！お疲れさまでした。
まとめ
最後にまとめます。
CodePenでは、
- ブログやWebサイト内に簡単に埋め込むことができる！
- 書いたコードがリアルタイムで反映される！
- 基本的に無料で使える！
というわけでした。
今回は以上です！
最後までお読み頂き、ありがとうございました。
素敵なCodePenライフをお楽しみください。
