CodePenのコードをブログに埋め込む(貼り付ける)方法

CodePenのコードをブログに埋め込みたいけど方法忘れてしまった…

本記事ではそんな悩みを解決します!

私もよく忘れるので自分の備忘録の為にも作成しました。

もくじ

まずはCodePenから埋め込み用コードをコピーします

埋め込みたいコードを開き、右下にあるEmbedをクリックします

クリックすると設定画面が表示されます。

表示内容(Resultのみか、HTML、CSSを表示するか)や
色(LightかDarkか)を選択し、

最後にCopy Codeをクリックします。

これでCodePenでの作業は完了です。

ブログ記事に埋め込む

ブログへの埋め込みも簡単です。

埋め込みにはカスタムHTMLを使用します。

入力するとき「/(スラッシュ)」を入力すると直近使用したものや検索ができて便利です。

ここにコピーしたCodePenのURLを貼り付けます。

プレビューを押して正しく表示されていれば完了です。

まとめ

CodePenのコードをブログに埋め込む方法をよく忘れるので自分用にメモしました。

特にCodePenでEmbedがコピーの入口であること、

ブログへの埋め込みはカスタムHTMLであることをよく忘れます。

もくじ