広告を利用しています

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

【Vivaldi】ポップアップサムネイルの位置を調整するCSS

カスタムCSS

「Vivaldi」ブラウザのアイコン画像

この記事では、「Vivaldi(ヴィヴァルディ)」ブラウザのオリジナルカスタムUI機能を使って、タブにマウスを置いた時、表示されるポップアップサムネイルの位置を調整するCSSについて書きます。

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

【Vivaldi】ポップアップサムネイルの位置を調整するCSS

「Vivaldi」ブラウザで「ポップアップサムネイル」機能を有効にしている場合、タブにマウスを置いた時、ふわっとサムネイルとタブタイトルが書かれたポップアップが表示されます。

上タブ、上アドレスバーにしている場合、アドレスバーのURLの上に、ポップアップサムネイルが被ってしまい、見えなくなる…困る…という話を聞きました。

「Vivaldi」ブラウザのURL上にポップアップサムネイルが被っている画像

現時点では、標準の設定で位置を調整することはできません。

ただし、カスタムCSSと呼ばれる技を利用することで、自分の好きな位置に調整できます。アドレスバーのURLに被らないよう、ちょっとだけ下にずらす…といったことが可能です。

設定からサクッと変更するのと比べて、少々手間ですが、一度環境を構築して、CSSを書き込めば、「Vivaldi」のアップデート等で使えなくなるまでは、ずっと適用されます。戻したくなったら、いつでもオンオフできます。

本記事は、Windows版(PC版)Vivaldiでの解説です。スマホやタブレットのアプリ版ではできません。

「Vivaldi」のオリジナルカスタムUI(CSS)を有効にする

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

「Vivaldi」上でCSSファイルを使えるように「vivaldi://experiments/」から変更して、CSSファイルを読み込ませます。

ポップアップサムネイルの位置を変更するCSS

以下のCSSになります。

/*【上タブ】タブサムネイルの上下位置*/
.tooltip:has(.thumbnail-caption) {
    top: 70px !important;
}
注意事項

本記事のCSSは僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、「Vivaldi」ブラウザのアップデートにより、いつの間にか使えなくなる可能性があります。

もし書き込んでも反映されない場合、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で修正したいと思います。

top」の数値を、各自好きなように調整します。

top」という名前なので、上にずらすように聞こえますが、逆です。上からどのくらいの位置に配置するか?という意味なので、数値を大きくすればするほど、下にずれます。上記のサンプルCSSでは、通常より、ちょっとだけ下にずらすようにしています。

「Vivaldi」ブラウザのポップアップサムネイルを上から70px、400pxの場所に配置した画像

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

「Vivaldi」ブラウザのポップアップサムネイルの位置をCSSで調整する手順画像

ブラウザを再起動します。再起動しないと、CSSが反映されないので注意です。

タブの上にマウスを置きます。ポップアップサムネイルが、設定した位置で表示されます。アドレスバーのURLと被らなくなります。

「Vivaldi」ブラウザのポップアップサムネイルの位置をCSSで調整した画像1

注意点ですが、下タブにしている場合、上記のサンプルCSSだと、頓珍漢(とんちんかん)な場所に表示されます。各自、良い感じの場所に調整してみてください。

「Vivaldi」ブラウザのポップアップサムネイルの位置をCSSで調整した画像2

使わなくなった場合は、書き込んだCSSを削除します。

そもそもポップアップサムネイルが不要な場合

以下の記事を参考にしてみてください。設定から、無効化できます。

感想

以上、「Vivaldi(ヴィヴァルディ)」ブラウザのオリジナルカスタムUI機能を使って、タブにマウスを置いた時、表示されるポップアップサムネイルの位置を調整する方法でした。

カスタムCSS

Posted by ナポリタン寿司