【WordPress】『CodePen』を使ったソースコード掲載が便利です。【使い方を画像つきで紹介】

CodePen(コードペン)』を実際に記事内で使ってみる方法についてです。

まず前提ですが、

CodePen(コードペン)』とは、ソースコードを簡単に共有できるWebサービスです。

利用すると、⬇のような感じで「ソースコード」と「その結果」を埋め込むことができます。

See the Pen
xxRMEoQ
by daniel__blog (@daniel__blog)
on CodePen.

すごく見やすいですよね。

見やすいだけでなく、『CodePen』には下記のメリットもあります。

  • ブログやWebサイト内に簡単に埋め込むことができる!
  • 書いたコードがリアルタイムで反映される!
  • 基本的に無料で使える!

上記のとおりです。

僕もブログの各記事内で使っています。とても便利です。
使い方も簡単なので、実際にブログ等に埋め込む方法をご紹介しますね。

この記事を書いている僕は、Wordpress歴1年ほど。
カスタマイズしながら、楽しくブログ生活を送っています。

CodePenを記事内に埋め込む方法

まずは、ページにソースコードを表示するまでの全体の流れをお見せします。

設定方法の流れ

以下の流れで設定できます。

  • 手順①:『CodePen』に登録する
  • 手順②:「Pen」をクリックする
  • 手順③:ソースコードを記述する
  • 手順④:保存する
  • 手順⑤:「Embed」をクリックする
  • 手順⑥:「Copy & Paste Code」をコピペして完了!

順番に見ていきます。

手順①:『CodePen』に登録する

以下のリンクを開きます。

https://codepen.io/

CodePenのトップページが開きます。

画面右上の「Sign Up」をクリックします。

サインアップ方法は複数用意されています。

いずれかでご登録し、ログインしてみてください。

手順②:「Pen」をクリックする

CodePenにログインします。


画面左上の『Pen』プルダウンを開き、『Pen』をクリックします。

上記のとおり、コードを実際に書き込んでいく画面が表示されます。

手順③:ソースコードを記述する

上記のように、ソースコードを記載していきます。

結果はすぐに反映されます。大変心地よいです。

手順④:保存する

ペンアイコンをクリックすると、お好みの名前を付けられます。

デフォルトの「Untitled」でも保存できます。

『Save』をクリックして保存します。

手順⑤:「Embed」をクリックする

保存すると、上記のようなボタンが画面下部に表示されます。

「Embed」をクリックします。

上記の画面(「Embed This Pen」ウィンドウ)が表示されるはずです。

手順⑥:「Copy & Paste Code」をコピペして完了!

Theme:」からソースコードを載せたときの見た目を変更できます。

以下の2種類から選べるので、お好みの方をどうぞ。

  • Light
  • Dark

僕は、Darkが好きです。

上記のように、画面下部に「Copy & Paste Code」が表示されています。

「HTML(recommended)」の内容を全てコピーします。

コピーできたら、ソースコードを表示させたいWebサイト、またはWordpressの記事ページを開きましょう。

上記のように、Webサイト内やWordpressの記事内(コードエディター)に貼り付けます。

See the Pen
gOLqLzm
by daniel__blog (@daniel__blog)
on CodePen.

⬆こんな感じで表示されます。

これで無事、サイト内で表示することができました!お疲れさまでした。

まとめ

最後にまとめます。

CodePenでは、

  • ブログやWebサイト内に簡単に埋め込むことができる!
  • 書いたコードがリアルタイムで反映される!
  • 基本的に無料で使える!

というわけでした。

今回は以上です!
最後までお読み頂き、ありがとうございました。
素敵なCodePenライフをお楽しみください。

コメントを残す

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