このブログのはてなブックマーク数 このエントリーをはてなブックマークに追加

知らなきゃ絶対損するPCマル秘ワザ

知らなくて損したPC情報とかを分かりやすくメモする個人ブログ。
『月,水,金』の週3回更新!(予定)

このブログ内をキーワードで検索することもできます。
Loading



最新記事
  • Windows 10 のバージョン(OSビルド)を調べてみる (12/14)
  • 年末大掃除! アイロンで貼れる障子紙の貼り替えをしてみた (12/12)
  • Stylus:スタイル「Google:ホリデーロゴ置換」を修正しました (12/10)
  • iPhone:Apple純正よりも丈夫な充電ケーブルを買ってみた (12/07)
  • Affinity Photo:「テキスト」や「画像」を中央に配置する (12/05)
  • 管理人より
    2018年の最終更新は12/24(月)
    2019年の初回更新は01/07(月)の予定です。

    Sublime Text 3:色のプレビューとPhotoshop風カラーピッカー

    このエントリーをはてなブックマークに追加
    操作画面


    こんにちは、さち です。

    先日、「Sublime Text 3」に
    カラーコードをインラインプレビュー(色見本)で確認できる「ColorHelper」
    Photoshop 風のカラーピッカーが使える「ColorPicker」
    2つのパッケージを新しく導入しました。

    今回は、これらのパッケージの機能や設定などについて
    書いていきます。




    カラーコードの横に色見本を表示する「ColorHelper」

    1. パッケージ「ColorHelper」を導入すると
      カラーコードの横にインラインプレビュー(色見本)が表示されるようになります。
      操作画面

    2. インラインプレビューをクリックすると
      カラーコードの記述形式、パレットやピッカーからの色選択
      現在の色をパレットにお気に入り登録(mark)ができます。
      操作画面

    3. カラーピッカーはこんな感じ。エクセルの「色の設定」みたいですね。
      操作画面




    Photoshop 風のカラッピッカーを実装する「ColorPicker」

    操作画面

    「ColorPicker」パッケージを導入すると
    上のような、カラッピッカーを使用できるようになります。

    Photoshop 風のデザインのカラーピッカーなので
    Photoshop に慣れ親しんでいる人に使いやすいと思います。

    前述の、「ColorHelper」と連携することで
    「ColorHelper」のカラーピッカーを「ColorPicker」のものに変更できます。

    ただ、カラーピッカーの動作が若干重いのが難点です。




    「ColorHelper」の設定

    下記解説は、Sublime Text 3 を Japanize によって日本語化しています。
    英語表示で使用している場合は適宜読み替えて下さい。

    1. メニューの「基本設定」→「Package Settings」と進みます。
      Sublime Text 3 Package Settings パッケージ設定

    2. 「ColorHelper」→「Settings」と進みます。
      操作画面

    3. 「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 によって日本語化しています。
    英語表示で使用している場合は適宜読み替えて下さい。

    1. メニューの「基本設定」→「キーバインド - ユーザ」と進みます。
      Sublime Text 3 キーバインド

    2. 「ColorPicker」を表示するショートカットキーを記述します。
      下記例の場合、「Ctrl + Shift + C」キーを押すとカラーピッカーが表示されます。
      {
      //「ColorPicker」を起動するショートカットキー
      { "keys": ["ctrl+shift+c"], "command": "color_pick" },
      }










    このエントリーをはてなブックマークに追加




    管理人だけが読めるコメントにする(返信はしません)
    【お知らせ】
    • コメントは承認制です。反映に時間がかかります。
    • スパムコメント防止のため一部ホストを規制中です。
    • URLを含む投稿はできません。必要な場合は最初のhを削って下さい。
    • 記事に直接関係ない個人のトラブルにはお答えできません。
    • Android は使用経験がないので質問を頂いても答えられません。
    • その他詳細はこちら





    記事別の週間アクセス数ランキングです。こちらの記事もぜひ読んでみて下さい。

    2008-2018 知らなきゃ絶対損するPCマル秘ワザ  無断転載禁止

    ブログパーツ