今回はCodePenで作ったソースコードを
WordPressのブログに埋め込む方法について簡単にまとめたいと思います。
CodePenは、HTML、CSS、JavaScriptのコードを
ブラウザですぐに動かすことができるサービスです。
- HTML、CSS、JavaScriptコードをブラウザですぐ動かせる
- 環境構築が不要
- 作ったコードを人にシェアすることができる
実際に埋め込むとこんなかんじで表示することができます。
See the Pen
vYyoPEQ by notebook (@orange-notebook)
on CodePen.
コードの内容と実際にできる成果物を両方表示することができます。
見栄えもかっこよく表示してくれますね!
ブログに埋め込むおおまかな手順はこんなかんじです。
- CODEPENにログインする。
- Penをクリックしてコードを書いて保存する。
- Embedから埋め込み用のコードを取得する。
- ブログにコピーしたタグを貼り付ける。
なお、WordPressのブログに貼り付けることを想定しています。
ではそれぞれもう少し詳しくみていきましょう。
手順1:CodePenにログインする
まずCodePenにアクセスしてログインします。
![CODEPENのサイト](https://orange-log.com/wp-content/uploads/2021/03/codepen_1-1024x191.jpg)
ただコードを書いて使ってみるだけなら会員登録は不要です。
今回のように、CodePenのコードをブログに埋め込みたい場合は
アカウント登録が必要になりますので「Sign Up」から登録しましょう。
CodePen:https://codepen.io/
手順2:「Pen」でコードを書く & 保存する
左側のメニューの「Create」から「Pen」をクリックします。
![CODEPENで新規Penを作成する](https://orange-log.com/wp-content/uploads/2021/03/codepen_02-332x1024.jpg)
そうすると、下記のようなエディタ画面が立ち上がります。
上段は「HTML」「CSS」「JS」を書く欄、
下段は上段で書いたコードが反映されるようになっています。
![](https://orange-log.com/wp-content/uploads/2021/03/codepen-03.jpg)
コードが書き終わったら、
画面上部にある「Save」ボタンをクリックし内容を保存します。
![CODEPENの「Save」ボタン](https://orange-log.com/wp-content/uploads/2021/03/codepen_3.jpg)
手順3:「Embed」から埋め込みタグを取得する
「Save」ボタンを押すと、画面右下にメニューが現れます。
メニュー内の「Embed」を押しましょう。埋め込み用の画面が立ち上がります。
![CODEPENの「Embed」ボタン](https://orange-log.com/wp-content/uploads/2021/03/codepen_04.jpg)
立ち上がった画面の下の方に「Copy & Paste Code」欄があり、
「HTML(recommended)」が選択された状態で、埋め込み用コードが記述されています。
![CODEPENを埋め込むための「HTML(recommended)」ボタン](https://orange-log.com/wp-content/uploads/2021/03/codepen_05-1024x64.jpg)
こちらのコードをコピーします。
手順4:ブログにコピーしたコードを貼り付ける
自分のWordPressブログの編集画面で、コピーしたコードを貼り付けていきます。
クラシックエディタの場合と、ブロックエディタの場合をそれぞれご紹介します。
1:クラシックエディタの場合
クラシックエディタで貼り付ける際は、「ビジュアルエディタ」でなく
「テキストエディタ」に切り替えて貼り付ける必要があります。
![WordPressクラシックエディタのテキストエディタ](https://orange-log.com/wp-content/uploads/2021/03/codepen-06.jpg)
2:ブロックエディタの場合
ブロックエディタの場合は、
「カスタムHTML」のブロックを選択し、コピーしたコードを貼り付けます。
![WordPressブロックエディタのカスタムHTMLブロック](https://orange-log.com/wp-content/uploads/2021/03/codepen-07.jpg)
これで完了です!
おわりに
以上、CodePenで作ったコードをブログに埋め込む方法でした。
手軽にかっこよくコードを表示してくれるCodePenはとても便利ですよね。
![【JIN】ブロックエディタでシンタックスハイライターを使う方法](https://orange-log.com/wp-content/uploads/2021/08/highlighting-code-block-plugin_ic-320x180.jpg)
![【シンタックスハイライタープラグイン】Highlighting Code Blockの使い方](https://orange-log.com/wp-content/uploads/2021/09/highlighting-code-block-plugin_ic-320x180.jpg)