やる気を出した子一等賞

webのこと、映画のこと、ゲームのこと、音楽のことなんかを綴ってます。

SublimeText3のおすすめテーマ「Material Theme」が可愛いし効率良いしでヤバイ

SublimeText3のおすすめテーマ「Material Theme」が可愛いし効率良いしでヤバイ

この記事はたぶん 7 分で読めます。
だいたいの人におすすめの記事

【公開日:2017年4月1日 02:09:10】 【更新日:

Pocket

こんにちは。今日は初めてweb関連の記事を書きたいと思います。

僕はコーディングの際、「Sublime text3」という超クールな無料エディターを使ってます。
周りのみんなはAdobeのDreamWeaverばかり使ってますが、出来る人はほとんどSublimeか、ATOMというテキストエディターを使ってます。

つまり私はできる人。ふふ。

というのはさておき、SublimeTextを使ってる人はマジで出来る人に見えます。
だってほら、見て。この作業画面。

SublimeText3のデフォルトテーマ
デフォルトの作業画面

超クール。

みんながこの画面(DreamWeaver)
dreamweaveerの作業画面
で作業してる中、1人だけこんなダークグレーな画面で作業してたらなんかかっこ良く見える。

それでいて、腕には大きめのG-SHOCK。
デスクの上にはなぜか常に最新モデルのiphone。しかもゴールドカラー。
定時になったらオレンジ色のマウンテンパーカー着て、メッセンジャーバッグを身に着け、
「おいっす。つかれっしたー。」
みたいな感じでハンドルがクイって曲がってる自転車で帰る。

これが僕の理想の人(嘘)

さて、SublimeText3のテーマの話に戻りますが、デフォルトのテーマだけでもこんなにかっこいいのに、「Material」というテーマを入れたらこんなにかっこ良くなります。

Materialテーマ①
サブライムテキストのマテリアルテーマ

 
Materialテーマ②サイドバー
サイドバーアップ

 
Materialテーマ③検索窓
検索窓

どうっすか。可愛くないっすか。

今まではLIGの記事でおすすめされてたFlatLandとかいうフラットデザインなテーマを使ってましたが、
これがそもそもSublimeText2までしかサポートされてなかったのと、サイドバーのアイコンがケアされてないテーマだったので、Materialに乗り換えました。

この記事ではMaterialの魅力だけを伝えていきます。
「俺もMaterialをインストールしたいんだけど。」という方はこちらの記事をご参照ください。
かなり分かりやすくインストール方法が書いてあります。

※当記事は
「サブライムテキスト テーマ マテリアル」
「サブライムテキスト material」
「サブライムテキスト テーマ 見やすい」
などのワードで検索される方におすすめです。

Materialの魅力①サイドバーが見やすい

Materialのサイドバー
Materialのサイドバーは、ファイルごとにアイコンが表示されているので分かりやすい。
今ではアイコンが表示されるテーマは珍しくないですが、「このテーマすごい見やすいのにアイコンが見れないな」という惜しいテーマも多かったので、かゆいところに手が届くMaterialは素晴らしい。

しかもマウスオーバーでフォルダアイコンやタブがアニメーションするのも嬉しい。
サイドバーアニメーション

サイドバーに関するおすすめ設定

Materialのデフォルトではこんな感じですが、
デフォルトのサイドバー

こういう感じで小さめにできます
小さめサイドバー

文字サイズが変わってないので少々分かりにくいですが、縦のマージンが狭くなってます。

フォルダ階層が深くなるとサイドバーはどんどん縦長になってってしまうので、個人的には小さめが使いやすい派。
では、その設定方法を晒しておきます。

1.メニューから 「基本設定 > Package Setting > Material Theme > Configuration」まで進む
└もしくは、「ctrl」+「shift」+「p」同時押し→表示されたウィンドウで「Material theme: onfiguration」と入力しエンター
2.「Cofig – Material Theme」という小さいウィンドウが表示されるので、その中の「sidebar」をクリック
3.「material_theme_compact_sidebar」にチェックを入れる
OK!

Materialの魅力②タブもオシャレ

タブの拡大画像
見やすいかどうかはさておき、Materialはタブもオシャレ。
オンマウスで若干アニメーションもします。

また、サイドバー同様タブも小さめ設定でき、個人的にはそっちの方が作業しやすので、その設定方法を晒してきます。

タブに関するおすすめ設定

1.メニューから 「基本設定 > Package Setting > Material Theme > Configuration」まで進む
└もしくは、「ctrl」+「shift」+「p」同時押し→表示されたウィンドウで「Material theme: onfiguration」と入力しエンター
2.「Cofig – Material Theme」という小さいウィンドウが表示されるので、その中の「Tabs」をクリック
3.「material_theme_small_tab」と「material_theme_tabs_autowidth」にチェックを入れる
OK!

〇解説

・material_theme_small_tab
タブを小さくする

・material_theme_tabs_autowidth
タブの横幅を可変にしてくれる。
デフォルトではタブの横幅はファイル名に拘わらず固定だが、これにチェックを入れると、ファイル名が短い場合はそれに合わせてタブの幅が小さくなってくれるので嬉しい。

これが
Sublimetext3のMaterialテーマのタブ 大きいバージョン

こうなります
Sublimetext3のMaterialテーマのタブ 小さいバージョン

Materialの魅力③サブカラーを変えられる

これが地味に嬉しい。
いつでも手軽に、その日の気分でサブカラーを変更できる。
僕は常にライムグリーン。

acid-lime(強めのライムグリーン)
acid-lime(強めのライムグリーン)

 
blue(青)
blue(青)

 
bright-teal(水色)
bright-teal(水色)

 
orange(普通のオレンジ)
orange(普通のオレンジ)

 
yellow(黄色)
yellow(黄色)

サブカラーを変更する方法

1.メニューから 「基本設定 > Package Setting > Material Theme > Configuration」まで進む
└もしくは、「ctrl」+「shift」+「p」同時押し→表示されたウィンドウで「Material theme: onfiguration」と入力しエンター
2.「Cofig – Material Theme」という小さいウィンドウが表示されるので、その中の「Accent」をクリック
3.表示される項目の、上から順にチェックを入れていき、好きな色を選ぶ
OK!

2017年4月現在、カラーは全15色から選べます。

補足:検索窓に表示されるアイコンの説明

Materialテーマに限定した話ではありませんが、検索窓のアイコンの意味が分からなかったので、これを機に調べました。

①Regular expression(正規表現)

Regular expression(正規表現)
正規表現を使って検索のオン/オフ。
参照:サルにもわかる正規表現入門

②Case senitive(大文字・小文字の認識)

Case senitive(大文字・小文字の認識)
英字の大文字・小文字を意識した検索にするか否か

③Whole word(単語全体)

Whole word(単語全体)
例えばこれをオンにして「ほげほげ」で検索した場合、「これはほげほげ」とか「ほげほげです」とか、何かしらの文字が引っ付くとヒットしなくなる。
「これは ほげほげ です」みたいに、検索ワードの両側に半角スペースを入れたりすると検索でヒットする。

④wrap(包む)

wrap(包む)
ファイルの最後まで検索したらファイルの先頭に戻って検索する

⑤In selection(選択範囲内)

In selection(選択範囲内)
選択範囲内を検索する
※ごめんなさい。これの使い方が良く分かりません。これによって何が変わるのかご存じの方がいましたら、ぜひコメントか何かでご教示ください・・・。

⑥Highlight matches(ヒットしたワードをハイライト)

Highlight matches(ヒットしたワードをハイライト)
検索キーワードにマッチした箇所をborderで囲って視認しやすくする

まとめ

Materialテーマを導入してから仕事が凄く楽しい。
この記事もMaterialで書いてます。

デザイン自体は作業効率に影響無いと思われがちですが、好きなデザインテーマで作業するとモチベーションアップに繋がるのは自分でもよく分かります。

SublimeTextは、Material以外にもテンションが上がるテーマがいくつもあるので、いろいろ試してみるのもいいかもしれませんね。

僕はしばらく浮気しませんが。

-web

この記事をこねた人

前原と申します。
当ブログは、毎日の妄想や生き方、疑問や感動した映画、音楽、ゲームなど、いろいろまとめてる雑記です。
目指せ1日1000pv
【職業】web諸々
【趣味】考えをまとめる
【好きな食べ物】ネオソフト・きなこご飯
【ストレングスファインダーの結果】着想/最上志向/内省/共感性/運命思考

音源公開してます。
youtubeチャンネル

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

関連記事

dio110(ディオ110)レビュー。これは買うべきスクーター。

まず、小型自動二輪の免許を取りました。 そのことについてのブログ↓  やる気を出した子一等賞 (~125cc)普通四輪免許所持者が、AT限定小型自動二輪免許取得までの経緯と、取得. …

Inspiron 3000シリーズ「3179(赤)」を半年使ってみてのレビュー

DellのノートPC「Inspiron 11 3000」シリーズの最上位モデル「3179」を手に入れて半年近く経ちましたので、使用感をまとめてみます。 ※当記事は 「Inspiron 11 3179  …

格安サーバでもWPが使える「SQLite Integration」は脆すぎるのでおすすめしない

僕は以前さくらサーバーの一番安い「ライトプラン」で、このブログを使っていました。 ちなみにライトプランではワードプレスが使えません。 しかし、「SQLite Integration」という、ワードプレ …

【111個】お気に入りのbokete解放!

毎日2回はチェックしてる神アプリ(サイト)の bokete。 個人的に最高に面白いボケをピックアップしてみました。     二人の純粋な真顔と ジャイアンの哀愁漂う後姿がいいwww …

7ボタンマウス導入すると捗り過ぎてヤバイ

「ストレングスファインダー さあ、才能(じぶん)に目覚めよう」 のテストを受けて、「最上志向」が3番目に来た前原です。 ちなみに1番は「着想」でした。 関連記事:「着想」に優れている自分を分析してみる …

人気記事

人気記事

新着記事