CodePenの使い方
![](https://bouquet344olive.com/wp-content/themes/cocoon-master/images/man.png)
前から気になっていたCpdePenに登録してみました!いろんなブログで見かけていて、視覚的にわかりやすいのでいいなぁと前から思っていました。簡単に、ブログに貼り付けられるのでおすすめです!
CodePenにサインインする
https://codepen.io/ こちらから登録します!私はgithubで登録してみました。
コードを書き、保存する
コードを書き、保存します。
すると下記にEmbedというボタンが出てくるので、そちらをクリックします。
![](https://bouquet344olive.com/wp-content/uploads/2021/11/A-Pen2-1024x502.png)
シェアするコードをコピーする
下に、シェアするコードが出てくるので、それをコピーします。
それをブログのショートコードで入力すれば、うまくブログに添付できました!
![](https://bouquet344olive.com/wp-content/uploads/2021/11/A-Pen-1024x507.png)
参考にしたブログ https://qiita.com/fumu238/items/f73274aa1a188eb15794