CodePenの2.0エディタをClassic Pen風に使う方法｜旧エディタの代替方法

CodePenでは新しい「2.0エディタ」への移行が進み、従来の「Classic Pen」をメニューから選択できなくなっています。

これまでClassic Penを使っていた方の中には、「以前と同じような画面で使いたい」と感じる方もいるのではないでしょうか。

この記事では、Classic Penで作成した過去のWorkを引き続き編集する方法と、2.0エディタをClassic Penに近い表示で使用する方法を紹介します。

Classic Penで作成した過去のWorkを複製する

Classic Penで作成した過去のWorkを引き続き編集したい場合は、WorkをForkして複製する方法があります。

「Your Work」画面から、Classic Penで作成した過去のWorkを開きます。

右下にある「Fork」をクリックします。

Workが複製されます。

Classic Penで作成したWorkをForkすると、複製したWorkをClassic Penの形式で編集できます。

過去に作成したWorkをもとに、新しいWorkとして編集したい場合にも便利です。

2.0エディタをClassic Penに近い表示にする

新しくWorkを作成する場合は、2.0エディタの「Minimal UI」を利用すると、Classic Penに近いシンプルな表示にできます。

2.0エディタ右上の「Controls」メニューを開きます。

「Editor Layout」で「Top」を選択し、「Minimal UI」をオンにします。

設定すると、エディタがClassic Penに近いシンプルなレイアウトになります。

Classic Penそのものに戻すことはできませんが、2.0エディタをすっきりした表示で使いたい場合に便利です。

埋め込みコードを取得する方法

Workを「Save」で保存すると、「Controls」メニューの右隣に「Share」メニューが表示されます。

「Share」をクリックし、「Embed」を選択します。

表示された埋め込みコードをコピーし、WebページのHTMLなどに貼り付ければ、CodePenのWorkをページ内に埋め込むことができます。

まとめ

CodePenの2.0エディタでは、従来のClassic Penをメニューから選択することはできませんが、目的に応じて次の方法を利用できます。

• Classic Penで作成した過去のWorkを編集したい → WorkをForkする
• 新しくWorkを作成し、Classic Penに近い表示で使いたい → 「Minimal UI」を利用する

Classic Penそのものに戻すことはできませんが、2.0エディタでも設定を変更することで、以前に近いシンプルな環境でCodePenを利用できます。