CodePenを使いコードをWordPressに埋め込む方法

夜の三日月
〈そろり兄やん〉
今回はWordPressブログにHTMLやCSSのコードを埋め込む方法をお教えします。

この記事では以下の悩みを解決できます。

記事のテーマ
・自分のブログでコードを埋め込める
・プラグインを使用しないのでサイトが重くならない
・コードだけでなく、実装結果も表示させられる

外部サイトのCodePen(コードペン )を使うことで
簡単にブログにコードを埋め込むことが可能です。

CodePenを使いコードをWordpressに埋め込む方法

コードペン を使用すれば、プラグインを使わなくて済むので、WordPressブログが重くならないです。

しかも、「JavaScript」の動きがある物も表示可能です 。
見せ方に幅が広がるのでオススメです。

CodePen登録方法

まずは、下記のCodePenのサイトにアクセスします。

CodePenのサイト
https://codepen.io

するとこのようにトップ画面が表示されますので、基本的に画面に従い登録していきます。

コードペンsignup

右上の「signUP」を押します。

「sns」「GitHub」「メールアドレス」のいずれかで登録できます。

今回はメールアドレスで登録します。

コードペン登録

「Sign Up with Email」をクリックし、各種項目を入力します。

そしたら、プロフィール作成画面になります。
入力してもしなくてもどちらでも構いません。

「Pen」の項目の「Pen」から新規作成画面に入れます。

コードペン新規作成

試しに「HTML」、「CSS」を書いてみてください。
下にリアルタイム表示されるはずです。

保存するには「Save」を押します。

WordPressに埋め込む方法

出来上がった画面から、左下の「Eenbed」をクリックします。
「Theme」項目は無料では「白背景」か「黒背景」しか選択できません。

画面のように、「HTML(recommended)」を選択した状態でコードを全てコピーします。

次に、WordPressの記事作成画面にいきます。

表示させたい位置に先ほどのコードを貼り付けるだけです。

注意点としては「テキスト」で貼り付けてください。

貼り付けると、このように作成したのが表示されるようになります

See the Pen gOPmXoJ by そろり兄やん (@sororiniyan) on CodePen.

まとめ

今回の記事はここまでです。

CodePenを使用するとコード解説の記事がより分かりやすく書けます。

何よりプラグインを使用しないので、サイト全体を重くしなくて済みます。

僕も使用していて便利だと感じていてオススメです。

〈そろり兄やん〉
それでは!
よき、コードライフを!!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA