Vivaldi5.2で変更されたページタイトルの左揃えを中央に戻すCSS

この記事では、VivaldiのオリジナルカスタムUI機能を使って、5.2で仕様変更されたページタイトルの左揃えを中央揃えに戻すCSSについて書きます。

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

2022年4月6日（水）に、Vivaldi5.2がリリースされました。

色々新機能が登場した中、ヘッダーのページタイトルが中央揃えから左揃えになるという仕様変更がありました。ページタイトルは垂直タブ（左右）にしている時のみ表示されます。水平タブ利用者には関係ない話です。

もしかすると、意図していないバグかもしれません。その場合は、次回のアップデートで修正されると思いますが、これが仕様変更だった場合、中央揃えが好きだった僕は少し困ります。

CSSを使うことで、自分で中央揃えに修正できます。

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

【Vivaldi】カスタムCSSの導入方法。自由にカスタマイズしてみよう！

この記事では、ウェブブラウザ「Vivaldi」にCSSを適用する方法について書きます。Vivaldiには、CSSでブ ...

https://www.naporitansushi.com/vivaldi-css/

本記事は、ページタイトルを中央揃えに戻すだけでなく、ちょっと縮小されたVivaldiアイコンを拡大して元に戻す方法、おまけでブックマークバーのアイコンを中央揃えにする方法も書きます。

CSS

以下のCSSになります。

/*【ヘッダー】ページタイトルの中央揃え*/
#pagetitle span {
  text-align: center !important;
}

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

Vivaldiを再起動すると、5.2以前の中央揃えのタイトルバーになります。

余談ですが、以下のコードを使うと、中央揃えではなく右揃えにできます。

/*【ヘッダー】ページタイトルの右揃え*/
#pagetitle span {
  text-align: right !important;
}

「いや、そもそもタイトルバーのページタイトルなんて不要なんだよ！」という方は、消すことも可能です。

/*【ヘッダー】ページタイトルの非表示*/
#pagetitle span {
  opacity: 0;
}

なぜか、ページタイトルが左揃えになるだけでなく、左上のVivaldiボタンが小さくなるという変更もありました。以前の大きさが良かったという方は、合わせてこちらのCSSを使ってみましょう。

/*【Vivaldiボタン】拡大*/
.vivaldi span {
  transform: scale(1.3);
}

「1.3」という数値を変更することで、好きな大きさにできます。1.3＝1.3倍にするという意味です。通常、1.3倍、2倍にした時の比較画像を貼っておきます。

おまけで、ブックマークバーアイコンを中央揃えにするCSSも紹介しておきます。

/*【ブックマークバー】アイコンの中央揃え*/
.bookmark-bar .observer {
  justify-content: center;
}

なんでもかんでも中央揃えが好きな方におすすめです。（参考リンク）

以上、Vivaldi5.2で追加されたヘッダー周りを以前の外観に戻すCSSについてでした。

余談ですが、5.2で追加されたウェブページのリンクの右クリックメニューの「ページをリーディングリストに追加」という項目は、設定から非表示にできます。

リーディングパネルも実装されましたが、不要な方は、パネルの空いているところを右クリック→リーディングリストのチェックを外すことで非表示にできます。