【2017年版】”CodePen”の使い方&登録方法!WordPressに貼り付け方も紹介!

”CodePen”の使い方&登録方法!WordPressに貼り付け方も紹介!
スポンサーリンク

寒すぎてストーブにベッタリな四条せつなです。

皆さんは「CodePen」をご存知ですか?Web上でコーディング&確認作業ができる、便利なサービスです!特にソースコードをWordPressで貼り付けたい人に、よく使われているイメージです。

ただ、

四条ねこ
登録方法や使い方が分からないー!
WordPressにどうやって貼り付けるの?

って、言う人も多いと思います。

ということで、「CodePen」の”登録〜使い方〜WordPressに貼り付け”まで、紹介してきますね。

CodePenとは

使い方を紹介する前に、「CodePen」について少し紹介していきますね。

四条ねこ
「CodePen」とは、HTML・CSS・JavaScriptをコーディング&プレビュー表示できるサイトのことです。

似たようなサイトとして、「GitHub」を使っているのではないでしょうか ?大体、似たようなサイトだと思ってもらえればOKです。(厳密に言うと、違うようなのですがブログ用途だと、どっちも一緒です。)

CodePenでの表示

「CodePen」はこう表示されるよ!プレビュー表示できるのが特徴!

GitHubでの表示

「GitHub」ではこんな感じ!シンプルですね!

どちらも使いやすいんですが、ブログでコードを紹介するなら、「CodePen」の方が便利が良いかもですね!

CodePenの登録方法

ちょっと前置きが長くなってしまったけど、これから「CodePen」の登録方法を解説してきます。

▼まずは「CodePen」にアクセス。

CodePen

▼画面右上にある、「Sign Up」をクリック。

画面右上にある、「Sign Up」をクリック。

▼画面右の「Join CodePen Free」をクリック。

画面右の「Join CodePen Free」をクリック。

登録する”自分の名前”と、”アカウント名”を決めてください。それと、ここで”メールアドレスの入力”と、”パスワードを決める”ことになります!

登録する"自分の名前"と、"アカウント名"を決めてください。それと、ここで"メールアドレスの入力"と、"パスワードを決める"ことになります!

▼ここでは何も入力せず、「Save & Continue」をクリックして次へ。

ここでは何も入力せず、「Save & Continue」をクリックして次へ。

これで登録完了です。お疲れ様でした!

四条ねこ
どうやらちょっとずつ仕様変更してるから、最新版の登録方法をよーく確認しようっ!

CodePenの使い方

ここまでで「CodePen」に登録完了していると思います。なので、ここからは「CodePen」の使い方を紹介します。

▼トップ画面に戻り、右上の「Create」をクリック。

トップ画面に戻り、右上の「Create」をクリック。

▼ポップアップしたウインドウ内の、「New Post」をクリック。

ポップアップしたウインドウ内の、「New Post」をクリック。

▼あとは好きなようにコーディング!

あとは好きなように「CodePen」でコーディング!
四条ねこ
めっちゃグラフィカルだから、コーディングも簡単だよ!
ちょっとアドバイスとしたら、キリの良いとこで逐一”セーブ”をするようにしようっ

「CodePen」の良いところは、Javaを扱えることもそうですが、“グラフィカルにプレビューできる”ところだと思います。そのおかげで、「CodePen」上でコーディング作業がある程度完結できると思います。

CodePenをWordPressに貼り付ける方法

WordPressで「CodePen」でコーディングしたものを、貼り付けたいときがあると思います。なので、その方法を解説していきますね。

▼コーディングが終わったら、下の「Embed」をクリック。

コーディングが終わったら、下の「Embed」をクリック。

▼ポップアップウインドウの「iframe」をクリック。そうしたら、その下の表示されているソースコードを、WordPressの”テキストエディタ”の方に、コピペしてください。

CodePenをWordPressに貼り付ける

CodePenをWordPressで使うメリット

「CodePen」をWordPressで使いたいから検索してきたって、言う人も多いと思います。なので、最後にWordPressで「CodePen」を使うメリットを書いていきます。

四条ねこ
なんだろー?(茶番)

そのメリットとは、“グラフィカルでユーザーが分かりやすい”ということと、“軽量である”ということです。

「CodePen」は、デモを見てもらったと思うのですが、コードの結果をプレビューしてくれます。だから、読者さんも即座に結果がわかるんです。これって、ユーザーフレンドリーですよね。

そして、「SyntaxHighlighter Evolved」というプラグインをお使いの人なら分かると思うんですが、このプラグインはちょっと”重い”んですよね…。それに比べて、「CodePen」はプラグインを使わずに埋め込みができるので、ページを軽量にできるんです。

四条ねこ
無料版だとちょっと制限があるけど、そこさえ我慢するか、有料版にすればOKだもんね!

せつなのまとめ

「CodePen」は、WordPressをお使いでソースコードを披露したい人にとっては、打ってつけのサービスだと思います。もちろん、単純にコーディングをしたり、共有するのにも非常に優れているサイトだと思います。

四条ねこ
Webデザイナーなら抑えておきたいサービス、それが「CodePen」だねっ

ということで、“「CodePen」の使い方&登録方法!WordPressに貼り付け方も紹介!”でした!でわでわっ!

スポンサーリンク
”CodePen”の使い方&登録方法!WordPressに貼り付け方も紹介!

コメントを残す

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