【基本編】CodePenの登録方法と使い方、WordPress(Cocoon)への埋め込み方法を解説

CODE
のり
のり

フロントエンドの勉強をしているとCodePenでソースコードを書かれたサイトをよく目にします。他人のサイトで弄るだけではなく、自分のサイトに埋め込んで学習できたらなぁ。。。

そんな悩みに答えます!

本記事では、CodePenの登録方法と使い方、そして、このWordPressサイトで使用しているCocoonでの埋め込み方法を解説します。

CodePenとは?

CodePen(コードペン)とは、Webブラウザ上でHTML/CSS/Javascriptのコーディングが可能なWebサービスです。下記をご覧ください。

See the Pen codepen-01 by Nori (@ysnoritnk) on CodePen.

これは画像ではなく、CodePenが埋め込まれています。左側にHTML/CSS文書が書かれ、右側にHTML/CSSをブラウザが解析したWebページ上の表示結果が表示されています。

右上の「EDIT ON CODEPEN」ボタンを押すと、HTML/CSS/Javascriptのコードをお試しで編集することができます。(保存不可)

このように、CodePenでは以下のような機能があり、フロントエンドエンジニアには非常に便利なサービスとなっています。

CodePenでできること
  • Webブラウザ上でHTML/CSS/Javascriptのコーディングができる
  • リアルタイムにコーディングの表示結果が確認できる
  • HTML/CSS/Javascriptのコードを共有できる(サイトに埋め込める)
  • 共有されたコードは他人でもリアルタイムで編集ができる(保存は不可)

こちらは代表的なものだけを記載してますが、他にも機能はたくさんあります。

では、さっそく登録してみましょう!

CodePenの登録方法

まずは、CodePenのサイトにアクセスしてユーザー登録を行いましょう。

■CodePen
https://codepen.io

「Sign Up」ボタンをクリックしましょう。

ボタンを押すと、ユーザー登録画面に遷移します。ここでは、Emailでの登録をしたいと思います。「Sign Up with Email」をクリックしましょう。

クリックすると、以下のような欄が出てきます。

YOUR NAMEは、サイト内で表示されるユーザー名です。

CHOOSE A USERNAMEは、サイトで一意となるユーザー名、いわゆるアカウントIDです。既に登録されているものは使えないので、工夫しましょう。

EMAILPASSWORDを入力し、「Submit」ボタンを押します。

登録をおこなうとプロフィール設定の画面になりますが、そのままでも大丈夫です。「Save & Continue」をクリックしましょう。

すると、チュートリアルが始まりますので、観るかスキップをして、登録作業は完了です!

CodePenの使い方

CodePenは、オンラインコードエディタとして様々な機能が提供されていますが、一番ベーシックなPenというサービスをここでは説明します。

Penとは、以下のPicked PensにあるようにHTML/CSS/Javascriptでコーディングされた作品のことです。

Picked Pensには、各ユーザーの作品が公開されているのですが、初心者の僕にとっては、こんなことまでできるの?と目を疑ってしまうような作品も多々あり、非常に見ていて楽しいです!

それでは、さっそくPenを作成しましょう!左側のCREATE欄の中にある「Pen」をクリックします。

すると、以下のようなHTML/CSS/Javascriptのエディタが表示されます。

こちらにコードを記載してみましょう!画面下にリアルタイムで表示が更新されているのがわかるかと思います。

CodePenの記述について

CodePenのHTMLでは、head要素内を記述できません。body要素内のみ記述できます。

ちなみに、JavascriptじゃなくてjQueryで書きたい時には、画面上部の「Setting」ボタンを押して、以下の手順が必要です。

JavaScriptのAdd External Script/Pensの検索欄にjQueryを入力して選択すると、jQueryライブラリが参照されるようになります。ReactやVue.jsも同じです。

WordPress(Cocoon)での埋め込み方法

さて、それではWordPressサイトに埋め込んでみましょう!

「Save」を押すと、画面の最下部に「Embed」というボタンが出てくるのでクリックをします。

すると、埋め込み用のHTMLが表示されるのでこちらをコピーします。

WordPressのショートコードもありますが、推奨されているHTMLを選びましょう。HTMLで問題なく埋め込みはできます。コード欄をクリックしてコピーをしましょう。

ここからは、WordPressです。CocoonのブロックからフォーマットのカスタムHTMLを選択します。Cocoonではない方は、HTMLが入力できるブロックやエディタであれば問題ないかと思います。

HTMLを貼り付けて、プレビューに切り替えてみましょう。

このようにCodePenが表示出来ているかと思います。

See the Pen codepen-01 by Nori (@ysnoritnk) on CodePen.

まとめ

いかがでしたか?CodePenの登録方法と使い方、そして、このWordPressサイト(Cocoon)での埋め込み方法を紹介しました。

今日からCodePenを見るだけでなく、実際に活用する側になりましたね。今回はPenの基本しか記載していませんでしたので、興味がある方は色々と見てみてください。

また、書いたPenをPublicでなくPrivateにしたい方は有料会員になるとできます。他にも無料会員にはない機能など多数ありますが、正直無料会員で十分かと思います。どんどん公開していきましょう!

最後に、CodePenはフロントエンドエンジニアにとって強力なツールであることは間違いなしです!トライアンドエラーがこんなにも簡単にできるなんて最高じゃないですか。しかも、他の人のコードも参考にできるので、どんどん書いて成長していきましょう。

では!

注意

この登録方法は、2019年7月時点での登録方法になります。サイトアップデートされると画面が変わってしまうかもしれません。ご了承ください。

コメント

タイトルとURLをコピーしました