tanuki_designのブログ

主にWebデザインの勉強内容をメモしています

【はてなブログ】CodePenの埋め込み方法


これからWebデザイン勉強用にしようと思って登録してみたけど、

とても見やすいし、ブログデザインもたくさんあって素敵。

これなら3日坊主の私にも続けられるかも…?

 

今回は初回ということで、

HTMLやCSSを説明するのに便利なCodePenの埋め込み方法をメモ。

 

まず、CodePenのサイトにGO。https://codepen.io/

 

Penをクリックし、コードを入力できる画面へ。

 

 

こんな感じで、コードを入力。

OKなら、右下のEmbedをクリックする。

 

 

すると、上記のような埋め込みコードが出現するのでコピーする。

 

これをはてなブログの記事にペーストすると… 

 


See the Pen
bJemrQ
by ekocha (@ekocha)
on CodePen.


ちゃんと記事に反映されましたーーー!やったーーー!

はてなブログの記事設定を「はてな記法」してないとダメみたいなので、そこだけ注意!