CODE PEN でJavaScriptのコードをブログに埋め込んでみた!

See the Pen Analog Clock by Ken_chan (@KentaroT) on CodePen.

ずっと上のようにプログラムコードをブログに埋め込みたいと思っていたんですが、なかなかその方法がわかりませんでした。そこで「CODE PEN」というサービスを見つけたので紹介します。

ジャンプできる目次

CODE PENとは?

code pen

CODE PENは、プログラムコードを投稿するSNSです。Penというのが、コードの投稿ことです。Twitterでいうと、Tweetのことですね。グラフィカルできれいなPenがたくさん投稿されているので、これからの勉強に役立ちそうです。

CODE PENでコードを埋め込もう!

  1. アカウントをつくる
  2. チュートリアルをする
  3. Penをつくる
  4. 埋め込みコードをつくる
  5. ブログにコピペする
    手順はこんな感じです。1.2.は、すぐにわかると思うので省略します。

    3.Penをつくる

    code pen new新しいPENをつくるには、右上の「Create」を押して「New Pen」を選択します。

    code pen blank edit

    すると、上の画面が出てきます。これはまだ、空の状態です。

    見てわかるように、左からHTML、CSS、JS(JavaScript) をコピペしていきます。この画面でコードをゼロから書いたり、編集したりすることもできます。

    code pen edit
    コードを入れ終わると、下にプレビューが自動的に出てきます。これで下準備完了です!

    4.埋め込みコードをつくる
    5.ブログにコピペする

    上の画面を見ると、右下の方に「Embed」というボタンがあります。これが「埋め込み」です。「Embed」ボタンを押すと、次のような画面が出てきます。

    code pen embed this pen copy and paste code
    上は、ブログに埋め込んだときのプレビューです。下は、埋め込みコードです。これをブログにコピペしたら完成です!!

    code pen embed this pen menu
    ちなみにプレビューの上にはこのようなメニューがあります。

    左はテーマなので、色を変更したいときはプルダウンメニューから違うテーマを選んでください。

    真ん中は、読者がブログを開いたときにすぐにコードを読み込むかどうかです。埋め込みコードを読んだらわかりますが、CODE PENにリンクを貼っているのと、コードが長い場合に読者の待ち時間が長くなるからこのチェックが用意されているのだと思います。普通は、チェックを外してすぐに読み込む設定で問題ないと思います。

    右は、有料版です、ハイ。Editableとあるので、埋め込んだあとも編集できるようになるのだと思います。有料なので使いません、ハイ。

    使ってみて

    今回は、埋め込みコードをつくるのが目的だったので、完成したコードをコピペしました。コードを入れると、リアルタイムでプレビューがでるので、コードの勉強するときに重宝しそうです。実験的なコードを試してみるのにちょうどいいですね。ついでに投稿!というのも楽しそう!

    このやり方だと、完成したコードには向いていますが、完成していないコードとか、コードの一部を埋め込むには向いていないですね。
    もう少し勉強していきたいと思います。

    この記事が気に入ったら
    フォローしてね!

    よかったらシェアしてね!

    コメント

    コメントする

    ジャンプできる目次
    閉じる