やりたいこと

MacのVivaldiでは、タブを閉じるボタン✖がタブ左側に配置されます。

ChromeやFirefoxあるいはWindowsでのVivaldiではタブ閉じるボタン✖は右側に配置されています。OSやブラウザを複数種類使う場合、ユーザインタフェースが統一されず、使いにくくなってしまいます。そこで、タブの閉じるボタン✖を右に移す方法を調べました。

調べた内容

mac vivlid close button rightなどとググると、やりかたはいろいろ出てきます。

カスタムCSSを用意してそこにスタイルを書きなさい、というのが多いのですが、特にすごくカスタマイズしたいわけではないので、一番簡単な方法としてcommmon.cssの末尾にスタイルを追加するという方法をとります。

/Applications/Vivaldi.app/Contents/Versions/<バージョン番号>/Vivaldi Framework.framework/Resources/vivaldi/style/common.css

追加する内容は以下の通り。

/* Move tab close button to the right */
.tab .close {
  order: 0 !important;
  margin-right: 6px;
}

/* Show tab favicon when mouse over */
.favicon {
  display: flex !important;
}

common.cssをエディタで編集するなどしてVivaldiを再起動すると、タブの閉じるボタン✖がタブの右側に配置されます。

スクリプトにする

ただし、Vivaldiのバージョンを上げると、この作業をやり直すことになります。
毎回やり方をググって修正するのが面倒になったのでスクリプトを書きました。


// Vivaldiのバージョンディレクトリを探す
def versionsDir = new File('/Applications/Vivaldi.app/Contents/Versions/')
def files = versionsDir.listFiles()
assert files.length == 1
def versionDir = files[0]

// common.cssに書き込み
def commonCss = new File(versionDir,'/Vivaldi Framework.framework/Resources/vivaldi/style/common.css')
assert commonCss.exists()
// https://www.reddit.com/r/vivaldibrowser/comments/82fo7p/change_position_of_the_close_tab_button/
commonCss.withWriterAppend { out ->
  out.println('''
/* Move tab close button to the right */
.tab .close {
  order: 0 !important;
  margin-right: 6px;
}

/* Show tab favicon when mouse over */
.favicon {
  display: flex !important;
}
'''
  )
}

Groovyで書きましたが、やってることはかんたんなので、自分の使いやすい言語に移してもいいと思います。