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

[記事公開日]:2016.2.12

[最終更新日]:2020.2.22

[読了目安:2分]

Pocket

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

Pocket

Contact to Us

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

    お問い合わせの種類必須

    お問い合わせ内容必須

    会社名

    お名前必須

    メールアドレス必須

    電話番号

     

    ※送信がうまくいかない場合は、お電話でお願い致します。

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