wordpress

【CODEPEN(コードペン)を使おう!】|WordPressにソースコードを埋め込んでプレビュー表示する方法

pen

CODEPEN(コードペン)とは

以下のようにWebブラウザ上でHTML/CSS/JavaScriptをプレビュー表示できるWebサービスです。
かんたんに、コードの共有やプレビュー表示ができちゃいます。

いちごぱんつ
いちごぱんつ
以下「コピペでできる、シンプルでオシャレなボタンデザイン」でも使ってるね!

【CSSだけ!】|コピペでできる、シンプルでオシャレなボタンデザイン

See the Pen
zYrBaaW
by Siroari (@ichigo-pantsu)
on CodePen.

ソースの共有に便利!なCODEPENの登録方法

CODEPEN

1.まずは「Sign UP」よりCODEPENの登録を行います

SignUPSignUP

2.「Sign Up with Email」からメールアドレスで登録します

Sign Up with EmailSign Up with Email

3.アカウント情報を入力し、「Submit」で登録

AccountAccount
  • Your Name:氏名
  • Choose a username:ユーザー名
  • Email:メールアドレス
  • Choose Password:パスワード

さっそくCODEPENを使ってみよう!

いちごぱんつ
いちごぱんつ
アカウントの登録が終わったら、さっそく使ってみよう★

1.メインメニュー左上の「Pen」から編集画面に移動

useuse

2.タイトル、HTML、CSS、JSなどを記述してプレビューを確認しよう

htmlソースなどを記述すると、画面最下部にプレビュー表示されます。

EditEdit

作ったコードを保存してみよう!

1.作ったコードは「Save」ボタンで保存

SaveSave

WordPressにCODEPENを埋め込もう!

1.画面右下の「Embed」ボタンをクリック

EmbedEmbed

2.下部「Copy&PasteCode」にある埋め込みコードをコピー

CopyCopy

3.WordPressの編集画面にそのままペースト

WordPressWordPress
いちごぱんつ
いちごぱんつ
これでWordPressにCODEPENの埋め込みが完了だよ!!