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

2016.2.12

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

CodePenhttp://codepen.io/

0

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

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

CodePen
CodePen

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

CodePen

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

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

 

See the Pen Pulsating Planet CSS Animation by Connor (@CKH4) on CodePen.0

Contact to Us

ホームページ制作に関するご相談などございましたら下記のフォームからお気軽にお問い合せください。
※印は入力必須項目です、ご入力漏れのないようお願い致します。
個人情報の取り扱いにつきましては、プライバシーポリシーをご覧ください。

※確認ページはございません。内容をご確認の上チェックをお願いします。

お電話でのお問い合わせ
048-571-0798