ソースコードが記載されたエディタ画面、ブログ記事で見かけることはありませんか？「CodePen」では左にコード、右にプレビューが表示されるため、別のページや画像を用意することなく簡単にスタイルが共有できます。
WordPressのテーマもしくはプラグインによっては似た機能が用意されています。
ただ、管理、共有までを考えると、
- 過去の記事を遡ってコードを探す
- ユーザーの環境次第で動作しない
デメリットもあります。
CodePenは総合的に見てメリットが多いので、登録して一度使い心地を試してみてくださいね。
目次
アカウント登録から埋め込みまで
アカウント登録
CodePenの公式サイトにアクセスし、Sign Up for Freeからアカウント登録します。IEは対応していないためブラウザにご注意ください。
各種SNSのアカウントもしくはメールアドレスで登録しましょう。届いたメールからアクセスしてアドレスの有効性を確認します。
メールアドレスの場合はこちらの画面に遷移します。入力は必須ではないため、Submitで次に進んでOKです。
登録が終わるとチュートリアルのポップアップが表示されます。必要に応じて操作確認してくださいね。
ソースコードを入力
ログイン後、最初の画面にあるPenでワークスペースを開きます。
HTML、CSS、JavaScriptの各エディタにコードを入力してください。内容は画面下にプレビューで表示されます。
詳細設定と保存
よく使う基本のメニューが画面右上に用意されています。右のピンアイコンでお気に入りのコードをコレクションに登録できます。後で参考にしたいときなど、一覧で見られるので便利ですよ。
- Save：保存
- Fork：コピー
- Settings：タイトルや説明文を入力
- Change View：画面の表示形式を変更
タイトルと簡単な説明文を加え、Save&Closeで保存します。
コードペンを埋め込む
詳細設定と保存が完了したら、画面右下にあるEmbedをクリックします。
埋め込み用のコードが発行されるので、各タブから専用コードをコピーしましょう。
WordPressで利用するときは、HTMLかiframeの形式が一番簡単に表示できます。カスタムHTMLのブロックを選択するか、コードエディタ―表示でペーストしてくださいね。
See the Pen povOmOd by cotton candy (@notes_de_design) on CodePen.
その他の機能
ファイルをエクスポート
ファイルのエクスポートは、画面右下のメニューからExportを選んでください。PRO以外は、GitHubもしくはzip形式でダウンロードするかのどちらかになります。
プレビューを拡大する
プレビューの拡大は、同じく画面右下のメニューにある拡大アイコンからできます。別タブが開くので、全体を確認したいときに便利です。
CodePenの登録から専用コードの埋め込みまでをご紹介しました。ワークスペースを開くとすぐにコードの入力画面になるので、セーブなどの簡単な設定ができれば完成！
拡張機能が充実したエディタもありますが、ファイルの用意やインストールの時間をとらずにその場でスタイルを共有したいときにおすすめです。
