コードが見やすく使いやすいSublime Text 2/3のテーマのまとめ

サイト構築 -制作

Post on:2014年9月22日

sponsors

生成 AI と著作権？5分で分かるAdobe Fireflyの安全な商用利用のための設計 | アドビ公式

シンプルで見やすく、Web制作時などのコーディング作業が捗る使いやすいSublime Text 2や3のテーマを紹介します。使い慣れたエディタもテーマを変えると新鮮な気持ちになりますよね。

まずは、最近リリースされたSublime Text 2/3のテーマから。
テーマファイルをインストールする方法や日本語化は、一番下にまとめました。

El Capitan (ST3 対応)

OS X Yosemiteにインスパイアされた明るいカラーをベースにしたテーマ。

Seti_ST3 (ST3 対応)

ファイルタイプごとのカラフルなアイコンが使いやすいテーマ。
最近は、このテーマがお気に入りです。

Zenburn (ST2/3 対応)

長時間のコーディング作業でも目に優しいカラーが素敵なテーマ。
勝負の時は、カラースキームにこれを使ってます！

Reeder (ST2 対応)

RSSリーダー「Reeder」っぽい優美なカラーがいい感じです。
ZenburnとReederを切り替えて使ってて、テキスト主体の時にはこっち。
※ST2用ですが、「Packages」にテーマファイルを直接置くことでST3でも利用できます。サポートはされていないので自己責任で。

Fizzy (ST2/3 対応)

Laravelのシンタックスのカラーを参考にしたSodaベースのテーマ。

ここから下は、定番テーマや人気テーマをご紹介。

Soda (ST2/3 対応)

Dark, Lightの2種類のカラーが用意されており、すっきりしたUIは多くのテーマファイルのベースにもなっています。

Spacegray (ST2/3 対応)

Eighties Dark, Ocean Dark/Lightが用意されており、そのミニマルなUIはファンが非常に多いテーマです。

Nexus (ST2/3 対応)

アクセントにNexusのカラーを使ったダーク系のテーマ。

flatland (ST2/3 対応)

フラットにデザインされたテーマで、サイドバーがとても分かりやすいです。

itg.flat (ST2/3 対応)

Retinaにも非Retinaディスプレイにも対応したフラットなテーマ。

Toy Chest (ST2/3 対応)

カラフルなカラーがおもちゃっぽいかわいいテーマ。

Farzher (ST2/3 対応)

Web制作者が使いやすいようデザインされたテーマ。Bright, Dark, Neonの3種類を用意。

Tomorrow (ST2 対応)

夜をイメージした4+1種類のカラーを備えたテーマ。

Freesia (ST3 対応)

パープルを多めに使ったダーク系のローコントラストのテーマ。これが見やすいという人にはたまらないカラーリングです。

Aprosopo (ST2/3 対応)

カラー、タブ、サイドバーなどカスタマイズ性を備えたテーマ。

Focus (ST2/3 対応)

インラインのテキストを編集する時に集中するためのテーマ。HTMLだけでなく、Markdownにもその威力を発揮します。カラーはダークの他に、ライトもあります。

Sublime Text 2/3の日本語化

Sublime Text 2/3のメニューを日本語化します。

Japanize (ST2/3 対応)

Package Controlから「Japanize」をインストールし、その後表示される説明に従ってファイルを移動して利用します。
※Package Controlの説明は、下記に。

Sublime Textにテーマファイルをインストールする方法

テーマのインストール方法は、主に2種類あります。

Package Controlでインストール（コマンドベースの作業、慣れると楽）
zipファイルでインストール（ダウンロードファイルを設置、安心で簡単）

Package Controlでインストール

まずは、Package ControlをSublime Textにインストールします。

Sublime Textのメニュー [View - Show Console]でコンソールを表示します。
Installation -PackageからSublime Text 2または3用のコードをコピーして、コンソールにペーストして、Enterキーを押します。
メッセージが表示され、Sublime Textを再起動して、完了です。
完了すると、メニュー [Tools]から「Command Pallete」が利用できるようになります。

Package Controlからテーマをインストールします。

Sublime Textのメニュー [Tools - Command Pallete]でコマンドパレットを表示します。
「Package Control: Install Package」を選択します。
テーマを指定します。
Spacegrayだと「Theme - Spacegray」を指定し、Enterキーを押します。
これでインストールは、完了です。

テーマとカラーをアクティブにするには、下記の手順です。

Sublime Textのメニュー [Preferences - Settin-User]を選択し、設定ファイルを開きます。
設定ファイルに、各テーマ用のコードを記述し、再起動するばテーマが反映されます。
Spacegrayだと、下記のようになります（※各テーマごとにコードが異なります）。

{
  "theme": "Spacegray.sublime-theme",
  "color_scheme": "Packages/Theme - Spacegray/base16-ocean.dark.tmTheme"
}

zipファイルでインストール

Package Controlを触るのが怖い人は、こちらが安全です。

テーマファイルをダウンロードし、解凍します。
解凍したフォルダは、必要があればリネームをします。
リネームは「Theme - テーマ名」で、Spacegrayは「Theme - Spacegray」にします。
フォルダをSublime Text内の「Packages」フォルダ内に移動します。「Packages」フォルダは、メニュー [Preferences - Browse Packages」で表示できます。
Sublime Textを再起動します。

カラーをアクティブにするには、下記の手順です。