【CODE PEN】ブログ上にプログラミングコードを綺麗に載せる方法

programming

See the Pen NONvzo by tami0525 (@tami0525) on CodePen.

こんな感じの綺麗なエディタ、よくみた事ありませんか?

これは、CODE PENと言うサイトで作成しています。

 

CODE PENへはこちらから

 

今回はこのCODE PENへの登録から、実際にワードプレスに載せるまでを解説していこうと思います。

 

たみお
たみお

初心者が初心者のために頑張って解説するよ!

スポンサーリンク

CODE PENへの登録

 

まずはCODE PENに登録です。無料で使えます。

 

アクセスするとこのようなトップページ画面になります。

ここの「Sign Up for Free」を押してください。

 

 

すると各種連携アカウントからのサインアップ、またはEメールからのサインアップを選択できます。

連携アカウントを持っている場合は、そちらからサインアップするのが楽です。

 

今回はEメールを使ってサインアップしていきます。

 

 

①「Sign Up with Email」を押すと、上記のような入力画面が現れます。

②上から、「名前」「ユーザー名(任意)」「Eメールアドレス」「パスワード(任意)」の順に入力していきます。

③「Submit」を押すと完了です。

 

 

すると、登録したメールに「登録しました!」と言う諭旨のメールが届きます。

また、画面上ではプロフィール入力画面に移ります。

 

たみお
たみお

特に入力しなくても使えるので、今回はスルー。

入力したい人はしてください!w

終了するには「Save & Continue」を押してください。

 

 

はい!これで登録は完全に完了しました!

「サンプルでエディターを使ってみよう」と言うチュートリアルが始まるので、初めての方は流れに沿って「Let’s Go!」を押してください。

チュートリアルをスルーする場合は、下の「I’d rather not take the tour right now」を押してください。

 

スポンサーリンク

エディターに書いて出力する

 

これまでの流れで、CODE PENの登録が完了しました。

次は、エディターにコードを書き、出力するまでの流れを書きたいと思います。

 

チュートリアルが終わるとこの画面になります。

HTML、CSS、JSのエディタがあるので、ここに書きたいコードを書いていきます。

今回は簡単に、HELLO WORLDを出力しようと思います。

 

 

書き終えると、下にHELLO WORLDが表示されました。

 

たみお
たみお

通常のテキストエディタを使っている感覚なのでとても簡単にできます!

 

出力ができたら、上にある「Save」を押して保存しましょう。

 

スポンサーリンク

ブログにエディタ画面を挿入する

 

ではここから、自分のブログにエディタ画面を貼り付けるまでを書きます。

 

 

先ほどの画面の下にあるタブから、「Embed」を押します。

 

すると、エディタのコード画面が現れます。下にスクロールするとコードが表示されているので、その部分を全てコピーします。

 

 

あとはワードプレスの投稿画面へ行き、「テキスト」に切り替えます。

ここの貼りたい場所に、先ほどコピーしたコードをペーストすれば完成です!!

 

たみお
たみお

手順を覚えれば、割と簡単にできますね!

以上が、CODE PENのエディタをブログに貼り付けるまでの手順です。

皆さんも頑張って作ったコードを、ぜひみんなに見せびらかしましょう!

コメント