【Vivaldi】ウェブパネルの戻る・進むボタンを左寄せにするCSS
本記事のCSSを使うことで、ウェブパネル内にあるナビゲーションコントロールボタン（戻る・進む・リロード・ホームへ戻る・拡大縮小）を左端に配置できます。
左端に配置することで、ブラウザの「戻る・進む」ボタンの間隔で、ウェブパネルを利用できます。
僕は、定期的にウェブパネル内でサイトを閲覧します。その際、コントロールボタンが右揃えになっていて、ちょっと押しにくいと思いました。
ブラウザの左上にある戻る・進むボタンの位置に慣れていたので、ウェブパネルだけ右上というのが、慣れませんでした。CSSを使うことで、サクッと左に詰められます。
タイトルが不要な場合は、削除することもできます。
本音を言えば、ウェブパネル内でマウスのサイドボタンが使えるようになれば 、一番いいんですけどね。2022年12月時点では、マウスのサイドボタンには対応していないので、仕方ありません。
「そもそもウェブパネル（サイドパネル）って何？」って方は、以下の記事を参考にしてみてください。
https://www.naporitansushi.com/vivaldi-panel/この記事では、オリジナルカスタムUIが有効になっていることを前提に書きます。有効にしていないという方は、以下の記事を参考にしてみてください。
ウェブパネルの戻る・進むボタンを左寄せにするCSS
以下のCSSになります。
/*ウェブパネルのヘッダー内項目を逆から表示する*/
.webpanel-header>div.toolbar {
flex-direction: row-reverse;
}上記CSSを、テキストエディター（Visual Studio Codeや、Windows標準でインストールされているメモ帳アプリなど）でファイルに書き込みます。
上書き保存して、ブラウザを再起動します。再起動しないと反映されません。
これで、ウェブパネル内のナビゲーションコントロールボタンが左端に表示されます。タイトルは右端です。
上記コードの「flex-direction: row-reverse;」が、「アイテムを逆方向から表示する」という意味になっています。これにより、右から表示されていたアイテムが左から開始されます。
パネルの位置は、左右どちらでもOKです。両方反映されます。
ウェブパネル内のヘッダーを並び変えるだけで、他のパネルには影響されません。
ウェブパネルのタイトルが不要な場合
ウェブパネルのタイトルが不要な場合は、非表示にすることで、自動的にボタンが左揃えになります。
/*ウェブパネルのタイトルを非表示にして、ボタンを左揃えにするCSS*/
.webpanel-header>div>h1 {
display: none;
}「display: none;」が非表示にするという意味です。
そもそもコントロールボタンがない場合
ウェブパネル内にボタンが表示されていない場合は、設定から表示するようにしましょう。
どれでもいいので、ウェブパネルのアイコンを右クリック→ツールバー→「表示」をクリックします。
ウェブパネル内にタイトルとホームへ戻るボタンが表示されます。その上を右クリックするか、再度ウェブパネルアイコンを右クリックします。ツールバー→「全てのナビゲーションコントロールを表示」をクリックします。
ウェブパネルの拡大縮小ボタンも表示させたい場合は、「ズームコントロールを表示」にもチェックします。
感想
以上、「Vivaldi」ブラウザのウェブパネル内にあるナビゲーションコントロールボタンを左端に表示するCSSでした。
余談ですが、ウェブパネル内にはLINE拡張機能を登録できます。
