CodePenで複製する方法~テンプレート機能の使い方~

Webツール
とりとん
とりとん

何回もコード書くのめんどい・・

CodePenめっちゃ便利で最近よく使うようになりました。

ただ、「Setting」からSCSSにしたり、jQueryを読み込んだり、毎回設定してたら手間がかかるし、

同じHTMLを繰り返し使いたいときも結構あるので、Penを複製させたいですよね。



Penを複製するにはテンプレート機能が使えるとのことですが・・

とりとん
とりとん

「New Pen」しかない・・

テンプレートはどこから読み込むと?

調べてみたけど、バージョンが違うのか私が見てる画面と違う・・



ということで、今回はCodePenのテンプレート機能を使ってPenの「複製」をする方法を2パターン紹介していきます!w

英語苦手なのでどのボタンがどういう意味なのかもよくわからず、ひたすら触りまくってやっとわかりましたw

複製方法の2パターンは、ざっくりいうとこんな感じです⬇️



≪ 1つ目の方法 ≫
テンプレートとなるPenのSettingやソースコードを引き継いで新規Penを作成。

≪ 2つ目の方法 ≫
Pen名やSettingやソースコード全ての内容を複製して新規Penを作成。



使いやすそうな方を試してみてください♪

スポンサーリンク

テンプレート機能から作成する方法

まずはテンプレートとなるPenとして、「テンプレート1」を作成してみました。



テンプレートとして使えるように、「Setting」から設定します。



「Template」→「Make Template?」→「On」→「Save&Close」で設定は完了です。

ちなみに、下にあるURLに飛んでもこのPenのSettingやソースコードが引き継がれた新しいPenが開きます。



「Save」ボタンで保存し、F5でページを更新すると・・



一番下に「Use This Template」という項目が増えるので、これをクリックします。



すると、「Untitled」という新規Penが開きます!

この方法だとPen名は引き継がれず、Settingやソースコードのみ引き継がれた状態になります。

Forkボタンでそのまま複製する方法

実はこっちの方が簡単です。

とりとん
とりとん

なら先に書けよ・・



先程と同じようにテンプレートとなるPen「テンプレート1」を作成しました。



一番下の「Fork」をクリックします。



・・はい、終わりですw

Pen名もそのまま引き継がれるので、複製されているのか画面上でわかりにくいのですが、

「Pen Forkd」と出たら、既に複製されたあとのPenが開かれています。



複製された??と押しまくっていると、このようにいっぱい複製されてますw

まとめ

Penの複製方法について調べていると、

”「Fork」ボタンが一番下に移動してる” とか

”「New Pen from Template」をクリックして新規Penを作成する” とか

現在の仕様とは異なる内容ばかりだったので、ぜひ参考にしてみてくださいね!

とりとん
とりとん

最後まで読んでいただきありがとうございました!


\ ぽちっと応援お願いします♪ /
ブログランキング・にほんブログ村へ人気ブログランキングへ
タイトルとURLをコピーしました