Help us understand the problem. What is going on with this article?

Qiitaにcodepenを取り込む時の注意点

こんにちは。ばーんです。

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

僕がしでかした初歩的なQiitaとcodepenのミスを共有します。

初めてQiitaにcodepen取り込むという人はご注意を。

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

AをBにします!という流れをcodepenで表現したかったので、

1、完成前を作成する→セーブする(画面上段のsave)

スクリーンショット 2019-12-11 0.50.32.png

2、共有する(画面右下のEmbet その後一番下のCopy&paste)

スクリーンショット 2019-12-11 0.51.06.png

3、Qiitaに貼り付ける

スクリーンショット 2019-12-11 0.51.24.png

4、戻って完成版を打ち込み1〜3の同じ流れ

スクリーンショット 2019-12-11 0.53.14.png

そして、

できたのがこちらっ↓

See the Pen sample by hashibadaiki (@hashibadaiki) on CodePen.

See the Pen sample by hashibadaiki (@hashibadaiki) on CodePen.

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

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

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

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

See the Pen sample by hashibadaiki (@hashibadaiki) on CodePen.

See the Pen sample2 by hashibadaiki (@hashibadaiki) on CodePen.

補足説明

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

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

それでは皆様。よきQiita Lifeを…

baan_nasebanaru
2019.11~ITに興味を持ち学習開始。現在は副業としてWebサイト制作やシステム開発に携わっています。React中心でお仕事を受けています。 転職活動開始しました。 わくわく会というコミュニティにも所属しており初学者の方のサポートや、案件の紹介をしています。もちろん無料のコミュニティなので、興味のある方は是非お声掛けください^^ (TwitterのDMが1番反応しやすいです!)
https://baan.work/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away