Udemyサイト制作に関するブログなどに、htmlやcss、jsのコードを埋め込んで、その場で動きを確認できるようにしたい場合、「CodePen」を使うと便利です。今すぐ使える方法、流れをご紹介します。ソースコードを保存して、wordpress用のショートコードを取得する。Shortcode」をインストールCodePenをwordpressに埋め込むのに利用するプラグインがあります。Shortcode」です。このプラグインをご自身のワードプレスにインストールして有効化します。インストールすると、設定ができるのですが、特にいじる必要はありません。wordpress側の準備はこれだけでOK。CodePenで、wordpressに貼り付けるショートコードを取得するまでの流れCodePen公式サイトにアクセスまずはCodePenのサイトに行きましょう。Up」を選択して、登録に進みます。一瞬、”有料なの?”って思ってしまいますが、無料会員登録も用意されてます。Free」っていうボタンが用意されてます。これを選択しましょう。↑ここから会員登録すればOKです。有料と無料の違いは、こちらのサイトに詳しく紹介されているので、参考にしてみてください。コーディングに便利なCodepenの使い方とカスタマイズ(有料版と無料版)http://commte.net/blog/archives/6341個人のブログに貼り付けるような使い方であれば、無料版で十分だと思います。CodePenで、コードを書く会員登録して、ログインの状態になったら、早速コードを書いてみましょう。画面右上の「Create」をクリックします。Pen」を選択します。表示された画面で、↑こんな感じで、htmlやcss、jsを書きます。デフォルトだとこの画面デザインですが、右上の「ChangeView」というボタンからレイアウトを変えたりすることもできます。ソースコードを保存して、wordpress用のショートコードを取得する。ソースコードがかけたら、上にある「Save」を押して保存します。※この画面は、一度保存した後のキャプチャなので、若干ボタンの配置が違うかもです。すると、小さいのですが、画面右下に、「Embed」というボタンが表示されます。こちらを選択すると、こんな感じの画面が表示されます。Shortcode」タブを選択すると、wordpressに貼り付ける用のショートコードが表示されます。こちらをコピーします。wordpressにショートコードを貼り付けるあとは、取得したコードをWordpressの記事文中に貼り付けるだけ。ブログ初心者が5ヶ月で1万PV超えをするまでに行った、たった5つのこと。最近の投稿PHPの四捨五入、切り捨て、切り上げ。