0

“codepen”の登録方法から自分のサイトに埋め込む方法

"codepen”の登録方法から自分のサイトに埋め込む方法

自分のブログなどで、サンプルコードとその結果を表示して解説することがありますが、ツールとして便利な「CodePen(コードペン)」を使用してみたのでご紹介します。

実際に「CodePen」を利用してみて HTML、CSS、JavaScript などを利用したコードと、その結果を一目で確認できる仕様がとても便利でしたので、その感想含めて解説していきたいと思います。

CodePenのメリット

サイト上で何かをしたいと思っている人は、検索からヒットして自身のWebサイトやブログを閲覧してくれています。何かを解決したいという人に対して、その解決策となる「How to」を記述して説明をしますが、実際の「記述とプレビューが別々のページになってしまっている」ことが良くあります。

mororeco も簡単なプレビューであれば、画像を掲載して「こうなりますよ~」って感じで解説していますが、実際のところ「コードとプレビュー」が別物であるというちょっとした距離が現実味を薄めてしまっているなぁと感じます。mororeco では今のところ、デモはページで見れるようにしていますが、このCodePenを利用することにより、コードとプレビューを一画面でお見せできるので、内容にもよりますが解説が可能なものについてはCodePenで表示してみようと思います。

前置きが長くなりましたが、それではCodePenについて見ていくことにしましょう。

CodePenとは

CodePenは、HTML・CSS・JavaScriptをプレビュー表示しながら作業ができるWebサービスのひとつです。また、記述したコードをWEBサイトに埋め込んだり、WordPressで貼り付けたりすることも可能です。さらには、自分書いたコードだけでなく、他の人が打ち込んだコードも表示ができる優れもの。

CodePen

CodePenでできること

主に以下のようなプレビュー機能や埋め込み公開などが、簡単に出来るのが特徴です。

  • ブラウザ上でHTML、CSS、JavaScriptをプレビュー表示しながら編集
  • コードをWEBサイトに埋め込む
  • コードの作成と公開

登録方法

まずはじめに、CodePenを利用するには会員登録が必要となっています。(※無料で利用可)
CodePenにアクセスし、中央にある緑色の「Sign Up」をクリックしてください。

Sign Up

Choose a Plan から一番左の「free」の枠の「Sign Up」をクリックします。

free

Free -Welcome to CodePen.-のフォームに以下の4項目を記入してください。

  • YOUR NAME(名前を記入)
  • CHOOSE A USERNAME(ユーザーネームを記入)※任意で名前をつける
  • EMAIL(メールアドレスを記入)
  • CHOOSE PASSWORD(パスワードを記入)

 

registration

すべての項目を入力したら「Submit」ボタンをクリックします。
その後、Thanks for signing up, ・・・の画面が表示されますが、フォームには何も記入せずに「Save & Continue」ボタンをクリックします。

これで、登録は完了です!

登録が完了したら実際にログインして利用していきます。

ログイン

トップ画面の左下「Log In」をクリックしてログイン画面を表示します。

ログイン

USERNAME OR EMAILに、先ほど登録した「ユーザーネームまたはメールアドレス」を入力、PASSWORDに「パスワード」を入力し「Log In」します。

CodePenの使い方

会員登録が完了したら、トップ画面の左カラムにある「Creat」ボタンをクリックし「Pen」をクリック。※CodePenでは、ひとつのプロジェクトを「Pen」と呼んでいます。

すると下画像のような画面が開かれます。左側が「HTML」、中央が「CSS」、右側が「JavaScript」の入力画面です。

そして、画面下にはコードのプレビュー表示がされ、プレビュー表示を見ながらコードを書ける仕様になっています。

untitled

新たに作成したPenに名前を付けましょう。デフォルトでは「Untitled」になっていますので、”ペンのマーク”をクリックし「名前」を付けます。

name

ここまで確認できたらひとまず「Save(保存)」しておきましょう。画面上部の雲のマーク「Save」が保存ボタン。

save

画面表示の切り替え

右上にある「Change View」というボタンで、画面の配置を変えることができます。横に並べたり、縦に並べたりはお好みで切り替えてご利用ください。

表示切替

コードをWebサイトに埋め込む方法

CodePenで作成したコードを、自身のWebサイトに埋め込むには、書いたコードを「Save(保存)」して、右下に新たに表示された「Embed」をクリックします。
 
embed
 
「Embed This Pen」画面が表示されますので、右下のタブにある「HTML(recommended)」をクリックすると、下の「Copy & Paste Code」が表示されますので、コピーをします。そのコードを自身のWebサイトで使用するファイルのHTMLコードにペーストすれば表示されます。
 
HTML
 

コードをWordPressに貼り付ける方法(プラグインなし)

自身で管理しているWordPressの投稿画面で、コードを「テキスト」で表示してから、先程コピーしたコードをそのまま貼り付ければ、ページ内に表示されます。
 
プラグインなしの場合
 

コードをWordPressに張り付ける方法(プラグインを利用)

WordPressのプラグイン新規追加画面から「Plugin Name: CodePen Embedded Pens Shortcode」をインストールし、有効化してください。
 
shortcode
 
先程、作成した「コード」の「Embed This Pen」画面が表示されたら真ん中下にあるタブ「WordPress Shortcode」をクリックし、PasteCodeをコピーします。
 
WordPress Shortcode
 
そして、WordPress投稿画面の今後は「ビジュアル」を選択し該当箇所にペーストしてください。
 
プラグインを利用する場合
すると、ページ内に以下のように表示がされます。
 
preview
 
簡単ではありますが、登録方法と使い方でした。有料版も含めると様々な機能があるようなので、もう少し突っ込んだ機能がありましたら改めてご紹介させていただきたいと思います。
 

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > TOOL > “codepen”の登録方法から自分のサイトに埋め込む方法