自宅で学べるオンラインのプログラミングスクール 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
コードが完成したら、画面右下の「Embed」をクリックします。
「Embed」をクリック
「WordPress Shortcode」をクリックし、コードをコピーします。
「WordPress Shortcode」をクリックし、コードをコピー
WordPressの記事投稿からコードを貼りつけます。
「投稿」>「新規追加」>「ビジュアル」
コードを貼りつけ
次のように表示されます。
プラグインを使わずWordPressサイトにCodePenのコードを貼り付ける方法
プラグインを使わず貼り付けたい場合、コードをコピーする画面で「HTML」からコピーし、
WordPressの投稿画面では、「ビジュアル」ではなく「テキスト」に貼り付けます。
