カッコイイVivaldiの外観設定
普通ブラウザでは外観設定なんて背景画像、テーマ色を変えるくらいしかできません。 （あとはブラウザ固有のバーみたいなものを表示するかしないかくらい）
Vivaldiは外観の設定好き放題いじれます。 今日はおれのかんがえたさいきょうのVivaldiの外観を紹介します。
もう、ただ誰かに見せびらかせたいだけです。
コンセプト
JetBrainsのSpaceというサービスのイメージを元に作成します。
JetBrains製品の有機・無機の中間にあるようなデザインとグラデーションカラーが最近のマイブームです。
テーマ
JetBrainsが公開しているデスクトップアートを利用したテーマです。
背景画像に合わせた色の設定をしています。
テーマとして公開しています。
UI
昨今のウェブページは縦に長く横に短いので、縦領域を確保しやすいレイアウトとします。
- ネイティブなウィンドウを使用する: OFF
- タイトルバー: ON
- アドレスバー: ON
- ブックマークバー: OFF
- タブバー: ON
- タブバーの位置: 左
- パネルバー: ON
- パネルバーの位置: 左
- ブックマークバー: OFF
- パネル開閉バー: OFF
- ステータスバー: ON
かつて表示領域絶対主義を標榜しやたらとUIを絞っていた時期もありましたが、結局縦領域さえ確保できていれば後はそこまで邪魔にならないと気付いてからこのスタイルです。
縦タブはタブの量がある程度増えてもタブタイトルが見えるという利点があるので採用しています。
カスタムアイコン
また上記のテーマに加えて、カスタムアイコンはMood yellow theme by denkuzを使わせてもらっています。
他のテーマとも組み合わせて使うくらいお気に入り。
オリジナルのMood yellowもおしゃれなのでそのまま使っていた時期もありました。
コマンドチェインのアイコンは独自のものを採用しています。
ボタンとして常駐させているのはワークスペース切り替え用のコマンドチェインだけです。
アイコンはここで拾った記憶があります。
また、下記記事のコマンドチェインを利用して、ワークスペースを切り替えるタイミングでテーマも同時切り替えています。
自分はテーマをコロコロ変えるのですが、Vivaldiのメールタブを見る時はライトテーマにした方が可読性が上がるのでテーマを切り替えるようにしています。
vivaldi.com
カスタムCSS
ここが肝です。
バーのレイアウト
フォーラムでの拾い物ですが、理想のレイアウトにかなり近くお気に入りです。
CSS職人には頭が上がらないね。
オリジナルのカスタムCSS
forum.vivaldi.net
このCSSを少し改造して、タブエリアの周りも少し背景が見えるようにしています。
オブジェクト感が増していい感じ。
github.com
このUIの良いところ
ボタンを増やしても画面の占有領域が圧迫されずらいのは自分にとってインパクトが大きいです。
今まで縦領域を増やすためにアドレスバーやステータスバーを非表示にしていた時期もありました。
ですがボタンがないと困るシチュエーションというのも稀にあり（ブラウザが重くなった際のコマンド・ショートカットキーが受け付けているかの棲み分けなど）、ボタンがあると安心感があります。
その辺の必要性とデザインのバランスが素晴らしいと思います。
まあ元はAcr BrowserのUIを真似したかっただけなんですが。
クイックコマンドの巨大化
クイックコマンドはデフォルトだと横幅が異様に狭く、行もなぜか10行分しか表示されない（しかしDOMの中には要素がある）という謎仕様なので少し巨大化させます。
github.com
ただこのCSSは不完全で、クイックコマンドの下の方にマウスカーソルを置くと勝手にスクロールしたり、フォーカスを下まで下げていくと表示が途切れたり現れたりとバグが多くて困っています。
Reactの仕様なのかわかりませんが誰か助けて。
横幅だけなら特にバグらないのでheightの部分をコメントアウトして使うのも良いと思います。
まとめ
外観設定はコロコロ変えているのでこの記事を投稿した翌日には変わってるかもしれません。
落ち着きがない自分にはそれが合っています。
