目次
CODEPENとは
WEB上でコードを書いて、仕上がりとコードを見やすい形状のブロックでブログで表現やコピペが出来る便利ツール。
完成形
HTMLとCSSのボタンを押せば、コードも見れ、動く仕上がりも確認できる(ΦωΦ)
![](http://nyancode.net/wp-content/uploads/2022/03/にゃんこ1.jpg)
発行されたURLをコピペするだけ表示されるにゃ。簡単便利♥
CODEPENのウェブページに行く
![](http://nyancode.net/wp-content/uploads/2022/03/スクリーンショット-2022-03-14-20.20.10-1024x425.jpg)
![](http://nyancode.net/wp-content/uploads/2022/03/スクリーンショット-2022-03-14-20.20.10-1024x425.jpg)
SignUpで登録する。
ウェブページ上でコードを書く
HTMLとCSSを書く。
![](http://nyancode.net/wp-content/uploads/2022/03/image-7-1024x817.png)
![](http://nyancode.net/wp-content/uploads/2022/03/image-7-1024x817.png)
上部分にあるSaveを押す。
![](http://nyancode.net/wp-content/uploads/2022/03/image-9-1024x758.png)
![](http://nyancode.net/wp-content/uploads/2022/03/image-9-1024x758.png)
右下のShare>CopyLink
![](http://nyancode.net/wp-content/uploads/2022/03/image-10.png)
![](http://nyancode.net/wp-content/uploads/2022/03/image-10.png)
![](http://nyancode.net/wp-content/uploads/2022/03/にゃんこ2.jpg)
![](http://nyancode.net/wp-content/uploads/2022/03/にゃんこ2.jpg)
![](http://nyancode.net/wp-content/uploads/2022/03/にゃんこ2.jpg)
CODEPENのウェブページの作業はこれだけにゃ。
WordPressで作業
プラグインを入れる
ワードプレス>プラグイン>新規追加>CodePenEmbedBlockを検索>有効化
![](http://nyancode.net/wp-content/uploads/2022/03/スクリーンショット-2022-03-14-20.37.38.jpg)
![](http://nyancode.net/wp-content/uploads/2022/03/スクリーンショット-2022-03-14-20.37.38.jpg)
投稿ページ、固定ページ
投稿ページ、固定ページで「CodePenEmbed」を選択
![](http://nyancode.net/wp-content/uploads/2022/03/スクリーンショット-2022-03-14-20.43.05.jpg)
![](http://nyancode.net/wp-content/uploads/2022/03/スクリーンショット-2022-03-14-20.43.05.jpg)
指定された場所にCODEPENでコピペしたURLを記入
![](http://nyancode.net/wp-content/uploads/2022/03/スクリーンショット-2022-03-14-20.39.34-1024x343.jpg)
![](http://nyancode.net/wp-content/uploads/2022/03/スクリーンショット-2022-03-14-20.39.34-1024x343.jpg)
表示されます。
![](http://nyancode.net/wp-content/uploads/2022/03/image-6-1024x658.png)
![](http://nyancode.net/wp-content/uploads/2022/03/image-6-1024x658.png)
完成です!
ホームページに貼る場合
HTMLとCSSを書く>上部分にあるSaveを押す。
![](http://nyancode.net/wp-content/uploads/2022/03/スクリーンショット-2022-03-14-20.30.22-1-1024x729.jpg)
![](http://nyancode.net/wp-content/uploads/2022/03/スクリーンショット-2022-03-14-20.30.22-1-1024x729.jpg)
下側の「Embed」を押す>HTMLにして>「Copy Code」を押して>HTMLに貼り付けて完成!
![](http://nyancode.net/wp-content/uploads/2022/03/スクリーンショット-2022-03-14-20.31.19-1024x643.jpg)
![](http://nyancode.net/wp-content/uploads/2022/03/スクリーンショット-2022-03-14-20.31.19-1024x643.jpg)
![](http://nyancode.net/wp-content/uploads/2022/03/にゃんこ1.jpg)
![](http://nyancode.net/wp-content/uploads/2022/03/にゃんこ1.jpg)
![](http://nyancode.net/wp-content/uploads/2022/03/にゃんこ1.jpg)
新しいコードを書くときは、CODEPENページの右上の自分のアイコンを押す>新規作成するにゃ。※そのまま書くと、上書きになるにゃ。