codepenをforkしてブログで使う

CSSやjsのいろいろなアイディアがたくさん公開されている https://codepen.io/ というサービスがあります。

特別にコーディングに興味がない人でも、これ自分のブログでも使ってみたいなぁ　なんて思うこともあると思いますが、自分のブログにコードを移植するのも大変ですよね。

ちょっと工夫して、簡単に取り入れる方法を考えてみましょう。

例えば、https://codepen.io/DavidJAldred/pen/pVbQBJ のボタンを自分のブログでも、ボタンとして使いたいと思ったとします。

自分のcodepenのアカウントを作成（作成方法は、ググってね）したうえで、前出のページを表示して、forkボタンを押して、自分のcodepenに複製を作成します。

以下のように、URLの最後に、.cssを追加すると、codepenのCSSだけを取得できます。（jsなども同様です)

https://codepen.io/tenman-the-reactor/pen/BgEjYv.css

設定/詳細設定/headに要素を追加　（setting / advanced / Add elements to head)

<link href="https://codepen.io/tenman-the-reactor/pen/BgEjYv.css" rel="stylesheet">

背景色の設定などは、codepenのCSSを変更します。

これで、マーカーの設置ができました。