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

カスタムCSS

Vivaldiのアイコン

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

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

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

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

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

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

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

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

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

CSS

【ヘッダー】ページタイトルの中央揃え

以下のCSSになります。

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

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

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

Vivaldi5.2から左揃えになった(垂直タブにしている時のみ表示される)ページタイトルを中央揃えにした比較画像

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

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

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

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

【Vivaldiボタン】拡大化

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

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

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

Vivaldiアイコンを通常、1.3倍、2倍に拡大した比較画像

【ブックマークバー】アイコンの中央揃え

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

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

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

感想

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

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

Vivaldi設定:外観 「ページをリーディングリストに追加」の項目を非表示にする方法

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

Posted by ナポリタン寿司