【Vivaldi】ウェブパネルの戻る・進むボタンを左寄せにするCSS

2021年11月3日カスタムCSS

「Vivaldi」のアイコン

この記事では、「Vivaldi(ヴィヴァルディ)」ブラウザのオリジナルカスタムUI機能を使って、ウェブパネルのコントロールボタンを左寄せにするCSSについて書きます。

本記事は、オリジナルカスタムUIが有効になっている前提です。詳しくは、こちらを参考にしてみてください。

「Vivaldi」ブラウザのウェブパネル内にあるナビゲーションボタンを並び替えた比較画像

本記事のCSSを使うことで、ウェブパネル内にあるナビゲーションコントロールボタン(戻る・進む・リロード・ホームへ戻る・拡大縮小)を左端に配置できます。

左端に配置することで、ブラウザの「戻る・進む」ボタンの間隔で、ウェブパネルを利用できます。

僕は、定期的にウェブパネル内でサイトを閲覧します。その際、コントロールボタンが右揃えになっていて、ちょっと押しにくいと思いました。

Vivaldiブラウザのウェブパネルのスクリーンショット

ブラウザの左上にある戻る・進むボタンの位置に慣れていたので、ウェブパネルだけ右上というのが、慣れませんでした。CSSを使うことで、サクッと左に詰められます。

タイトルが不要な場合は、削除することもできます。

本音を言えば、ウェブパネル内でマウスのサイドボタンが使えるようになれば 、一番いいんですけどね。2022年12月時点では、マウスのサイドボタンには対応していないので、仕方ありません。

「そもそもウェブパネル(サイドパネル)って何?」って方は、以下の記事を参考にしてみてください。

この記事では、オリジナルカスタムUIが有効になっていることを前提に書きます。有効にしていないという方は、以下の記事を参考にしてみてください。

ウェブパネルの戻る・進むボタンを左寄せにするCSS

以下のCSSになります。

/*ウェブパネルのヘッダー内項目を逆から表示する*/
.webpanel-header>div.toolbar {
  flex-direction: row-reverse;
}

上記CSSを、テキストエディター(Visual Studio Codeや、Windows標準でインストールされているメモ帳アプリなど)でファイルに書き込みます。

「Visual Studio Code」のスクリーンショット

上書き保存して、ブラウザを再起動します。再起動しないと反映されません。

これで、ウェブパネル内のナビゲーションコントロールボタンが左端に表示されます。タイトルは右端です。

ウェブパネル内にあるナビゲーションコントロールボタンを左端に表示させた画像1

上記コードの「flex-direction: row-reverse;」が、「アイテムを逆方向から表示する」という意味になっています。これにより、右から表示されていたアイテムが左から開始されます。

パネルの位置は、左右どちらでもOKです。両方反映されます。

ウェブパネル内にあるナビゲーションコントロールボタンを左端に表示させた画像2

ウェブパネル内のヘッダーを並び変えるだけで、他のパネルには影響されません。

ウィンドウパネルのスクリーンショット

ウェブパネルのタイトルが不要な場合

ウェブパネルのタイトルが不要な場合は、非表示にすることで、自動的にボタンが左揃えになります。

/*ウェブパネルのタイトルを非表示にして、ボタンを左揃えにするCSS*/
.webpanel-header>div>h1 {
  display: none;
}

「display: none;」が非表示にするという意味です。

ウェブパネル内のヘッダータイトルを非表示にした画像

そもそもコントロールボタンがない場合

ウェブパネル内にボタンが表示されていない場合は、設定から表示するようにしましょう。

どれでもいいので、ウェブパネルのアイコンを右クリック→ツールバー→「表示」をクリックします。

Vivaldiウェブパネルのヘッダーにボタンを表示する手順画像1

ウェブパネル内にタイトルとホームへ戻るボタンが表示されます。その上を右クリックするか、再度ウェブパネルアイコンを右クリックします。ツールバー→「全てのナビゲーションコントロールを表示」をクリックします。

Vivaldiウェブパネルのヘッダーにボタンを表示する手順画像2

ウェブパネルの拡大縮小ボタンも表示させたい場合は、「ズームコントロールを表示」にもチェックします。

感想

以上、「Vivaldi」ブラウザのウェブパネル内にあるナビゲーションコントロールボタンを左端に表示するCSSでした。

余談ですが、ウェブパネル内にはLINE拡張機能を登録できます。

2021年11月3日カスタムCSS