シン・マコ
2022.01.28

【初心者向け】codepen(コードペン)のブログへの貼り付け方

 
 
この記事では初心者向けにcodepenの解説をしています。

Codepenとは、ブラウザ上でHTML,CSS,JavaScriptのコードを記述し、リアルタイムで共有するサービスです。
今回このブログでは、Codepenのブログへの貼り付け方を画像形式で紹介してます。
Googleの機能でしか日本語訳ができないので敬遠しがちですが、慣れると使いやすいのでおすすめです。

私のように英語が苦手な方は日本語化してすすめましょう

Codepen

1.まずはログイン画面。右上のSign Upをクリックします。

2.アカウントを新規登録しなくてもお好みのアカウントから入れます。

  • Twitter
  • GitHub
  • Facebook

3.ここからは日本語翻訳を活用しましょう。
英語が堪能な方には不要なアドバイスです。

4.日本語化されるとこんな感じです。

5.赤枠の以前作ったページをクリックします。

6.そうするとこういうエディタ画面が開きますので、右下の埋め込むをクリックします。

7.HTML(推奨)選択状態でコピーします。

8.コピーが完了するとコメントが出ます。

※ブラウザや環境によってはコピーが上手くいかない場合がありますので、そういうときは通常通り全選択してコピペすればいいです。

埋め込んだソースが下記の通りです。

See the Pen
Untitled
by マージン (@sinjotigers)
on CodePen.

Profile
プロフィール
   
Popular
人気記事
Archive
アーカイブ
Twitter
ツイッター