CodePenのソースを、WordPressの記事に掲載してみよう
［記事公開日］：2016.2.12
［最終更新日］：2020.2.22
［読了目安：2分］
CSSとかJSの面白い（参考になりそうな）コードがあったり、見てるだけでも楽しくなっちゃうCodePen。
WordPressの記事の一部などで利用されているのをよく見かけますので、表示方法をメモしておきたいと思います。
WordPressでの表示は、「CodePen Embedded Pens Shortcode」というプラグインを利用します。※プラグインのインストールなどは省略します。インストール後は、基本的には特に設定することはないので、CodePenで気になったページを開きます。
ページの下に小さく［Embed］というボタンがあるのでクリック。すると、、
［Wordpress Shortcode］というタブがあるので、そこを切り替えて、コードをWordpressのビジュアルエディタに貼り付けるだけで基本的にはOKです。
プラグインの設定からもう少し細かい設定も出来るようですが、こちらはCodePenのアカウントを持っていないと出来ません。この設定でボーダーや色に関することが設定出来るようです。色んなコードを見ると勉強になりますね！
See the Pen Pulsating Planet CSS Animation by Connor (@CKH4) on CodePen.0