ブログにCodeをCodePenを使って載せる方法 【WordPress】

 ブログにCodeをCodePenを使って載せる方法 【Wordpress】

以前からブログにプログラミングのコードを載せてきたのですが、ユーザーがそのコードを見やすくするにはいろいろなやり方があると思います。今回は、CodePenを使って、実際にコードを載せてみたいと思います。

まずは、ここ(CodePen)からユーザー登録し Log in します。

Twitter、Facebook、GitHub との連携が可能で簡単に登録できるので便利です。

自分はGitで登録したので、Log In with GitHub を押してログインします。

実際にログインすると…

上記のような画面に行くので、Create の New Pen をクリックします。

あとは、 HTML 、CSS、 JS 等 を書き込んで実際にコードを打ち込みながら仕上がりを確認していきます。

ここまでできたらあとは簡単です。下にあるEmbedからコードをコピーするだけ!

コピーコードをWordpressの記事投稿の際にテキストに貼り付けるだけ。

実際に貼り付けたものが下にあります!

See the Pen erGMxv by 寿和平野 (@toshikazuhirano) on CodePen.

EDIT ON CODE PEN をクリックするとユーザーがソースを見て実際に編集したりすることもできます。今までと違うところは、自分のコードをただ載せるだけではなく、ユーザーが見て実際にいじれるところがCodePenのいいところだと思います。今後、コードを載せる際はCodePenを使っていこうか…なんて考えています。

WordPressのプラグイン(Crayon Syntax Highlighter)を使ってコードを載せた場合は次のページに記載します。

ぜひ、参考にしてみてください。

コメントを残す

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