こんにちは、さち です。
先日、「Sublime Text 3」に
カラーコードをインラインプレビュー(色見本)で確認できる「ColorHelper」
Photoshop 風のカラーピッカーが使える「ColorPicker」
2つのパッケージを新しく導入しました。
今回は、これらのパッケージの機能や設定などについて
書いていきます。
カラーコードの横に色見本を表示する「ColorHelper」
概要
- パッケージ「ColorHelper」を導入すると
カラーコードの横にインラインプレビュー(色見本)が表示されるようになります。
- インラインプレビューをクリックすると
カラーコードの記述形式、パレットやピッカーからの色選択
現在の色をパレットにお気に入り登録(mark)ができます。
- カラーピッカーはこんな感じ。エクセルの「色の設定」みたいですね。
設定
下記解説は、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, }
Photoshop 風のカラッピッカーを実装する「ColorPicker」
概要
「ColorPicker」パッケージを導入すると
上のような、カラッピッカーを使用できるようになります。
Photoshop 風のデザインのカラーピッカーなので
Photoshop に慣れ親しんでいる人に使いやすいと思います。
前述の、「ColorHelper」と連携することで
「ColorHelper」のカラーピッカーを「ColorPicker」のものに変更できます。
ただ、カラーピッカーの動作が若干重いのが難点です。
設定
「ColorPicker」を起動するショートカットキーが機能しなかったので
ユーザのキーバインドとして登録します。
下記解説は、Sublime Text 3 を Japanize によって日本語化しています。
英語表示で使用している場合は適宜読み替えて下さい。
コメント