寒すぎてストーブにベッタリな四条せつなです。
皆さんは「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に貼り付け方も紹介！”でした！でわでわっ！
コメントを残す