CodePenで作成したページを大きいサイズで表示する

Penにはエディタが表示される

CodePenのShare > Copy LinkでコピーできるURLは、下記のようなエディタが表示されてしまいます。
コードを読んでもらいたい場合には良いですが、ページだけを見てもらいたい場合には少し邪魔ですね。

そこで、フルサイズビューのURLを発行する方法を紹介します。

フルサイズビューで表示する

ページ下部のOpen Live View in a New Windowボタンをクリックします。

ちなみにフリープランでは、Live ViewではなくFull Page Viewになります。

以下のようなフルサイズのビューが表示されます。

CodePenのヘッダーは残りますが、画面が大きく表示されます。
こちらのURLをコピーして、記事で利用しましょう。