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

WordPressにどうやって貼り付けるの?
って、言う人も多いと思います。
ということで、「CodePen」の”登録〜使い方〜WordPressに貼り付け”まで、紹介してきますね。
CodePenとは
使い方を紹介する前に、「CodePen」について少し紹介していきますね。

似たようなサイトとして、「GitHub」を使っているのではないでしょうか ?大体、似たようなサイトだと思ってもらえればOKです。(厳密に言うと、違うようなのですがブログ用途だと、どっちも一緒です。)
CodePenでの表示
「CodePen」はこう表示されるよ!プレビュー表示できるのが特徴!
GitHubでの表示
「GitHub」ではこんな感じ!シンプルですね!
どちらも使いやすいんですが、ブログでコードを紹介するなら、「CodePen」の方が便利が良いかもですね!
CodePenの登録方法
ちょっと前置きが長くなってしまったけど、これから「CodePen」の登録方法を解説してきます。
▼まずは「CodePen」にアクセス。
▼画面右上にある、「Sign Up」をクリック。

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

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

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

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

CodePenの使い方
ここまでで「CodePen」に登録完了していると思います。なので、ここからは「CodePen」の使い方を紹介します。
▼トップ画面に戻り、右上の「Create」をクリック。

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

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


ちょっとアドバイスとしたら、キリの良いとこで逐一”セーブ”をするようにしようっ
「CodePen」の良いところは、Javaを扱えることもそうですが、“グラフィカルにプレビューできる”ところだと思います。そのおかげで、「CodePen」上でコーディング作業がある程度完結できると思います。
CodePenをWordPressに貼り付ける方法
WordPressで「CodePen」でコーディングしたものを、貼り付けたいときがあると思います。なので、その方法を解説していきますね。
▼コーディングが終わったら、下の「Embed」をクリック。

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

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

そのメリットとは、“グラフィカルでユーザーが分かりやすい”ということと、“軽量である”ということです。
「CodePen」は、デモを見てもらったと思うのですが、コードの結果をプレビューしてくれます。だから、読者さんも即座に結果がわかるんです。これって、ユーザーフレンドリーですよね。
そして、「SyntaxHighlighter Evolved」というプラグインをお使いの人なら分かると思うんですが、このプラグインはちょっと”重い”んですよね…。それに比べて、「CodePen」はプラグインを使わずに埋め込みができるので、ページを軽量にできるんです。

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

ということで、“「CodePen」の使い方&登録方法!WordPressに貼り付け方も紹介!”でした!でわでわっ!
コメントを残す
コメントを投稿するにはログインしてください。