【非SEがブログ構築】VSCodeをダウンロードしてみた

ブログをつくってみたけど、細かい部分のデザインをCSSで変えてみたいということありませんか？

私はSE職ではないので難しいコードの内容をすべて理解できませんが、少しある知識とネットの力を借りて、このブログのいろいろな箇所をCSSで自分の思うデザインに変えています。

少しCSSを書き換えるならば、ワードプレス内の「追加CSS」で行うのが初心者の方にはおススメです。

ただワードプレス内での直接作業は画面も狭く、作業効率が落ちるのが厄介なところです。

そこで、私はパソコン内にテキストエディタというものをダウンロードし、そこで作業をしています。

テキストエディタで作業をすれば、Wordのドキュメントのように一つデータを作ることになるので、バックアップ（メモ代わり）としても書き換えた内容をパソコン内に保存しておけます。

今回は新しく「Visual Studio Code（VS Code）」というテキストエディタをインストールしてみたので、その選んだ理由とインストール・日本語化の手順を解説していきます。

1｜Visual Studio Codeは無料で使える

テキストエディタは無料のものから有料版まで様々なものが出ています。

1-1｜Dreamweaverからお引越し

私はIllustratorとPhotoshopも使っていたので、以前はAdobe社の販売するテキストエディタ「Dreamweaver」を使っていました。
ブログ構築をした当時は細かなデザインを変更するため、頻繁にDreamweaverを使ってCSSを書いていました。

しかし1年間の利用ライセンスが切れ、利用頻度や料金を考えた結果、更新のタイミングでIllustratorだけの購入に切り替えました。

そして、再びCSSを書き換えたいと思ったため、新しく無料のテキストエディタをインストールすることにしました。

1-2｜非SEなのにテキストエディタを使う理由

簡単なCSSの書き換えであればワードプレス内にある「追加CSS」に書き込みをすればOKです。

ただ「追加CSS」の作業スペースはかなり狭く、コードの内容が1行に収まりきらず改行されることもしばしばあります。

そこで私は、事前にテキストエディタで下書きをしてから「追加CSS」に貼り付ける作業を行っています。

わざわざテキストエディタを使わなくても…という方もいるかもしれませんが、コードを書くためのテキストエディタだと単語の入力ミスを教えてくれたり、コード内にメモ書きを残すこともできるので、作業がしやすくなります。

1-3｜Visual Studio Codeを選んだ理由

無料のテキストエディタにはいくつか種類があります。

秀丸エディタのように日本ではかなり古株のツールから、Atomのように比較的新しいエディタまでさまざまです。

	Windows	Mac
Visual Studio Code	〇	〇
Sublime Text 3	〇	〇
Atom	〇	〇
TeraPad	〇	×
サクラディタ	〇	×
秀丸エディタ	〇	×
Notepad++	〇	×
CotEditor	×	〇
mi	×	〇

入力ミスを指摘してくれる

私が選ぶ時に重視したのは、入力ミスを指摘してくれるデバッグ機能の有無です。

プロ並みにコーディングするわけではありませんが、慣れていないからこそ入力時にキーワードの補助をしてくれたりコードの入力間違いを指摘してくれる方が有難いです。

エディタの背景は暗い色がいい

エディタの背景は白より黒っぽい色のものを選びました。

ブログの記事を書く時も当てはまりますが、白い背景は長時間の作業には目が痛くなります。
そのためエディタの背景色も黒っぽい色にできることを重視しました。

エディタによっては変更できるかもしれませんが、そこまで設定するのは面倒なので標準が黒いものを選択しました。

結果的にVisual Studio Codeを選んだ

入力ミスの指摘機能と背景色を重視すると「Visual Studio Code」「Sublime Text」「Atom」のどれかとなりました。

その中でもVisual Studio Codeが様々なサイトで使い方を解説されていたので、困った時にも答えが見つかりそうだと思い選びました。

2｜Visual Studio Code（VSCode）のインストール手順

2-1｜インストーラーのダウンロード

Visual Studio Codeをパソコンにインストールするには、まずはインストーラーをダウンロードします。

サイトトップの右上にある「Download」をクリックします。

利用するパソコンのOSに合わせてブルーの一番上のボタン「Windows8、10、11」を選択します。

クリックすると自動でインストーラーのダウンロードが開始します。

2-2｜Visual Studio Code（VSCode）をダウンロード

先ほどパソコンにダウンロードされたインストーラーをクリックします。

私はデスクトップにダウンロードされました。
デスクトップにない場合は、ブラウザのダウンロードの保存先ファイルを確認してみてください。

2-2-1｜規約への同意

Visual Studio Codeを利用するための規約を確認し「同意する」にチェックを入れて「次へ」をクリックします。

2-2-2｜インストール先の指定

表示されているフォルダ場所のままでOKなので、「次へ」をクリックします。

2-2-3｜スタートメニューフォルダーの指定

Visual Studio Codeをスタートメニューに載せるか選べます。

一覧に載っていればそれは表示されている内容のまま「次へ」をクリックします。

もし不要な場合は「スタートメニューフォルダーを作成しない」にチェックをいれて進んでください。

2-2-4｜追加タスクの選択

デスクトップ二ショートカットアイコンを配置するか選べます。

ショートカットを作る方は「デスクトップ上にアイコンを作成する」にチェックを入れます。

またVisual Studio Codeを立ち上げやすくするために下記の2項目にもチェックを入れ「次へ」をクリックします。

「次へ」をクリックするとデスクトップにVisual Studio Codeのショートカットが出来上がるよ

2-2-5｜インストールの準備完了

これまで設定した内容を確認し、問題が無ければ「次へ」をクリックします。

Visual Studio Codeがパソコンにインストールされるのを待ちます。
10秒くらいで完了しました。

2-2-6｜セットアップウィザードの完了

パソコンにインストールが完了したので、「Visual Studio Codeを実行する」にチェックを入れたまま「完了」をクリックします。

以上でインストールの作業は終了です。
このままでも使えますが、すべて英語の表記なので日本語に変更する設定を行っていきましょう。

3｜Visual Studio Code（VSCode）の日本語化の手順

Visual Studio Codeを日本語表記にするには、エディタ内の拡張機能を使って変更をします。

3-1｜拡張機能を選ぶ

3-1-1｜拡張機能のメニューを開く

エディタの左側のメニューアイコンから「Extensions（拡張機能）」をクリックします。

3-1-2｜拡張機能「Japanese Language Pack for Visual Studio Code」を検索する

検索欄に「japanese」と入力します。
検索結果の中に「Japanese Language Pack for Visual Studio Code」（製作者：MicroSoft）が出てくるはずです。

3-1-3｜日本語表記のための拡張機能をインストールする

拡張機能をクリックすると右側のパネルにアプリの詳細が表示されます。
詳細にある「Install」をクリックします。

3-1-4｜Visual Studio Codeを再起動する

「Install」にチェックがつくと、画面右下に「Change Language and Restart」との案内が表示されるので、クリックします。

自動で再起動され、日本語に変わっているはずです。

これでVisual Studio Codeの設定は完了！

4｜【まとめ】Visual Studio Codeはブログのcss書き換えにも使いやすい

今回はブログのデザインをCSSで書き換えるために使うテキストエディタ「Visual Studio Code」を紹介しました。

実際に使ってみると、インストール後すぐに編集を開始でき、初期の設定も必要なく手間をかけずに利用できました。
そのため、SEではないけど自分のブログを少し編集したい人にとってVisual Studio Codeは機能がシンプルで使いやすいものになっていると感じました。

インストールや日本語化も10分ほどで設定が終わりますし、無料なので、試しに使って見るにはおススメなエディタです。