【はてなブログ】CodePenをはてなに貼る方法
CodePenって何だか知ってる人は多いでしょう。
Web上でJavaScriptを書いて、即座に実行できる環境を提供しているサイト です。codepen.io
コードをシェアしたりブログに貼ることも可能です。
もうね、はてなブログ上にコードを書くのが面倒なので、
CodePenに書いたソースとリンクを貼ることにしました。
その方が楽ですよ。利用できるものは利用しなくちゃ!
1 ユーザー登録しよう
CodePenにユーザー登録しないとお話にならないので、とにかく登録。
GitHubアカウントでもログインできます。
英語しかないので、アレルギーを起こさないように頑張りましょう。
膨大な量のコードを書かない限り、Free Planで充分です。
2 何かコードを書いてみよう
ログインしたら、誰かがすでに作った素晴らし~いコードの数々を見ることができます。
あれこれ見て回るのも楽しいですし、おべんきょーになります。
とにかく何でもいいのでコードを書くことにしましょう。
画面の一番上にある[New Pen]ボタンを押します。
HTML・CSS・JSの3つの画面と白い背景の実行結果画面が出てきます。
実際にコードを書いてみました。HTMLだけでもいいですよ。
[Save]ボタンを押して保存しましょう。
3 リンクを作成しよう
画面上の[Share]ボタンを押すと、こういう画面がでます。
TwitterやFaceBookなどでもShareできます。やりたい人はどうぞ☆
ここでいよいよ本題です。
ブログに貼るには[Enbed]ボタンを押して
画面右上のCopy & Paste Code:のコードをコピーします。
はてなの「編集モード」上にペーストします。
Enbed This Penの画面で、テーマを自由に設定できます。
ブログカラーに合わせて色を変えてみてもいいかも。
(あとでやってみよう)
4 完成!
See the Pen wBLKmy by catprogram (@catprogram) on CodePen.
5 JavaScriptの外部参照を選択
上のJavaScriptはjQueryのスタイルで書いています。
どうやって設定するかというと、JavaScriptコードを書く欄の
[JS]の左のネジをポチ。
こういう画面が開くので、
好きなコンポーネントなり何なり設定しましょう。
便利すぎるぜ☆