コードをCodePenでWordPressに埋め込む

どうも、今回はCodePenをWordPressに埋め込む作業を紹介します。
CodePenで埋め込むと下記のような感じでソースコードを表示できるようになります。

See the Pen pBZyYd by bonheurtime (@bonheurtime) on CodePen.

スポンサーリンク

CodePenをWordPressに埋めていこう

全く難しいことはないので、説明も兼ねて順番にやっていきましょう。

CodePenとは?

CodePenとはWeb上でhtml/css/JavaScriptをコーディングできるサイトです。
コードはリアルタイムでプレビューできて、コードを他の人たちと共有できるので、他の人が作った素晴らしい参考になるコードも探すことができます。

色々見てるとhtml/cssだけで「こんなことができるの!?」など色々とびっくりさせられるので、書くだけではなく見てみるのも勉強になります。
また、見てみるといったのですが、このCodePenのいいところは他の人のコードを触れてしまう上に、変更したらリアルタイムで更新してくれるのです。
もちろん保存はできないようになってますのでご安心を

他にもまだまだ機能があるようなのですが、大体私はこういう使い方しかしてないです。
なので、埋め込む以前に勉強にもなるので、ぜひ活用してみてください!

サインアップ

まずはCodePenのサインアップからやっていきましょう。
CodePenは下記のリンクから登録していきます。
https://codepen.io/
リンクを開いたら下記のような画面になるので、右上のSign Upのボタンを押しましょう。

次に下記の画面になるので、TwitterやGitHubなどのアカウントで登録したくない場合は赤い矢印のボタンを押して進みます。

そうすると、名前とユーザーネームとメールアドレスにパスワードを入力する画面が出てくるので、入力していきます。入力できたらSubmitボタンを押します。

Submitボタンを押すと下記画面へ移行してサインインが完了します。
下記のような画面が出るのですが、何も入力せずに進んでOKです。
これでCodePenへの登録は完了です!

CodePenで実際に埋め込む

サインアップまでできたらあとは簡単です。
下記のようなスタートアップが出るのでどんどん進んでいき、CSSの部分はSCSSでいいと思うので、選択して進みます。

進んだら、下記のような画面になって、コードが書けるようになるので、コードを書いていきます。
そして埋め込みたくなったら、右下にあるボタンを押します。

そうすると下記の赤枠の中に埋め込みコードが出てくるので、そのままコードをWordPressにhtmlとして埋め込めば、埋め込み成功です。

いかがでしょうか?
全く難しいことはなかったですよね、公開範囲を自分のみにできたりする有料会員もあるのですが、基本的に無料会員でできることが多いので、無料会員で私は満足してます。
皆さんも、どんどん自分の書いたコードを広めて他の人のコードをいじりまくってみてください!

コメント

タイトルとURLをコピーしました