ブログ運用

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

2020年6月21日

にぃやん
今回はWordPressブログにHTMLやCSSのコードを埋め込む方法をお教えします。

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

この記事の内容

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

外部サイトのCodePen(コードペン )を使うことで

簡単にブログにコードを埋め込むことが可能です。

 

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

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

しかも、「JavaScript」の動きがある物も表示可能です 。

見せ方に幅が広がるのでオススメです。

CodePen登録方法

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

CodePenのサイト

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

コードペンsignup

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

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

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

コードペン登録

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

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

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

コードペン新規作成

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

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

WordPressに埋め込む方法

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

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

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

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

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

まとめ

まとめ

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

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

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

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

にぃやん
それでは! よき、コードライフを!!
  • この記事を書いた人
つちだ

つちだ ろい

現役のエンジニアです。日々Web制作に勤しみつつ、ブログ更新していきます。ポートフォリオ兼仕事依頼ページも同時に作成中ですのでご期待ください。/東京在住/30歳/フロントエンド/スノボ/バイク/オムライス

-ブログ運用