知らなきゃ絶対損するPCマル秘ワザ
『月,水,金』の週3回更新!(予定)

こんにちは、さち です。
先日、「Sublime Text 3」に
カラーコードをインラインプレビュー(色見本)で確認できる「ColorHelper」
Photoshop 風のカラーピッカーが使える「ColorPicker」
2つのパッケージを新しく導入しました。
今回は、これらのパッケージの機能や設定などについて
書いていきます。
カラーコードの横に色見本を表示する「ColorHelper」
- パッケージ「ColorHelper」を導入すると
カラーコードの横にインラインプレビュー(色見本)が表示されるようになります。 - インラインプレビューをクリックすると
カラーコードの記述形式、パレットやピッカーからの色選択
現在の色をパレットにお気に入り登録(mark)ができます。 - カラーピッカーはこんな感じ。エクセルの「色の設定」みたいですね。
Photoshop 風のカラッピッカーを実装する「ColorPicker」

「ColorPicker」パッケージを導入すると
上のような、カラッピッカーを使用できるようになります。
Photoshop 風のデザインのカラーピッカーなので
Photoshop に慣れ親しんでいる人に使いやすいと思います。
前述の、「ColorHelper」と連携することで
「ColorHelper」のカラーピッカーを「ColorPicker」のものに変更できます。
ただ、カラーピッカーの動作が若干重いのが難点です。
「ColorHelper」の設定
下記解説は、Sublime Text 3 を Japanize によって日本語化しています。英語表示で使用している場合は適宜読み替えて下さい。
- メニューの「基本設定」→「Package Settings」と進みます。
- 「ColorHelper」→「Settings」と進みます。
- 「color_helper.sublime-settings - User」の方に変更する設定を記述します。
初期設定の方に各項目の解説(英語)があるので大体分かると思います。
私は下記のように設定を変更しました。{
// インラインプレビュー(色見本)の位置を右に
"inline_preview_position": "right",
// カラーボックスのサイズを小さく
"graphic_size": "small",
// カラーボックスをクリックしたらカラーピッカーを開く
"click_color_box_to_pick": "color_picker",
// カラーピッカーに「ColorPicker」パッケージを使う
"use_color_picker_package": true,
// カラーコードを大文字で記述
"upper_case_hex": true,
}
「ColorPicker」の設定
「ColorPicker」を起動するショートカットキーが機能しなかったのでユーザのキーバインドとして登録します。
下記解説は、Sublime Text 3 を Japanize によって日本語化しています。
英語表示で使用している場合は適宜読み替えて下さい。
- メニューの「基本設定」→「キーバインド - ユーザ」と進みます。
- 「ColorPicker」を表示するショートカットキーを記述します。
下記例の場合、「Ctrl + Shift + C」キーを押すとカラーピッカーが表示されます。{
//「ColorPicker」を起動するショートカットキー
{ "keys": ["ctrl+shift+c"], "command": "color_pick" },
}

| ホーム |