By U Zensen.

欲しいものはプログラミングで自分で作る。

ブログにソースコードを載せるならCodePenが綺麗で軽くておすすめです!

2016 / 8 / 3 2016 / 8 / 7
雑記
codepen

はじめに!!

お疲れ様です。ぴーすけです!

ブログにソースコードを載せる方法はたくさんあってどれがいいのか困りますよね。

私も色々試したのですが、ページが重くなってしまったり、デザインが気に食わなかったりと、なかなか満足するものに出会えませんでした。

しかし、ついに見つけたのです。デザインも綺麗で、変更が簡単で、軽いソースのエディタを!!

スポンサードリンク

その名もCodePen!!

ご存知でしょうか?CodePen!

CodePenはHtml,css,JavaScriptの3つの言語に対応したソースコードのプレビューツールです。

デザインはこんな感じです!

See the Pen yJxjVx by p-suke (@p-suke) on CodePen.

こっちはソースも一緒に表示!こんな表示の切り替えもちょー簡単にできるのです。

See the Pen yJxjVx by p-suke (@p-suke) on CodePen.

もちろんレスポンシブデザインにも対応しているので携帯でも綺麗に見えます!

おすすめポイント!!

他のソース表示に比べていいなーと思ったところは以下のポイントです。

プログに載せるのが簡単

コードを書いて、コード下の「Embed」ボタンを押すと埋め込み用のコードが取得できるので、それをブログに貼り付けるだけで画面に表示ができます。

コード取得の際に、画面の表示を設定できるので、貼り付けたい場所に応じて表示の高さや表示する内容(結果だけなのか、結果とソースを一緒に表示するのかなど)を選択することができます。

デザインが綺麗で変更も簡単

今時なフラットデザインで綺麗です。どんなブログにでも合いそうなデザインなので、使い勝手がいいと思います。

さらに、デザインを簡単に変更できるのでブログのメインカラーに合わせることもできるので汎用的です。

SassやjQueryなどのライブラリも簡単に使える

html,css,JavaScriptのプレビューができるエディターなので、それ関係のプラグインはわざわざ呼び出さなくてもクリック一つで対応できます。

もちろん使いたいプラグインはCDNなどで別に読み込むことも可能です。

使い方!!

登録方法

以下のサイトにアクセスします。

そして「Sign UP」をクリックしコース選択画面に遷移します。すべて英語でビックりしますが、下の方に無料会員のコースがあるので安心してください。

とりあえず無料会員で良いので「Free Plan」の「Sign Up」をクリックして遷移して以下の入力欄を埋めて「Sign Up」して完了です。

signup画面

少しややこしいのはこちらですかね

  • プロフィース名は個人の名前です。後での変更も可で日本語も可。
  • アカウント名は URLの一部になります。変更不可。

コードを書いてブログに載せる!

「+New Pen」ボタンを押すとエディター画面へ遷移します。

こんな感じです。

エディター

コードを書いたら下の「Embed」ボタンを押すと以下のような画面が表示されるので、表示する情報を調整した後に、コードをコピーします。

コードをコピーする

これで完了です。

以上!!

色々試した結果、ブログにソースコードを載せる際にはCodePenが一番軽くて簡単でした。

フロント系のソースやJavaScriptに関するものはこれを使えば間違い無いと思います!!

おすすめなので是非使ってみてください!!

Pocket

コメント

コメントを残す