当サイトは、アフィリエイト・アドセンス広告を掲載しています。消費者庁が、2023年10月1日から施行予定である景品表示法の規制対象(通称:ステマ規制)にならないよう、配慮して記事を作成しています(記事はこちら、消す方法はこちら

参考:令和5年10月1日からステルスマーケティングは景品表示法違反となります。 | 消費者庁

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

2022年4月7日カスタムCSS

Vivaldiのアイコン

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

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

Vivaldiの左揃えになったページタイトルを中央揃えにするイメージ画像

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

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

CSSを使うことで、中央揃えに修正できます。右揃えにしたり、そもそもページタイトルを非表示にすることも可能です。

合わせて、ちょっと縮小されたVivaldiアイコンを拡大して元に戻す方法、ブックマークバーのアイコンを中央揃えにする方法も紹介します。

「以前のように、中央揃えがいい!」という方、参考にしてみてください。いつでも元に戻せます。

本記事は、既にオリジナルカスタムUI機能が有効になっている前提です。

ページタイトルを中央揃えに戻すCSS

以下のCSSになります。

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

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

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

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

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

上記コードではなく、以下のコードを使うと、右揃えにできます。

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

そもそもページタイトルが不要な場合

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

/*【ヘッダー】ページタイトルの非表示*/
div#pagetitle {
    display: none !important;
}

Vivaldiメニューや、閉じる、最大化などのボタンは残ります。

ヘッダーのページタイトルを非表示にした画像

Vivaldiボタンの拡大化

Vivaldi5.2から、ページタイトルが左揃えになるだけでなく、左上の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設定:外観 「ページをリーディングリストに追加」の項目を非表示にする方法

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

2022年4月7日カスタムCSS