【CodePen】WordPressで記事の中にソースコードと結果を埋め込む

See the Pen
JVgoLW
by BANAO (@BANAO)
on CodePen.

CodePenを使うと、上のようなhtml、css、jsのソースコードと実行結果を表示することができます。

CodePenへ

上のリンクからCodePenのページまでアクセスします。
利用するためにはアカウントが必要なので、初めての方はアカウント作成を行いましょう。Eメールだけでなく、TwitterやGitHubのアカウントから登録することもできます。

チュートリアルを終えるとこのような画面になります。

また、詳細設定は右上アイコンのSettingから変更することができます。

ソースコードを書いたら右上の「Save」を押します。

次に、下に現れた「Embed」を押すと下のような小ウィンドウが現れます。


この画面下部にある、「iframe」や「HTML」タブにあるスクリプトをコピー、WordPressの編集画面にペーストすると一番上にあるようなソースコードの埋め込みができます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です