はてなブログにCodePenを埋め込む - ITエンジニア勉強ブログ

CodePenは、ブラウザ上で書いたコードをそのままプレビューでき、それをWebで共有もできたりする有名サービスです。

See the Pen
CodePen Sample by Imai (@imai1)
on CodePen.

この記事では、CodePenで作成したPen（コードのこと）をはてなブログで共有する方法を紹介します。

自分で作成したコードをCodePenに保存するにはアカウントの開設が必要です。有料プランもありますが、基本的な機能は無料で使用できます。

まずはCodePenのWebサイトにアクセスします。

画面の右上の「Sign Up」からアカウントを登録することができます。登録には、メールアドレスか、Twitter, GitHub, Facebookのアカウントが必要です。

アカウントの準備が完了したらログインしましょう。

画面左のメニューの「Pen」ボタンを押すと、Penのコーディング画面が表示されます。

あとはここに好きなコードを書いていきましょう。

左上の「Untitled」をクリックして編集すれば、このPenを管理するための名前を変更できます。上部中央の「Save」ボタンでPenを保存できます。

Penを外部のWebサイトで表示するには、CodePenが用意した共有用タグを表示側サイトに貼り付ける必要があります。

まずは、Penの作成画面の右下に小さく置いてある「Embed」というボタンをクリックしてください。

「Embed」を押すと次の画面が表示されます。

この画面の右下のタグが共有用のリンクです。

はてなブログにPenを埋め込むには、ブログ編集時に「はてな記法」モードを選択して、表示したい場所にタグをコピー＆ペーストしてください。