【初心者向け】codepen（コードペン）のブログへの貼り付け方

Codepenとは、ブラウザ上でHTML,CSS,JavaScriptのコードを記述し、リアルタイムで共有するサービスです。
今回このブログでは、Codepenのブログへの貼り付け方を画像形式で紹介してます。
Googleの機能でしか日本語訳ができないので敬遠しがちですが、慣れると使いやすいのでおすすめです。

私のように英語が苦手な方は日本語化してすすめましょう

Codepen

1.まずはログイン画面。右上のSign Upをクリックします。

2.アカウントを新規登録しなくてもお好みのアカウントから入れます。

• Twitter
• GitHub
• Facebook

3.ここからは日本語翻訳を活用しましょう。
英語が堪能な方には不要なアドバイスです。

4.日本語化されるとこんな感じです。

5.赤枠の以前作ったページをクリックします。

6.そうするとこういうエディタ画面が開きますので、右下の埋め込むをクリックします。

7.HTML（推奨）選択状態でコピーします。

8.コピーが完了するとコメントが出ます。

※ブラウザや環境によってはコピーが上手くいかない場合がありますので、そういうときは通常通り全選択してコピペすればいいです。

埋め込んだソースが下記の通りです。