今回は、手軽にコードデモをブログに載せることが出来るサービス『CodePen』のダウンロード方法と使い方を簡単に解説していきます。
目次
CodePenのダウンロード方法
1.公式ページより会員登録（無料）
まずは、以下のリンクより公式ページに飛んでください。
その後、右上にある『sign up』をクリック
Twitter、Git hub、facebookまたは、『sign up with Email』から会員登録（無料）をしてください。
2.左のメニューの『Pen』をクリック
左のメニューの『Pen』をクリックしてください。
（以下の画像でチェックがついてるとこ）
以下の画像になれば、大丈夫です。
CodePenの使い方
1.HTML,CSS、jsの設定
特に設定をしなくても、そのまま使用出来ますが、jQueryやSassの設定をしたい方は、以下の画像の右上の設定をクリックしてください。
クリックすると以下の画像のように、項目が出てくるので、左側のメニューのHTML、CSS、JSよりお好みの設定を行ってください。
2.コードを記入する
コードを記入すると、以下の画像のように自動でデモも反映されます。
コード記入が出来たら、右下の『Embed』（右から3つ目）をクリックしてください。
3.コードをコピペする。
以下の画像の右下『HTML(reccommended)』をクリックして、コピー（グレーの背景のところ）してください。
4.WordPressの投稿ページに移動して、『カスタムHTML』にコードを貼り付ける
WordPressの投稿ページに移動して、カスタムHTMLに先ほどコピーしたコードを貼り付ける。
5.公開して確認する
公開して確認すると、、、
See the Pen MWyEdZM by ryu (@ryu-no-sss) on CodePen.
ブログに反映されました！
まとめ
今回は、ブログにコードデモを載せる方法について解説させていただきました。
それでは、最後まで読んでいただきありがとうございました。
タグ
