CODEPEN | コードペンの登録方法から埋め込みの方法までを解説します。
使うまではやや敷居の高いイメージがありましたが、とても簡単です。
CODEPEN
CODEPENとはHTML、CSS、JavaScriptでコーディングとプレビューができるサービスです。またコードとプレビューの両方をシェアする事ができます。
※スマホの場合はResultをクリックすると確認できます。
See the Pen
jOObypY by morishougo (@morimori05)
on CodePen.
登録方法/h2>
まずはCODEPENにアクセスします。
右上のSign Upをクリックすると登録画面になります。
SNSでも登録可能です。
任意の設定を終えたらSubmitをクリック。
クリックすると詳細設定のページに移動しますが、後から設定も可能なのでスキップしてもいいでしょう。
これで登録は完了です。
メイン機能「Pen」
左上の「Pen」をクリックすると新規ファイルが作成されます。
ここで任意のコード書く事ができます。
書き終えたら右下のEmbedをクリックすると、プレビューと埋め込む方法が選択できます。
当サイトではHTML(Recommended)で埋め込んでいます。
ワードプレスの投稿ページでテキストに切り替えてコピペすれば埋め込み完了です。
See the Pen
jOObypY by morishougo (@morimori05)
on CodePen.