普段使いのブラウザーをVivaldiに変更しました。かつてのFirefoxのようにブラウザー自体のUIをCSSでカスタマイズできるので、メモとして手順を残しておきます。
Vivaldiとは？
Vivaldiは、Opera (今ではもう中国企業の手に…) からスピンアウトして設立されたVivaldi Technologiesが開発している、Chromiumをベースとしたブラウザーです。
※Googleの同期システムはChromium向けには提供されていないため、Vivaldi独自の同期システムが搭載されています。
開発当初からカスタマイズ性が重視されており、設定ではかなり細かく見た目や操作を変えられます。逆に言えば「インストールしてそのまま使いたい」という人には向いていません。
Vivaldiの機能としては
- Chrome拡張機能のインストールが可能
- サイドバーでブックマークやウェブサイトを表示
- 複数ページを一画面で開けるタブタイリング
- クイックコマンドでのタブ・新規検索
- マウスジェスチャー
- Razer Chroma・Philips Hue連携
といったものがあります。
ページを開くときにワンテンポ遅れたような表示になるのが少しマイナスですが、そんなデメリットよりカスタマイズ性が高くサイドバーがあるというメリットのほうが大きいです。
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を編集すればスクリプトも実行させられます。こちらはスタイルと違い、アップデート毎に再適用する必要があります。
使っている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;
}
ブックマークパネルのフォルダをシングルクリックで開く
こちらのCSSでブックマークのフォルダを一回クリックすれば開けるようになります。
フォルダとフォルダ内の項目のインデントを調整するため、以下のようにカスタムしています。深い階層も変えたい場合はstyle*=”margin-left:のところを一階層目が16px、二階層目が32px…と16ずつ増やしていってください。
/* ブックマークのフォルダを一回クリックで開く */
.panel.panel-bookmarks .vivaldi-tree .tree-row.folder .expand-icon {
width: 100%;
height: 100%;
position: absolute;
margin: 0 !important;
}
.panel.panel-bookmarks .vivaldi-tree .tree-row.folder .expand-icon > svg {
display: none;
}
/* ブックマークフォルダ 一階層目のインデント */
.panel.panel-bookmarks .vivaldi-tree .tree-row.folder .expand-icon[style*="margin-left: 0px"] + svg {
margin-left: 0px !important;
}
/* ブックマークフォルダ 二階層目のインデント */
.panel.panel-bookmarks .vivaldi-tree .tree-row.folder .expand-icon[style*="margin-left: 16px"] + svg {
margin-left: 4px !important;
}
/* ブックマークアイテム 一階層目のインデント */
.panel-bookmarks .vivaldi-tree .tree-row label img[style*="margin-left: 16px"] {
margin-left: 4px !important;
}
/* ブックマークアイテム 二階層目のインデント */
.panel-bookmarks .vivaldi-tree .tree-row label img[style*="margin-left: 32px"] {
margin-left: 8px !important;
}
/* ブックマークアイテム 三階層目のインデント */
.panel-bookmarks .vivaldi-tree .tree-row label img[style*="margin-left: 48px"] {
margin-left: 16px !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,#tabs-tabbar-container.top {
padding-top: 0px !important;
}
#browser.tabs-top #header{
min-height: auto !important;
}
タブを閉じるボタンを常に表示する
操作するボタンが隠れているのが嫌なので、閉じるボタンを常に表示させています。
/* タブを閉じるボタンを常に表示する */
.tab-position .tab .close {
display: block !important;
opacity: 0.5;
}
.tab-position .tab .close:hover {
opacity: 1.0;
}
UIのフォントを変えたい
以下のように’Segoe UI’, ‘Yu Gothic UI’を好きなフォントに変えれば検索バーなどUIで使われるフォントが変わります。
#browser.win:lang(ja), #browser.win + div:lang(ja), #browser.win + div + div:lang(ja), #browser.win button:lang(ja), #browser.win input:lang(ja), #browser.win select:lang(ja), #browser.win textarea:lang(ja) {
font-family: 'Segoe UI', 'Yu Gothic UI', 'Meiryo UI', Meiryo, system-ui, sans-serif !important;
}
スタートページのサムネイル上にあるボタンを非表示
スピードダイヤルのサムネイルにマウスをのせると削除ボタンなどが出ますが、間違って押しやすいので消しました。
/* スタートページのサムネイル上にあるボタンを非表示 */
.thumb-controls, .thumb-controls + .close{
display: none !important;
}
タブバーの高さ変更を無効化
タブの下の部分をドラッグするとサムネイルを表示できますが、個人的には使わないので誤操作防止で無効化しています。OneMix 3Proでタッチ操作するとき間違って触ってしまいがちなので…。
/* タブバーの高さ変更を無効化 */
#tabs-container .fullwidth{
display: none !important;
}
右上の閉じるボタンを少しずらす
別のアプリのウインドウを最大化してVivaldiに重ねているとき、画面右上をクリックするとVivaldiの閉じるボタンを押したことになってしまうことがあります。いちいち警告が出るのが面倒なので、閉じるボタンを少しずらしました。
/* 閉じるボタンを少し左に寄せる */
#browser .window-buttongroup {
right: 6px !important;
top: 2px !important;
}
スタートページのブックマーク・履歴などナビバーを消す
スタートページの一番上にブックマーク・履歴などナビゲーションバーが表示されていますが、使わないので消しました。
/* スタートページのブックマーク・履歴などナビバーを消す */
.startpage-navigation{
display: none !important;
}
v3.8～ パネルの余白を狭める
v3.8からデザインが一新されましたが、パネルの左右の余白が大きすぎる気がするので変更しました。
ちなみにv3.7からは設定→外観→メニューでコンテキストメニュー (右クリック時のメニュー) などの順番や項目を変更できるようになり、自由度がさらにアップしました。
/* パネルの左余白 */
.panel{
padding-right: 0px !important;
padding-left: 2px !important;
}
その他躓いたところ
@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キーを押しながらドラッグすれば並び替えられます。
プロセス数を制限したい
デフォルトではVivaldi (というかChrome系ブラウザー) は多数のプロセスが動くようになっています。メモリが少ないPCや、ノートPCであまり電力消費を増やしたくない場合、プロセス数を制限することで改善できることがあります。
起動オプションに--renderer-process-limit=5などと追加すればプロセス数を制限できます。タブの他に拡張機能なども入るので、実際には指定した数よりも少し多くなります。
文字・フォントがぼやける
高画素密度 (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はカスタマイズ大好きな方におすすめです。