【図解】CodePenの登録方法とWordPressサイトへの埋め込み方法を解説

プログラミング

おはこんばんにちは!ノボルです。

技術ブログとかみてたら「CodePen」ってツールを見かけるんだけど、あれどうやって使うの?

WEBエンジニアやWEBデザイナーにとっては必須のツールだね。登録方法から使い方まで解説するよ!


そこで今回は、CodePenの登録方法とWordPressサイトへの埋め込み方法をわかりやすく解説します!

こんな人に読んでほしい

・CodePenとは何か知りたい人

・CodePenの登録方法を知りたい

・CodePenを使ってWordpressにコードを貼りたい人

CodePenとは?

CodePen」とは、ブラウザ上でHTML・CSS・Javascriptのコーディングができるコーディングサービスです。

変更を加えるとすぐにプレビューに反映されるので、リアルタイムにコーディングできるのが特徴です。

CodePenの主な機能

・WEBブラウザ上でコードをリアルタイムでプレビュー

・コードを公開・共有する

・プレビュー画面をWebサイトへ埋め込む

・他の人が書いたコードを編集する

・いいねなどのSNS機能


CodePenのいいところは、ブログやWebサイトでコードのプレビュー表示を公開・共有できることです。

なので、WebエンジニアやWebデザインーにとっては非常に便利なツールなのです。

CodePenの登録方法

CodePenの登録方法を解説していきます。
(すでに登録しているという方は、次の目次に進んでください)

CodePen」 にアクセスしてください。

ページ右上の[Sign Up]をクリックしてください。


SNSで登録する方法Eメールで登録する方法の2つがあります。
ここでは、Eメールで登録します。[Sign Up with Email]を選択してください。


登録画面が開くので、各フォームに必要な情報を記入し、[Submit]をクリックしましょう。


詳細な設定画面が表示されますが、後で設定できるので、今回は飛ばします。
[Save & Continue]をクリックしましょう。


登録が完了すると、チュートリアルに進むかどうか聞かれますが、ここではスキップします。
I’d rather not take the tour right now]をクリックしましょう。


ついにエディター画面が開きました!

以上で登録は完了となります。お疲れ様でした(*^^*)

WordPressサイトにコードを埋め込み方法

CodePen」 にアクセスし、ログインしてください。
(今新規登録した人は、エディター画面を開いたままにしてください)

CodePenでコーディングする

CodePenのサイト右上にある[Pen]をクリックしてください。


エディター画面が開くので、HTML/CSS/Javascriptをコーディングしてください。
終了したら、ページ右上にある[Save]をクリックしてください。


するとページ右下にいくつか項目が表示されるので、[Embed]をクリックしましょう。


貼り付けコードが生成されるので、[Copy & Paste Code]にあるコードをコピーしましょう。

WordPressサイトへの埋め込む

WordPressの記事編集画面などで、先ほどコピーしたコードを貼り付けましょう。
もちろん、他のブログサービスでも可能です。


WordPressサイトにCodePenのコードを埋め込みことができました!

Webページに埋め込まれたCodePenの見方

最後に、Webページに埋め込んだCodePenのプレビュー画面の見方を解説します。

See the Pen wvBydmO by monkey d ruffy (@ruffy126) on CodePen.

左上のバーにある「HTML」や「CSS」を選択することで、言語を切り替えることができます。

Result」には、HTML/CSS/Javascriptでコーディングした実行結果が反映されます。

また、右上の「Edit on CodePen」をクリックすると、CodePenのサイトから他の人が書いたコードを自由に編集したり、その実行結果を見ることができます。

最後に

今回の記事では、CodePenの登録方法とWordPressサイトへの埋め込み方法を解説しました。

CodePenは、ブログやWebサイトでコードのプレビュー表示を公開・共有することができるので、WebエンジニアやWebデザインーにとっては欠かせないツールです。

この記事を読んでいるあなたも、是非CodePenを使いこなしてください!

最後まで読んで頂き、ありがとうございました(o^^o)

【初心者向け】Chromeの検証機能(デベロッパーツール)の使い方【プログラミング】
おはこんばんにちは!ノボルです。Google Chromeには、Web制作で大活躍するデベロッパーツール(検証機能)という便利なツールが備わっています。僕も、ウェブサイトを作るときやカッコいいサイトを見つけたときに、コードを確認たり一時的に...
【初心者必見】プログラミングのエラーを解決する4つの方法【基本ググればOK】
おはこんばんにちは!ノボルです。 最近プログラミングの勉強してるんだけど、エラーが全然解決できないよ〜(>_<) 初心者からしたらホント頭痛の種だよね(笑)。参考までに、僕が使っているプログラミングのエラーを解決する方法をいくつか教えるよ。...
【プログラミンング】初心者でもコピペで使える!HTMLの簡単テンプレート
おはこんばんにちは!ノボルです。 HTMLの勉強をしてるんだけど、毎回同じコード打ち込むのめんどくさいよ〜。笑 だったらテンプレートあげるから使うといいよ! そこで今回は、初心者でもコピペで使えるHTMLの簡単テンプレートを紹介します。新規...

コメント

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