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