CodeでWeb制作や開発をしていると、ウィンドウを複数開きながら作業することがよくあるかと思います。画面上に複数のエディタが表示されていると、どのエディタがどのプロジェクトなのか区別しにくくなってしまいますよね。そこで今回の記事では、ワークスペースごとに色を設定できるVSCodeの拡張機能「Peacock」の紹介をしていきます。この機能を使うと、サイトカラーに合わせてワークスペースの色を変えるなどといったことが可能になります。目次Peacockのインストールまずはインストールの方法から説明していきます。VSCodeを開いて、左のバーから「拡張機能」をクリックします。そこで「Peacock」と検索し、インストールを押すと完了です!Peacockの基本的な使い方ここからは、Peacockの実際の使い方を紹介していきます。使用するものを5つピックアップしましたので、順に説明していきますね。Colorまずはデフォルトで登録されている色に変更してみましょう。Pを同時押しするか、左のバー下部の歯車マークから「コマンドパレット」を選択し、コマンドパレットを開きます。Color」を選択します。すると、以下のように数種類の色を選択できるようになります。色を矢印キーで選択してEnterを押すか、クリックすると、ワークスペースに色を適用することができます。ワークスペースが赤色に変更されているのが確認できましたね。Colorデフォルト色以外にも、自分で色を選択して使用することもできます。Color」を選択します。Pを同時に押す左のバー下部の歯車マークから「コマンドパレット」を選択すると入力欄が表示されるので、ここに好きな色を入力してください。以下の3種類のフォーマットで入力することができます。darkblueなど)Enterを押すと、ワークスペースを入力した色に変更することができます。ワークスペースの色が入力した紺色に変わっているのが確認できましたね。Favorites上の章で好きな色を追加する方法を説明しましたが、その色をお気に入り登録していつでも使えるようにする方法を紹介します。上で紹介した方法で、ワークスペースの色を設定しておきます。Favorites」を選択します。Pを同時に押す左のバー下部の歯車マークから「コマンドパレット」を選択すると入力欄が表示されるので、色に対してわかりやすい名前をつけてください。Blue」という名前にしてみました。名前を入力後Enterを押すと、お気に入りの色として登録することができます。Color」で選択できるようになります。Color」をクリック。Blue」が追加されているのが確認できました!これで他のプロジェクトでも登録した色を使用できるようになります。Color特に指定したい色がない場合は、ランダムな色を設定することが可能です。Color」を選択してください。Pを同時に押す左のバー下部の歯車マークから「コマンドパレット」を選択するとランダムな色が設定されました。基本的にはサイトカラーを手動で指定して使うことが多いですが、気分転換に色を変えたい時などに使ってみるのもアリかと思います。Colors」を選択してください。Colors」をクリックします。Pを同時に押す左のバー下部の歯車マークから「コマンドパレット」を選択ワークスペースの色が初期化されました。以上、Peacockでよく使用する5つの機能を紹介しました!Peacockカスタマイズ:settings.jsonを編集して色をカスタマイズするここからは、さらに詳細にカスタマイズする方法を紹介します。Peacockで色を変えると、ホームディレクトリに.vscodeというフォルダが自動的に生成されます。その中に入っているsettings.jsonを開くと、各パーツごとに割り当てられている色を全て確認することができます。.vscode/settings.jsonここの色を手動で変えることで、さらに自由に色を指定することができます!大抵は色を指定するだけでいい感じに配色してくれますが、もしバッジの色を変えたい・上のバーの色だけ変えたいという場合はこちらをカスタマイズしてみてください。以上、VSCodeの拡張機能「Peacock」の紹介でした。複数プロジェクトを同時進行しているときなどにエディタを複数開くことが多いですが、Peacockで色を指定しておくと一目でどのプロジェクトにいるのかがわかるので便利ですね。Web制作や開発をしている方にとってかなり役立つと思いますので、ぜひ使用してみてください。記事が役に立ったらサポートしてくださいWeb制作に関する記事案を募集中!Web制作について知りたいこと、質問等ありましたら、以下のフォームから気軽に投稿してください。要望が多かったものは解説記事を作成します。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。scale()で要素を上下・左右に反転させる方法CSS【レスポンシブ対応】padding-topで要素の比率を保持しつつサイズを可変させる方法CSS起弥フロントエンドエンジニア兵庫県出身のフリーランスフロントエンドエンジニアです。Web制作を通して気づいたこと、学んだことを発信していきます。当サイトに関する質問はこちら»ポートフォリオサイトWeb制作のポートフォリオサイトです。Web制作の実績等はこちらから確認いただけます。Note」を新設しました2022年4月16日パートナーとして一緒に仕事してくださるデザイナー様を募集中です2021年8月5日GatsbyJSでポートフォリオサイトをリニューアルしました。(2)コーディング代行「CodeHive」コーディング代行チーム「コードハイブ」を立ち上げました。