CodePenのソースを、WordPressの記事に掲載してみよう

更新日：2016.2.12

［読了目安：2分］

CSSとかJSの面白い（参考になりそうな）コードがあったり、見てるだけでも楽しくなっちゃうCodePen。

WordPressの記事の一部などで利用されているのをよく見かけますので、表示方法をメモしておきたいと思います。

WordPressでの表示は、「CodePen Embedded Pens Shortcode」というプラグインを利用します。※プラグインのインストールなどは省略します。インストール後は、基本的には特に設定することはないので、CodePenで気になったページを開きます。

ページの下に小さく［Embed］というボタンがあるのでクリック。すると、、

［Wordpress Shortcode］というタブがあるので、そこを切り替えて、コードをWordpressのビジュアルエディタに貼り付けるだけで基本的にはOKです。

プラグインの設定からもう少し細かい設定も出来るようですが、こちらはCodePenのアカウントを持っていないと出来ません。この設定でボーダーや色に関することが設定出来るようです。色んなコードを見ると勉強になりますね！

Contact to Us