CodePenを使ってみる

というわけで今回はCodePenの登録、簡単な使い方を解説していこうと思います。

CodePenとは

CodePen とは、HTMLやCSS、JavaScriptなどで手軽にコーディング、デモ、アニメーションをテストできるオンラインエディタのサービスです。ブログなどに貼り付け可能な無料のサービスで、コーディングの練習に最適なのです。

See the Pen Lines doing a little group dance by Natalia 🤟 (@natszafraniec) on CodePen.

↑動いていない場合は右下のRerunをクリックすると動きが始まります。

上記のように、世界中の素晴らしいクリエイターの作品を簡単にシェアできるし、自分のコーディングを掲示、動きを確認することができます。自分より数段レベルの高い方たちの作品を見ることができ、コードを見て勉強できるので刺激にもなります。

See the Pen 犬のSVG画像 by inu (@tenp) on CodePen.

これは前回のSVG画像を書き出すという記事で作った犬のSVG形式画像です。WordPressはセキュリティ上SVG画像をアップロードすることはできませんが、CodePenに読み込ませたものを表示させることはできます。

CodePenに登録する

CodePen に登録するには、まず CodePen のページを開きます（下のブロックからページへ飛びます）

今から解説する手順は2021年12月最新のものです。

サイトが開いたら右上の緑色のSign Upというボタンをクリックします。

アカウントを作成するページに移りますので、他のSNSのアカウントでログインするか新しく作るか選択します。新しく作る場合は名前やE-mailアドレスなどを聞かれるので空欄に記入し、Submitを押して投稿します。

これでアカウントは作成できました。

※メールボックスに確認用のメールが来ていますので確認しておいてください。（yahooメールなどの場合、迷惑メールに入っている可能性が高いので注意してください。）

CodePenの設定を変更する

アカウントの作成ができたら設定を変更します。

①右側上部にある、顔のついた緑色正方形のアイコンをクリックしメニューを開きます。

②出てきたメニュー下部の歯車アイコンSettingsをクリックし設定ページを開きます。

③設定ページのメニュー下部のEditorPreferencesを開きます。

EditorPreferences の中で変更しておいた方がいいのは3ヶ所です。

Code Indentation　コードを書く際にわかりやすくなるよう、インデントをTabs のラジオボタンに合わせておきます。

Preprocessor & Library Defaults　下部CSS Reset　でInclude Resetを選択します。（初期からついているCSSをリセットし、何の装飾もない状態にできます。）また、HTMLやCSSのPreprocessorによってメタ言語などを選ぶこともできます。

Editor Options　一番最後のAutocompleteにチェックを入れておきます。（コードやタブの入力候補が出て楽にコーディングできます。）

CodePenの簡単な使い方

実際コードを書いてみるには、 右側上部にある、顔のついた緑色正方形のアイコンをクリックしメニューを開き、New Penをクリックするとコーディングのウィンドウに移ります。

右上の右から３番目のアイコンをクリックするとChange Viewでウィンドウの配置を変えることができるので、好きなものを選んでください。

HTML、CSS、JavaScriptのタブが出ているスペースにコードを書くとすぐにそれが画面に反映されます。htmlもheadタグやbodyタグが不要で、最小限のタグから記述することができ簡単です。

保存の仕方、ブログへの貼り付け

保存してWordPressに張り付ける方法を解説します。

名前を付ける　左上のUntitled横のペンアイコンをクリックして作品に名前を付けることができます。つけなくても保存できますが、区別のために名前はつけておいた方が良いです。

保存　それから上部メニューの雲が描かれたSaveアイコンをクリックし保存します。

すると下部にメニューが増え、Embedを押して埋め込み用コードを取得できるページに移動します。

埋め込み用コードのページに移ったら、埋め込むウィンドウのプレビューが表示されています。このウィンドウの上下を引っ張って高さを変更することができますので、画像が切れていたらサイズを変更して見やすくしておきましょう。

下に埋め込み用のコードが出ています。

コードにはHTML推奨とWordPressのショートコードがありますが、特に違いはないので、メジャーなHTML推奨のコードを使います。

Copy Codeを押すなどして埋め込み用コードをコピーしておきます。

左下のUse-Click-to-LoadがOffになっていますが、その場合はアニメーションなどが勝手にスタートします。たくさんの作品を貼り付ける場合、たくさんのアニメが動くことになるので重くなります。量が多くなりそうなときはOnにしておいた方が良いです。

WordPressのブログ記事に張り付ける場合

WordPressで記事投稿画面において、ブロック編集にカスタムHTMLを選択します。（アイコンがなかったらすべて表示で探してください。）

HTML入力用のテキストボックスが出るので、そこに埋め込み用コードをペーストすれば張り付けることができます。