【Vivaldi】ウェブパネルの戻る・進むボタンを左寄せにするCSS
ウェブパネル内にあるコントロールボタン（戻る・進む・リロード・ホームへ戻る）を左寄せにするCSSです。正確には、ウェブパネルの画面左上に表示されている名前（TwitterならTwitter）を削除して、コントロールボタンを左に詰めるCSSです。
左寄せにすることで、いつものブラウザの「戻る・進む」ボタンの間隔でウェブパネルを利用できます。
僕は、定期的にウェブパネル内でサイトを閲覧するんですが、コントロールボタンが右揃えになってて、ちょっと押しにくいと思っていました。
ブラウザの左上にある戻る・進むボタンの位置に慣れていたので、ウェブパネルだけ右上というのが、どうにも慣れませんでした。
CSSを使うことで、サクッと左に詰められます。
「ウェブパネル頻繁に使うけど、進む・戻るボタンが右にあって使いにくい！」という方、ぜひ試してみてください。
本音を言えば、ウェブパネル内でマウスのサイドボタンが使えるようになれば一番いいんですけどね。2022年4月時点で、マウスのサイドボタンには対応していないので、仕方ありません。
「そもそもウェブパネル（サイドパネル）って何？」って方は、以下の記事を参考にしてみてください。
オリジナルカスタムUI（CSS）を使うには？
この記事では、オリジナルカスタムUIが有効になっていることを前提に書きます。有効にしていないという方は、以下の記事を参考にしてみてください。
CSS
CSSは以下になっています。
/*ウェブパネル内のコントロールボタン（進む・戻る・ホームボタン）*/
h1.webpanel-title {
display: none; /*タイトルを非表示*/
}上記のCSSを、テキストエディター（Visual Studio Codeや、Windows標準でインストールされているメモ帳アプリなど）でファイルに書き込みます。
Vivaldiを再起動してウェブパネルを開きます。サイトは何でもOKです。タイトルが非表示になって、コントロールボタン（戻る・進・再読み込み・ホームボタン）が左揃えになっています。
意味は、以下のようになっています。
| h1.webpanel-title | ウェブパネル内のサイトタイトル |
| display: none; | 非表示にする |
コントロールボタンを左揃えにしているというわけでなく、ウェブパネルのタイトルを非表示にしているだけです。本当は、非表示にしてコントロールボタンを左寄せにする必要があるのかなって思っていたんですが、勝手に左に寄ってくれました。
ウェブパネルのサイトタイトルを非表示にするだけで、ブックマーク、履歴などの他のパネルのタイトルはこれまで通り表示されます。
タイトルは表示したまま、並び替えする方法
一番左をコントロールボタン、右側にタイトルを配置する…といったように、タイトルを表示したまま、並び替えることも可能です。こちらの方がタイトルを確認できるので、良いかもしれません。
以下のCSSになります。
/*ウェブパネルのヘッダー内項目の並び替え*/
/*コントロールボタン（進む・戻る・ホームへ戻る）*/
.toolbar.toolbar-group {
order: 1; /*1番左*/
}
/*閉じるボタン*/
button.close.transparent {
order: 2; /*中央*/
}
/*タイトル*/
h1.webpanel-title {
order: 3; /*1番右*/
}「order」が並び替えるという意味です。数字が若い順から、左に配置されます。つまり、上記CSSだと、左からコントロールボタン、閉じるボタン、タイトルということになります。
「閉じるボタン、タイトル、コントロールボタン」といったように、好きなように変更できます。
そもそもコントロールボタンがない場合
ウェブパネル内に戻る・進む・リロード・ホームへ戻るボタンが表示されていない場合は、設定で表示するようにできます。
どれでもいいので、ウェブパネルのアイコンを右クリック→ツールバー→表示をクリックします。
ウェブパネル内にタイトルとホームへ戻るボタンが表示されます。その上を右クリックするか、再度ウェブパネルアイコンを右クリックします。ツールバー→全てのコントロールを表示をチェックします。
全てのコントロールボタン（サイトタイトル、戻る、進む、リロード、ホームへ戻る）が表示されます。
感想
以上、ウェブパネルのコントロールボタンを左寄せにするCSSについてでした。
2022年4月時点で、ウェブパネルの戻る・進む自体をあまり使わなくなったので、現在では使っていません。