当サイトのリンクにはアフィリエイト広告が含まれています

CodePenの使い方!プラグインなしでソースコード表示!

「プログラミング」や「ブログ・サイトのカスタマイズ」をしていると、その「過程」や「結果」をソースコードとセットで他の人にも共有したくなりますよね。

  • このコードを追加するとサイトデザインがこうなるよ!
  • これがエラーの原因だけど、このコードを追加すると解決するよ!

そのソースコードを表示する方法はいくつかありますが、ワードプレスでブログを運営している方の多くは「プラグイン」でソースコードを表示しているのではないでしょうか?



ド定番「Crayon Syntax Highlighter」

そのプラグインの代表格といえば、もちろんCrayon Syntax Highlighterですよね。僕も愛用していますよ。

.test {
  color:#fff;
  width:90px;
  height:90px;
}

▲こんな感じで、シンタックスハイライトされるので、コードが非常に見やすくなるのが特徴です。そして、管理画面にもソースコードを入力する専用のボタンがあってストレスフリーです。ただ…

  • プラグインが重くてサイトの表示スピードに影響があったり
  • ヘッド内でスタイルシートを別で読み込んだり
  • このプラグインをアンインストールすると、ソースコードが正常に表示されなかったり

少なからず良くない影響もあるんですよね。特に、ソースコードを表示しない記事に、このプラグインのスタイルシートが読み込まれるのは避けたいところです。(条件分岐すれば解決するけど…)

CodePenでソースコードを表示する

そこでおすすめしたいのが、CodePen(コードペン)というソースコードを表示するサービスの利用です。(CodePan(コードパン)じゃないよ!)

See the Pen JKQxqB by Chef (@chef-aomori) on CodePen.

▲これがCodePenなんですが、「見たことある!」と思った方も多いはず。僕も存在だけは知っていました。でもこれ、今更なんですが「すごく魅力的なサービス」なんですよ。

  • プラグインじゃないから、停止した後のリスクがない
  • HTML/CSS/JSをセットで表示できる(コードに一貫性がある)
  • スタイルシートをヘッド内で読み込まない
  • 非同期で読み込んでくれる

…など。特に、ただコードを表示するだけではなく、イベントを発火させることができるのは良いですよね。通常ならできないので。

そういえば昔、「本文中にボタンを置いてイベント発火させたいけどできないな〜」って悩んでいた記憶があります。CodePenで解決できたのに…

CodePenの登録方法

では、CodePenの使い方をサクッとご紹介してみます。まず、CodePenのサイトにアクセス後、右上の「Sign Up」をクリック。

codepen-1

 

その後、画面左下にあるFree Plan(無料プラン)の「Sign Up」をクリック。

codepen-2

 

ユーザー名やメールアドレスを入力。その他にも入力項目がありますが、スルーしちゃっても大丈夫です。最後に「Save&Continue」をクリックで終了です。

codepen-3

CodePenの使い方

登録が終わったら、「New Pen」or「Let’s write some code」をクリックして、実際にコードを書いてみましょう。

codepen-4-2

 

たまに「Save」しながらコードを書き、終わったら画面右下の「Embed」をクリック。

codepen-5

 

Pタグがあるコード(推奨)か、

codepen-6

 

iframeタグがあるコードをコピーします。

codepen-7

 

後は、そのコードを貼り付けるだけでOKです。とっても簡単!

codepen-8

メリット

先ほどもいくつかメリットを挙げたんですが、個人的に一番気に入ったのはコードを気軽に修正できる点です。

通常は、コードを本文中に直接書くので、あるコードを複数の記事で紹介していると、すべての記事を修正しなければいけません。

でも、CodePenでコードを紹介していると、CodePen側でコードを修正するだけで、すべての記事に反映されます。CodePenのページを埋め込んでいるので。

僕のカスタマイズは比較的連続性があるので、CodePenを使う理由はこれだけでも十分かもしれません。

デメリット

一方、個人的にデメリットだと思っているのは下記の2点。

  1. CodePenのサービスが終了したら表示されなくなる
  2. CodePenのページを埋め込むので、 文字数が増えない

前者は半分冗談ですが、後者はちょっと困りますね。文字数が多ければいいってもんじゃないですが、少なからずGoogleの評価対象になるはずなので。

ここら辺は、バランスを考えて「CodePen」か「Crayon Syntax Highlighter」を選ぼうと思います。イベントを発火させるなら、迷わず「CodePen」ですね。

まとめ

たまに「CodePen」を見かけてはいたんですが、こんなに便利なツールなら早めに使っておけば良かったなぁ…とプチ後悔してます。

まだ使ったことがなければ、一度お試しあれ!おすすめのツールですよっ!


カテゴリー:プログラミング学習

シェフ

このサイト「Fantastech」を運営している人