1: Code Penの登録方法

公式サイトにアクセス

まず、Code Penの公式サイトにアクセスし、
右上の[ Sign Up ]をクリック。

フォームに入力

SNSログインも使えますが、使用しない場合は
[ Sign Up with Email ]をクリックして新たにアカウント情報を入力するフォームを表示させます。

[ YOUR NAME ] 好きな名前（変更可）
[ CHOOSE A USERNAME ] ログインに使用する名前
[ EMAIL ] ご使用のメールアドレス
[ CHOOSE PASSWORD ] ログイン時のパスワード

入力が終わったら
[ Submit ]
をクリック

次の Thanks for signing up, という画面に移りますが
ここのフォームは特に入力しなくても大丈夫なので、
画面下の
[ Save & Continue ]
をクリックして完了

すぐにチュートリアルがはじまります。

2: Code Penの使い方

画面左上のロゴをクリックするとトップページに行きます。
左サイドにメニューが並んでいますが
一番上の[ Pen ]をクリックすると編集画面に移ります。

編集画面

3: コードのブログ等への貼り付け方法

編集が終わったら右上にある[ Save ]をクリックして保存し、
右下にある[ Embed ]をクリックして埋め込み用のコードを表示させます。

[ Embed ]をクリックすると下記のようなウィンドウが表示されます。
ウィンドウの下部にコードが表示されていますが、
[ HTML (recommended) ] を選択し、
表示されているコードをコピペします。

以下のように表示されれば成功です。

See the Pen
JjdROrY by Gokan Soichiro (@sow_g)
on CodePen.