普段使いのブラウザーをVivaldiに変更しました。かつてのFirefoxのようにブラウザー自体のUIをCSSでカスタマイズできるので、メモとして手順を残しておきます。
Vivaldiとは？
Vivaldiは、Opera (今ではもう中国企業の手に…) からスピンアウトして設立されたVivaldi Technologiesが開発している、Chromiumをベースとしたブラウザーです。
※Googleの同期システムはChromium向けには提供されていないため、Vivaldi独自の同期システムが搭載されています。
開発当初からカスタマイズ性が重視されており、設定ではかなり細かく見た目や操作を変えられます。逆に言えば「インストールしてそのまま使いたい」という人には向いていません。
Vivaldiの機能としては
- Chrome拡張機能のインストールが可能
- サイドバーでブックマークやウェブサイトを表示
- 複数ページを一画面で開けるタブタイリング
- クイックコマンドでのタブ・新規検索
- マウスジェスチャー
- Razer Chroma・Philips Hue連携
といったものがあります。
ページを開くときにワンテンポ遅れたような表示になるのが少しマイナスですが、そんなデメリットよりカスタマイズ性が高くサイドバーがあるというメリットのほうが大きいです。
Vivaldi Browser
UIを自由にカスタマイズできる
かつてのFirefoxでは、拡張機能やuserChrome.cssでブラウザーUIを好きなようにカスタマイズできました。ところが現在ではuserChrome.cssはレガシー扱いされデフォルトでは使えず、拡張機能もChrome拡張と同じようなことしかできなくなりました。
Vivaldiに搭載されている試験運用機能「Allow for using CSS modifications.」を使用すると、Chromiumベースの恩恵を受けつつFirefoxのようにUIをカスタマイズできるようになります。
有効化するには、アドレスバーにvivaldi://experiments/と入力し、Allow for using CSS modifications.にチェックを入れて再起動します。
すると、設定→外観に「オリジナルカスタムUI」が表示されます。
.cssファイル (UTF-8) を置いたフォルダを指定して再起動すれば、そのフォルダ内のCSSがすべて読み込まれます。
UIの要素を調べるには、Vivaldiの起動オプションに --debug-packed-apps --silent-debugger-extension-apiを追加して起動してください。例：C:\Users\User\AppData\Local\Vivaldi\Application\vivaldi.exe --debug-packed-apps --silent-debugger-extension-api
ちなみに、browser.htmlを編集すればスクリプトも実行させられます。
Vivaldi Forum
使っているCSS
一応私が使っているCSSを載せておきます。
ブックマークパネルの下にあるプレビューパネルを隠す
ブックマークパネルの下にある、プレビュー・編集パネルは高さ調整できますが、再起動すると戻ってしまいます。スペースを取っている割にはタイトルやURLを詳しく見られるわけでもないので、消してしまいました。
消した後もアドレスバーのブックマークボタンなどで編集できます。
/* ブックマークパネルの下にあるプレビューパネルを隠す */
.panel-bookmarks-edit{
display: none !important;
}
ブックマークパネルのタイトルと + – ボタンを隠す
ブックマークパネルの上部のタイトルと、新規作成・削除ボタンを消します。
/* ブックマークパネルのタイトルを隠す */
#panels > div.panel-group > div > div.panel.panel-bookmarks > header > h1{
display: none !important;
}
/* ブックマークパネルの + - ボタンを隠す */
#panels > div.panel-group > div > div.panel.panel-bookmarks > header > div > div{
display: none !important;
}
パネルの幅を狭くする
HiDPI対応にしていると「UI全体としてはちょうど良いサイズ感だけど、パネルの幅がちょっと広い」という状況になったので、最小幅より狭くしています。
/* パネルの幅を狭くする */
#panels-container{
width: 200px !important; /* 好きな幅に変更 */
}
.panel-group .panel-collapse-guard{
min-width: 100px !important; /* ここは適当に */
}
タブの上にあるスペースをなくす
タブの上に何故かスペースが空いているので、誤クリック防止のためスペースをなくしました。ついでにVivaldiアイコンの高さを調整しています。
/* Vivaldiアイコンをファビコンと同じ高さに */
.vivaldi-v{
padding-bottom: 9px;
}
/* タブの上のスペースをなくす */
#tabs-container.top {
padding-top: 0px !important;
}
タブを閉じるボタンを常に表示する
操作するボタンが隠れているのが嫌なので、閉じるボタンを常に表示させています。
/* タブを閉じるボタンを常に表示する */
.tab-position .tab .close {
display: block !important;
opacity: 0.5;
}
.tab-position .tab .close:hover {
opacity: 1.0;
}
その他躓いたところ
@font-face { src: local(<name>) }が動作しない
ウェブサイトで使われているMS Pゴシックや游ゴシックを排除するため
@font-face {
font-family: "ＭＳ Ｐゴシック";
src: local("Koruri");
}
のように指定しているのですが、反映されません。PostScript名やフルフォント名を指定しても反映されませんでした。
vivaldi://flagsにて、Match @font-face { src: local(<name>) } names by PostScript and full font name.をDisabledにして再起動すれば反映されます。
ツールバーの拡張機能アイコンを並び替えたい
ツールバーに表示される拡張機能アイコンは、Shiftキーを押しながらドラッグすれば並び替えられます。
文字・フォントがぼやける
高画素密度 (HiDPI) なモニターだと、文字の表示がぼやけたり、かすれたりすることがあります。
起動オプションに-high-dpi-support=1 -force-device-scale-factor=1 -force-device-scale-factor=1.4というように追加すれば修正できます。1.4は好きなように調整してください。
また、M+やKoruriなど一部のフォントでは、ヒンティング情報があることで表示がガビガビになることがあります。
ttfautohintGUIをダウンロードして、Dehintにチェックを付けてFamily suffixに「-dehint」などと入れてヒンティング情報を削除したフォントを作成し、表示にそのフォントを指定すれば修正できます。
まとめ
全盛期のFirefoxのように細部までカスタマイズできるので、Vivaldiはカスタマイズ大好きな方におすすめです。
