Debriefing [デブリーフィング]

Debriefing [デブリーフィング] はHTMLやCSSやデザインなどのWeb制作に関することや、仕事を効率化する方法や生活に役立つHow Toを発信します。

書いたコードを共有できるCodePenの登録方法と使い方とブログの貼付け方

書いたコードを共有できるCodePenの登録方法と使い方とブログの貼付け方

ブログやWordPressに書いたコードを貼り付けたい、書いたコードをその場でプレビュー表示させたい。そんな要望を叶える便利なWebサービスが、CodePen(コードペン)です。

今回はCodePenの登録方法、使い方、ブログやWordPressへのコードの貼付け方法について紹介します。

 

目次

CodePen(コードペン)とは

CodePenとはHTML・CSS・JavaScriptをブラウザ上のエディタに書いて、ブラウザ上でレイアウトや動きを確認したり、書いたコードをCodePenユーザーと共有したり、ブログやWordPressなどに貼り付けて見せることができる、とても便利でスタイリッシュな海外のWebサービスです。

対応している言語はHTML・CSS・JavaScriptのフロントエンド側で使用する言語のみですが、設定を変更すればSCSSなどのCSSのプリプロセッサーなども書くことできます。

基本的に無料で使用することができますが、有料プランに申し込みすると書いたコードを非公開モードに切り替えたり、プロジェクト数の上限をアップしたりすることができます。

CodePenの登録方法

CodePenの登録方法

CodePenは英語でサイトが作られていますが、英語が分からなくても登録方法は簡単です。

CodePenのトップページを開いたら、画面左下の「Sign Up」をクリックします。

CodePen登録方法は4つ
登録方法はTwitter、Github、FacebookのSNSアカウントと、メールアドレスでの4つの登録方法があります。

メールアドレスで登録する場合はメールアドレスとパスワードを入力するだけで登録することができます。登録が完了するとCodePen上で使うユーザーネームを入力することになるので、好きなユーザーネームを登録してください。ちなみにユーザーネームは後から設定画面で変更することが可能です。

 

CodePenの使い方

CodePenの使い方

CodePenの使い方について説明します。

これがCodePenのダッシュボード画面です。ダッシュボード上には世界中のCodePenユーザーが投稿したコードを自由に閲覧することができます。閲覧したものを見ると外国人ユーザーが多い印象です。

コードを書きたい場合は画面左の「Create」ボタンをクリックすると「Pen」というメニューが表示されるのでここを選択します。

CodePenのコードを書く画面

これがコードを書く画面です。順番に画面の内容を説明します。

①タイトル名

書いたコードのタイトル名を入力できます。

②保存ボタン

書いたコードを保存できます。

③設定ボタン

Penの公開設定やインデントの間隔、HTML・CSS・JavaScriptの言語設定などができます。

④HTML

HTMLを書くエリアです。

⑤CSS

CSSを書くエリアです。

⑥JavaScript

JavaScriptを書くエリアです。

⑦プレビュー

HTML、CSS、JavaScriptを書いた内容が反映されるエリアです。画面の領域を狭めればスマホ表示も確認できます。

⑧コード貼付け

書いたコードをWordPressなどのブログに貼付けるための設定ができます。

CodePenのPen設定画面

CodePenのPen設定画面

設定ボタンを押すと、公開設定を非公開モード(有料プラン)に切り替えることができます。

またHTML・CSS・JavaScriptごとに設定パネルが分かれています。

例えばCSSのバネルではSCSSなどのプリプロセッサーはどれを使うか、ベースとなるCSSはNormalizeCSSを使うか、ResetCSSを使うか、ベンダープレフィックスをつけるかどうかなどを設定することができます。

CodePenで書いたコードをブログやWordPressに貼り付ける方法

CodePenで書いたコードをブログやWordPressなどに貼り付ける方法を説明します。まずは書いたコードを「保存ボタン」を押して保存します。次に画面下に表示されている「Embed」というボタンをクリックします。

CodePenで書いたコードをブログやWordPressに貼り付ける方法

すると貼付け方法を選択できる画面が表示されます。

WordPressのショートコードで貼付けたり、iframeで貼り付けたり、HTMLコードで貼り付けたり、貼り付け方法を選択できるので、好きな貼付け方法を選択してください。

貼付け方法を選択したら貼付け用のコードが表示されるので、それをコピーしてブログやWordPressの投稿画面に貼り付ければCodePenの内容をサイトに貼り付けることできます。

↓↓こんな感じです。

See the Pen テスト by tak-kun (@tak-kun) on CodePen.