Codepen(コードペン)をWordPress記事内に埋め込む方法【コード紹介に便利】

Webの技術ブログにデモページが用意されているととわかりやすいですよね。

しかし、投稿する側からすると、記事ごとにデモページを作るのはなかなか手間のかかるもの。

そこで、Codepenというサービスを導入するのがおすすめです。

この記事では、CodepenをWordPressに埋め込む方法を紹介します。

Codepenとは?

See the Pen
flex-sample
by spiqa design (@spiqa_design)
on CodePen.

Codepenのことをさらっと説明しておくと、Webブラウザ上でHTML/CSS/Javascriptのコーディングができるサービスです。

上のように、記事に簡単に埋め込むことができるので、ブログなどで幅広く活用されています。

また、リアルタイムでコードをプレビューすることができるので、気軽にコーディングしてみたり、自分のコードをストックする場所として活用してもいいですね!

まずはCodepenを使ってコードを書こう

まずは、Codepenを使ってコーディングしてみましょう。

自分のCodepenアカウントにログインします。

■CodePen公式サイト
https://codepen.io/

右上の[Log In]をクリック。
※アカウントを作成していない場合は[Sign Up]でアカウントを作成します。

ログイン情報を入力してログインします。

ログインすると、トップページが表示されます。

Codepenにはさまざまなサービスがありますが、上述した「Webブラウザ上でHTML/CSS/Javascriptのコーディング」できるのは「Pen」というサービスです。

Penとは、コーディングして作った作品のことを指します。

[Pen]をクリックします。

[Pen]の中に入ると、ブログでよく見かけるエディター画面が表示されます。

ここで自由にコーディングすることができ、自分のPen(作品)を作ることができます。

左上で作品に名前を付けることができます。今回は「flex-sample」としました。

コードを書き終わったら、画面上部にある[Save]をクリックして保存します。

CodepenをWordPressに埋め込む

これで自分のPen(作品)を作ることができました。
ついに、このPenを記事に埋め込みます。

すごく小さいですが、右下の[Embed]をクリックします。
※[Save]していないと表示されないので注意。

[Embed]をクリックするとウインドウが表示されます。
下部の[HTML(Recommended)]のコードをコピーします。

上記でコピーしたコードをWordpressのエディターに貼り付けます。

ブロックの選択で「カスタムHTML」を選択し、入力欄に貼り付けてください。

何も問題がなければ、下のようにCodepenが記事に埋め込まれます。

See the Pen flex-sample by spiqa design (@spiqa_design) on CodePen.

まとめ

Codepenはブログを書く側にとっても、見る側にとっても、便利なWebサービスです。

無料会員でも十分に活用できるので、まずは気軽に利用してみてください。

関連記事

  • 2021.09.10

    JavaScriptの基礎をスピーディーに学べる!初心者におすすめの教本を紹介

    JavaScript

  • 2021.08.31

    超簡単!Wordpressにヒートマップを導入する方法

    WordPress

  • 2021.08.24

    現場で使える!WordPressおすすめ書籍(書評)

    WordPress

おすすめ記事

  • 2021.08.31

    超簡単!Wordpressにヒートマップを導入する方法

    WordPress

  • 2021.05.24

    初心者でもすぐに使えるjQueryが満載なおすすめ本【書評】

    JavaScript

  • 2021.07.29

    【おすすめ書籍】一冊で固められる基礎!超欲張りな参考書

    CSS

    HTML5

    JavaScript

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!