Twitterでブログ更新情報を配信中

CodePenを使ってブログにソースコードを表示。登録から埋め込みまでのまとめ

ソースコードが記載されたエディタ画面、ブログ記事で見かけることはありませんか?「CodePen」では左にコード、右にプレビューが表示されるため、別のページや画像を用意することなく簡単にスタイルが共有できます

WordPressのテーマもしくはプラグインによっては似た機能が用意されています。

ただ、管理、共有までを考えると、

  1. 過去の記事を遡ってコードを探
  2. ユーザーの環境次第で動作しない

デメリットもあります。

CodePenは総合的に見てメリットが多いので、登録して一度使い心地を試してみてくださいね。

アカウント登録から埋め込みまで

アカウント登録

CodePenの公式サイトにアクセスし、Sign Up for Freeからアカウント登録します。IEは対応していないためブラウザにご注意ください。

CodePen公式サイト

各種SNSのアカウントもしくはメールアドレスで登録しましょう。届いたメールからアクセスしてアドレスの有効性を確認します。

アカウントを登録

メールアドレスの場合はこちらの画面に遷移します。入力は必須ではないため、Submitで次に進んでOKです。

プロフィールを入力

登録が終わるとチュートリアルのポップアップが表示されます。必要に応じて操作確認してくださいね。

チュートリアルの案内

ソースコードを入力

ログイン後、最初の画面にあるPenでワークスペースを開きます。

ダッシュボードからPenを選択

HTML、CSS、JavaScriptの各エディタにコードを入力してください。内容は画面下にプレビューで表示されます。

ワークスペースでコードを入力

詳細設定と保存

よく使う基本のメニューが画面右上に用意されています。右のピンアイコンでお気に入りのコードをコレクションに登録できます。後で参考にしたいときなど、一覧で見られるので便利ですよ。

  • Save:保存
  • Fork:コピー
  • Settings:タイトルや説明文を入力
  • Change View:画面の表示形式を変更
基本メニューのボタン

タイトルと簡単な説明文を加え、Save&Closeで保存します。

タイトルと説明文を入力

コードペンを埋め込む

詳細設定と保存が完了したら、画面右下にあるEmbedをクリックします。

Embedを選択

埋め込み用のコードが発行されるので、各タブから専用コードをコピーしましょう。

埋め込み用のコードをコピー

WordPressで利用するときは、HTMLかiframeの形式が一番簡単に表示できます。カスタムHTMLのブロックを選択するか、コードエディタ―表示でペーストしてくださいね。

その他の機能

ファイルをエクスポート

ファイルのエクスポートは、画面右下のメニューからExportを選んでください。PRO以外は、GitHubもしくはzip形式でダウンロードするかのどちらかになります。

GitHubかzipでエクスポート

プレビューを拡大する

プレビューの拡大は、同じく画面右下のメニューにある拡大アイコンからできます。別タブが開くので、全体を確認したいときに便利です。

拡大アイコンでプレビュー

CodePenの登録から専用コードの埋め込みまでをご紹介しました。ワークスペースを開くとすぐにコードの入力画面になるので、セーブなどの簡単な設定ができれば完成!

拡張機能が充実したエディタもありますが、ファイルの用意やインストールの時間をとらずにその場でスタイルを共有したいときにおすすめです。