###こんにちは。ばーんです。
ーーーーーーーーーーーーーーーーーーーーーー
2019.12　追記
下のcodepen見てもらえれば分かりますが、
codepenはサイトの方で載せたものを消すと、
こちらも消えることが身をもってわかりましたToT
戒めとしてこの記事は残しておきます。
ーーーーーーーーーーーーーーーーーーーーーー

僕がしでかした初歩的なQiitaとcodepenのミスを共有します。
####初めてQiitaにcodepen取り込むという人はご注意を。

分かりやすい例として、簡単なコードで紹介します。

AをBにします！という流れをcodepenで表現したかったので、
#####1、完成前を作成する→セーブする(画面上段のsave)
<img width="1423" alt="スクリーンショット 2019-12-11 0.50.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/2cc76b54-f095-7acc-29dd-b62b5e24310c.png">

#####2、共有する(画面右下のEmbet　その後一番下のCopy&paste)
<img width="1423" alt="スクリーンショット 2019-12-11 0.51.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/62d792c2-a919-e668-6734-f0d573912773.png">

#####3、Qiitaに貼り付ける
<img width="1423" alt="スクリーンショット 2019-12-11 0.51.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/0cb02532-73af-b6ca-aab7-892ac21030d9.png">

#####4、戻って完成版を打ち込み1〜3の同じ流れ
<img width="1423" alt="スクリーンショット 2019-12-11 0.53.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/5b86f32b-17bd-b5d0-89d4-f05c42452564.png">

そして、
###できたのがこちらっ↓

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="hashibadaiki" data-slug-hash="jOEqqYy" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="sample">
  <span>See the Pen <a href="https://codepen.io/hashibadaiki/pen/jOEqqYy">
  sample</a> by hashibadaiki (<a href="https://codepen.io/hashibadaiki">@hashibadaiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="hashibadaiki" data-slug-hash="jOEqqYy" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="sample">
  <span>See the Pen <a href="https://codepen.io/hashibadaiki/pen/jOEqqYy">
  sample</a> by hashibadaiki (<a href="https://codepen.io/hashibadaiki">@hashibadaiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


・・・完成品が2つ。あれ？あれれ？
**これは、コナン君でてきますね。**

ちなみに結論から言うと、saveしても別ファイルにはなりません。
（僕はてっきりその時のコードが反映されると思ってました）

別ファイルの作成が必要です。
PenとかNew penみたいな表記から作成できます。

そして、作りたかったのがこちら↓

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="hashibadaiki" data-slug-hash="NWPNNmp" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="sample">
  <span>See the Pen <a href="https://codepen.io/hashibadaiki/pen/NWPNNmp">
  sample</a> by hashibadaiki (<a href="https://codepen.io/hashibadaiki">@hashibadaiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="hashibadaiki" data-slug-hash="jOEqqYy" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="sample2">
  <span>See the Pen <a href="https://codepen.io/hashibadaiki/pen/jOEqqYy">
  sample2</a> by hashibadaiki (<a href="https://codepen.io/hashibadaiki">@hashibadaiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

###補足説明

●codepen貼り付けても画像3のようにコードとかはでてきません。プレビューでは文字だけ
限定共有投稿なら確認できます。ただし、限定から通常への切り替えが不明だったので僕は諦めました・・・

●当然ですが、僕は長めのコードを上書きして進んでいってたので、元に戻っての修復はできなくて、記事をまるっと削除しました・・・

それでは皆様。よきQiita Lifeを…
[cv:issue_marketplace_engineer]

###こんにちは。ばーんです。
ーーーーーーーーーーーーーーーーーーーーーー
2019.12　追記
下のcodepen見てもらえれば分かりますが、
codepenはサイトの方で載せたものを消すと、
こちらも消えることが身をもってわかりましたToT
戒めとしてこの記事は残しておきます。
ーーーーーーーーーーーーーーーーーーーーーー

僕がしでかした初歩的なQiitaとcodepenのミスを共有します。
####初めてQiitaにcodepen取り込むという人はご注意を。

分かりやすい例として、簡単なコードで紹介します。

AをBにします！という流れをcodepenで表現したかったので、
#####1、完成前を作成する→セーブする(画面上段のsave)
<img width="1423" alt="スクリーンショット 2019-12-11 0.50.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/2cc76b54-f095-7acc-29dd-b62b5e24310c.png">

#####2、共有する(画面右下のEmbet　その後一番下のCopy&paste)
<img width="1423" alt="スクリーンショット 2019-12-11 0.51.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/62d792c2-a919-e668-6734-f0d573912773.png">

#####3、Qiitaに貼り付ける
<img width="1423" alt="スクリーンショット 2019-12-11 0.51.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/0cb02532-73af-b6ca-aab7-892ac21030d9.png">

#####4、戻って完成版を打ち込み1〜3の同じ流れ
<img width="1423" alt="スクリーンショット 2019-12-11 0.53.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/5b86f32b-17bd-b5d0-89d4-f05c42452564.png">

そして、
###できたのがこちらっ↓

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="hashibadaiki" data-slug-hash="jOEqqYy" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="sample">
  <span>See the Pen <a href="https://codepen.io/hashibadaiki/pen/jOEqqYy">
  sample</a> by hashibadaiki (<a href="https://codepen.io/hashibadaiki">@hashibadaiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="hashibadaiki" data-slug-hash="jOEqqYy" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="sample">
  <span>See the Pen <a href="https://codepen.io/hashibadaiki/pen/jOEqqYy">
  sample</a> by hashibadaiki (<a href="https://codepen.io/hashibadaiki">@hashibadaiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


・・・完成品が2つ。あれ？あれれ？
**これは、コナン君でてきますね。**

ちなみに結論から言うと、saveしても別ファイルにはなりません。
（僕はてっきりその時のコードが反映されると思ってました）

別ファイルの作成が必要です。
PenとかNew penみたいな表記から作成できます。

そして、作りたかったのがこちら↓

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="hashibadaiki" data-slug-hash="NWPNNmp" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="sample">
  <span>See the Pen <a href="https://codepen.io/hashibadaiki/pen/NWPNNmp">
  sample</a> by hashibadaiki (<a href="https://codepen.io/hashibadaiki">@hashibadaiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="hashibadaiki" data-slug-hash="jOEqqYy" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="sample2">
  <span>See the Pen <a href="https://codepen.io/hashibadaiki/pen/jOEqqYy">
  sample2</a> by hashibadaiki (<a href="https://codepen.io/hashibadaiki">@hashibadaiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

###補足説明

●codepen貼り付けても画像3のようにコードとかはでてきません。プレビューでは文字だけ
限定共有投稿なら確認できます。ただし、限定から通常への切り替えが不明だったので僕は諦めました・・・

●当然ですが、僕は長めのコードを上書きして進んでいってたので、元に戻っての修復はできなくて、記事をまるっと削除しました・・・

それでは皆様。よきQiita Lifeを…
[![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F17fa658b-53c7-4ca0-a28b-e588ed1bd371?alt=media&token=2c00afff-85ff-4428-8d15-696ab676dcb0)](https://i-ssue.com/lp/check_salary)

続きを読むには単価診断を受けてください（30秒）