CodePen（コードペン）の登録方法

自宅で学べるオンラインのプログラミングスクール TechAcademy

CodePen（コードペン）の登録方法

CodePenとは？

CodePenとは、HTML、CSS、JavaScriptをプレビュー表示できるWebサービスです。
他のユーザーがCodePenで公開しているコードを自身のWebサイトに埋め込むこともできます。

CodePenでできること

• ブラウザ上でHTML、CSS、JavaScriptをプレビュー表示しながら編集
• コードのWEBサイトへの埋め込み
• コードの作成と公開
• コードのダウンロード
• お気に入り
• コレクション
• プライベートモード（有料会員の登録が必要）
• コメント機能
• 「Fork」してコードを編集

CodePenの登録方法

CodePenにアクセスし、「Sign Up」（サインアップ）をクリックします。

CodePenにアクセスし、「Sign Up」（サインアップ）

プランの選択画面が開くので「Join CodePen Free」をクリックします。

「Join CodePen Free」をクリック

フォーム

• YOUR NAME：名前
• CHOOSE A USERNAME：ユーザーネーム
• EMAIL：メールアドレス
• CHOOSE PASSWORD：パスワード

を入力し、「私はロボットではありません」にチェックをいれ「Submit」をクリックします。

フォーム入力

プロフィールの入力画面が開きます。
内容は空欄ままでいいので、一番下の「Save&Continue」をクリックします。

「Save&Continue」をクリック

HTML、CSS、JSの入力画面に移動します。以上で登録は完了です。

codepenの登録完了

CodePenのログイン方法

CodePenにログインするには、CodePenにアクセスし、画面右上の「Log In」（ログイン）をクリックします。

「Log In」（ログイン）をクリック

ログイン画面が表示されます。ログイン方法は４通りです。

• メールアドレスでログイン
• GitHubアカウントでログイン
• Twtterアカウントでログイン
• Facebookアカウントでログイン

ログイン画面

CodePenの使い方

CodePenの画面の見方

上部にHTML、CSS、JSの入力画面があり、下には、プレビューが表示されます。

CodePenの画面の見方

表示ビューの変更方法

表示ビューは変更できます。
変更するには、右上の「Change View」 をクリックし、３種類のレイアウトから選択します。

表示ビューの変更方法

作成したコードをWebサイトに貼り付ける方法

CodePen上で作成したコードをWebサイトに貼り付けることができます。
今回はWordPressサイトに貼り付ける手順を説明します。

プラグインを使ってWordPressサイトにCodePenのコードを貼り付け方法

事前準備としてプラグインをインストールします。Plugin Name: CodePen Embedded Pens Shortcode — WordPress Plugins

Plugin Name: CodePen Embedded Pens Shortcode

https://wordpress.org/plugins/codepen-embedded-pen-shortcode/

Allows the use of a special shortcode for embedding Pens from CodePen.

WordPress.org

コードが完成したら、画面右下の「Embed」をクリックします。

「Embed」をクリック

「WordPress Shortcode」をクリックし、コードをコピーします。

「WordPress Shortcode」をクリックし、コードをコピー

WordPressの記事投稿からコードを貼りつけます。
「投稿」>「新規追加」>「ビジュアル」

コードを貼りつけ

次のように表示されます。

プラグインを使わずWordPressサイトにCodePenのコードを貼り付ける方法

プラグインを使わず貼り付けたい場合、コードをコピーする画面で「HTML」からコピーし、
WordPressの投稿画面では、「ビジュアル」ではなく「テキスト」に貼り付けます。