のんびり猫プログラマの日常

プログラムのことを書くかもしれない?

 

【はてなブログ】CodePenをはてなに貼る方法

f:id:catprogram:20150409203821p:plain

CodePenって何だか知ってる人は多いでしょう。

Web上でJavaScriptを書いて、即座に実行できる環境を提供しているサイト です。codepen.io

コードをシェアしたりブログに貼ることも可能です。

もうね、はてなブログ上にコードを書くのが面倒なので、
CodePenに書いたソースとリンクを貼ることにしました。
その方が楽ですよ。利用できるものは利用しなくちゃ!

1 ユーザー登録しよう

CodePenにユーザー登録しないとお話にならないので、とにかく登録。
GitHubアカウントでもログインできます。
英語しかないので、アレルギーを起こさないように頑張りましょう。
膨大な量のコードを書かない限り、Free Planで充分です。

2 何かコードを書いてみよう

ログインしたら、誰かがすでに作った素晴らし~いコードの数々を見ることができます。
あれこれ見て回るのも楽しいですし、おべんきょーになります。

とにかく何でもいいのでコードを書くことにしましょう。
画面の一番上にある[New Pen]ボタンを押します。
HTML・CSS・JSの3つの画面と白い背景の実行結果画面が出てきます。

f:id:catprogram:20150409201939p:plain

実際にコードを書いてみました。HTMLだけでもいいですよ。
[Save]ボタンを押して保存しましょう。

3 リンクを作成しよう

画面上の[Share]ボタンを押すと、こういう画面がでます。
f:id:catprogram:20150409201944p:plain
TwitterFaceBookなどでもShareできます。やりたい人はどうぞ☆

ここでいよいよ本題です。
ブログに貼るには[Enbed]ボタンを押して

f:id:catprogram:20150409201948p:plain


画面右上のCopy & Paste Code:のコードをコピーします。
はてなの「編集モード」上にペーストします。
Enbed This Penの画面で、テーマを自由に設定できます。
ブログカラーに合わせて色を変えてみてもいいかも。
(あとでやってみよう)

4 完成!

See the Pen wBLKmy by catprogram (@catprogram) on CodePen.

5 JavaScriptの外部参照を選択

上のJavaScriptjQueryのスタイルで書いています。
どうやって設定するかというと、JavaScriptコードを書く欄の
[JS]の左のネジをポチ。
f:id:catprogram:20150409201958p:plain

こういう画面が開くので、
f:id:catprogram:20150409201953p:plain
好きなコンポーネントなり何なり設定しましょう。
便利すぎるぜ☆