32944


Atomでタブバーの幅を変えるにはどうしたら良いですか？

[![画像の説明をここに入力](https://i.stack.imgur.com/1s1ru.png)](https://i.stack.imgur.com/1s1ru.png)


CC BY-SA 3.0
2017-02-25T07:55:20.510
32939
2017-08-19T10:00:54.593
12297
question
atom-editor
Atomでタブバーの幅を変えるにはどうしたら良いですか？


英語で使ってるので、コマンドの正確な名前は違うかもしれませんが

  * 設定 > テーマ（左リスト内） > （歯車ボタン） > タブサイズ

から変えられます。

もっと自由に変えたい場合はスタイルシート（設定を開くコマンドの近くに開くコマンドがあります）で

[code]

    .tab-bar {
      font-size: 21px; // 文字サイズ
    
      .tab {
        min-width: 10em !important; // 最小タブ幅
        max-width: 19em !important; // 最大タブ幅
    
        //　ネタ
        color: green !important; // 文字色
        .title::before {
          content: " ";
        }
        .title::after {
          content: " ";
        }
      }
    }
    
[/code]

の様にすると、以下のようになります。  
[![画像の説明をここに入力](https://i.stack.imgur.com/1F2KJ.png)](https://i.stack.imgur.com/1F2KJ.png)


CC BY-SA 3.0
2017-02-25T11:16:42.650
32944
2017-02-25T11:31:24.777
2017-02-25T11:31:24.777
3974
3974
32939
answer


`Ctrl`+`Shift`+`I`などから開発者ツールを起動し、タブバーの部分にどんなCSSが適用されているか確認してください。

そのあと`Ctrl`+`,`からSettingsを開き、"Open Config Folder"
から設定ファイルのあるフォルダにし、スタイルシートを編集すればよいです。

たとえば次のCSSはタブバーの最小幅を設定します。

[code]

    .tab-bar {
      .tab {
        min-width: 100px;
      }
    }
    
[/code]

他には`active`(今見ているタブにつくクラス)などのクラスや、`max-
width`、`flex`などのプロパティがあります。Atomのバージョンやテーマによってここらへんは変わりうるので、適宜設定してください。


CC BY-SA 3.0
2017-02-25T11:24:31.090
32945
2017-08-19T10:00:54.593
2017-08-19T10:00:54.593
19110
19110
32939
answer