【Vivaldi】ウェブパネルの戻る・進む・ホームボタンを左寄せにするCSS
この記事では、Vivaldi のオリジナルカスタムUI機能を使って、ウェブパネルのコントロールボタンを左寄せにするCSSについて書きます。
いつもの慣れた場所（左上）で戻る・進むボタンが使えます。
ウェブパネル内にあるコントロールボタン（戻る・進む・リロード・ホームへ戻る）を左寄せにするCSS です。
左寄せにすることで、いつものブラウザの戻る・進むボタンの間隔で利用できます。
僕は定期的にウェブパネル内でサイトを閲覧するんですが、その時のコントロールボタンが右揃えになってて、ちょっと押しにくなかったんですよね…。いつものブラウザの戻る・進むボタンの位置に慣れてたら、右上ってのがどうにも慣れませんでした。
正確には、ウェブパネルの画面左上に表示されている名前（Twitter ならTwitter）を削除して、コントロールボタンを左に詰めるCSS です。
何のサイトを開いてるかは自分が一番よくわかってるので、サイト名なくてもいいなと思ったので非表示にしました。
そもそもウェブパネル（サイドパネル）って何？って方は、以下の記事を参考にしてみてください。
参考：【Vivaldi】サイドバーでTwitterやメールが確認できるパネルの使い方 | ナポリタン寿司のPC日記
オリジナルカスタムUI（CSS）を使うには？
この記事では、オリジナルカスタムUIが有効になっていることを前提に書きます。
有効にしていないという方は、以下の記事を参考にしてみてください。
https://www.naporitansushi.com/vivaldi-css/CSS
CSS は以下になっています。
/* ウェブパネル内の進む・戻る・ホームボタンを左寄せ */
h1.webpanel-title {
display: none;
}上記のCSS を、エディタ（Visual Studio Code など）で書き込みます。以下の感じです。
意味は、以下のようになっています。
| CSS | 意味 |
|---|---|
| h1.webpanel-title | ウェブパネル内のサイトタイトル |
| display: none; | 非表示にする |
つまり、コントロールボタンを右揃えにしているというわけでなく、ウェブパネルのタイトルを非表示にしているだけです。
本当は、非表示にしてコントロールボタンを左寄せにする必要があるのかなって思ってたんですが、勝手に左に寄ってくれたのでよかったです。
今回のCSS はあくまで、ウェブパネルのサイトタイトル限定で非表示なので、ブックマークや履歴などはそのまま表示されます。
上記CSS を適用してブラウザを再起動したら、無事にコントロールボタン（戻る・進む・リロード・ホームへ戻る）が左寄せで表示されます。
これで、慣れ親しんだマウスの動きで操作できます。
そもそもコントロールボタンがないんだけど！？
もしかしたら、ウェブパネル内に戻る・進む・リロード・ホームへ戻るボタンがないという場合があるかもです。
そんな時は、ウェブパネルを右クリック → ツールバー → 表示 をクリックします。
ウェブサイトのタイトルとホームへ戻るボタンが表示されます。その部分の上で再び右クリック → 全てのコントロールを表示 にチェックを入れましょう。
全てのコントロールボタン（サイトタイトル、戻る、進む、リロード、ホームへ戻る）が表示されます。
まとめ
以上、ウェブパネルのコントロールボタンを左寄せにするCSS についてでした。本当に些細な点なんですが、何気に便利です。
実をいうと、いつものブラウザの戻る・進むボタンは、マウスのサイドボタンでやっているので、最近は全然押してません。
ただし、なぜかMicrosoft のサイトではサイドボタンが機能しない・ウェブパネル内ではサイドボタンは使えないという理由でまだまだボタン操作も手放せません。
そこで、パネル内と普通のブラウザの時も同じ左上にすることでとっさの時も戸惑わずに操作できるようになりました。
めでたしめでたし…。何が一番楽しいって「ああいう風にやってみたいな」「これってこういう風にできないかな」っていう欲を叶えれた時の嬉しさですよね。CSS とかプログラミングとかさっぱりなんですが、こういう部分が楽しいんだろうなぁって最近思います。