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

  • 投稿日
  • 更新日
  • 著者 アバター .one pixel
  • カテゴリー ブログ

CSSとかJSの面白い（参考になりそうな）コードがあったり、見てるだけでも楽しくなっちゃうCodePen。
CodePen（http://codepen.io/）
0
Wordpressの記事の一部などで利用されているのをよく見かけますので、表示方法をメモしておきたいと思います。
Wordpressでの表示は、「CodePen Embedded Pens Shortcode」というプラグインを利用します。※プラグインのインストールなどは省略します。インストール後は、基本的には特に設定することはないので、CodePenで気になったページを開きます。
CodePen
CodePen
ページの下に小さく［Embed］というボタンがあるのでクリック。すると、、
CodePen
［Wordpress Shortcode］というタブがあるので、そこを切り替えて、コードをWordpressのビジュアルエディタに貼り付けるだけで基本的にはOKです。
プラグインの設定からもう少し細かい設定も出来るようですが、こちらはCodePenのアカウントを持っていないと出来ません。この設定でボーダーや色に関することが設定出来るようです。色んなコードを見ると勉強になりますね！
 
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”WrYabm” default_tab=”result” user=”CKH4″]See the Pen <a href=’http://codepen.io/CKH4/pen/WrYabm/’>Pulsating Planet CSS Animation</a> by Connor (<a href=’http://codepen.io/CKH4′>@CKH4</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]