Compass note

未踏の地へ踏み出すコンパス的エンジニアノート

CodePen の使い方とはてなブログへの埋め込み方を解説

"CodePen の使い方とはてなブログへの埋め込み方を解説"

プログラミングの解説記事を書く時に、HTML、CSS、jQuery をひとまとめで表示させたくなりますよね。

オンラインエディタの CodePen が無料で使えてかっこよく埋め込みできます。

"はてなブログでの CodePen の使い方を解説:かっこよい埋め込み"

この CodePen の使い方を解説します。

アカウント作成:CodePen は無料で使えます

"アカウント作成:CodePen は無料で使えます"

CodePen(codepen ioのサイト)にサインアップします

  1. CodePen の Webサイト にアクセスします。
  2. CodePen は無料で使えるので、サインアップ(アカウント登録)します。 "はてなブログでの CodePen の使い方:サインアップ" アカウントは、以下の 4 つでサインアップできます。
    • Twitter
    • GitHub
    • Facebook
    • Eメール "はてなブログでの CodePen の使い方:アカウント登録"
  3. サインアップが出来るとオンラインエディタのPenCodeが利用できるようになります。 "はてなブログでの CodePen の使い方:サインアップ完了"

アカウント作成:CodePen は無料で使えます

"アカウント作成:CodePen は無料で使えます"

サインアップできたら実際にコードを書いていきます。

HTML、CSS、JS の種類を選択する

HTML、CSS の種類を選択します。 [Settings] から Pen Setting へ進み、それぞれの種類を選択します。 はてなブログでのCodePenの使い方:コードの設定

HTML / CSS 学習者でよくわからない人は、

- HTML:None
- CSS:None

を選択しておけば OK です。

設定したら [ Save & Close ] で設定を保存します。

CodePen 上で HTML / CSS / JS のコードを書く

コードを書く準備が整ったので、HTML/CSS をそれぞれ書いていきます。

結果は下にリアルタイムで表示されます。

CodePen の使い方:はてなブログへのコピペで挿入

"CodePen の使い方(はてなブログへのコピペ方法)"

オンラインエディタとしてデザインの確認をすることに加えて、そのままはてなブログに挿入することもできます。

使い方はかんたんで、貼り付ける HTML をコピペで取得するだけです。

右下の [ Embed ] をクリック

"CodePen の使い方:Embed をクリック"

[ Copy & Paste Code ] でブログに適したコードをコピペします

推奨は「HTML(recommended)」になっています。 ただ、HTML 形式だとはてなブログProでAMP配信設定している場合は表示されませんでした。 なので、AMP配信しているこのサイトでは「iframe」で埋め込みしています。

"CodePen の使い方:iframeのCodeをコピペ"

結果は↓のように HTML、CSS、Result がクリックすると変わるように埋め込まれています。

    Amazonチャージ