【Vivaldi】Vivaldi の UI に背景画像を設定する

【Vivaldi】Vivaldi の UI に背景画像を設定する18

2025年5月25日

posted by

玖堂恵

in その他

R18 記事の為、注意。

暇つぶしに思い立って模索したら出来た

お気に入りのおんにゃの娘のむふふなシ－ンを、普段使ってる Web ブラウザの Vivaldi の背景に設定した ZO ☆(ゝω・)vキャピ

え ? 暇なのかって ? …否定はしないよ (CV.杉田)

手順

1.試験運用機能有効化

アドレスバ－に『vivaldi://experiments/』を入力して試験運用機能より『Allow CSS modifications』を有効化する。

2.CSS ファイル + 背景画像の準備

下記内容の CSS ファイルを作成する。

div#panels {
    background-image: url("<左側パネルに設定したい画像ファイル>");
    background-position: center center;
    background-size: cover;
}

div#panels div#switch,
div#panels div.panel-group, div.download-popout div.panel.downloads {
    backdrop-filter: brightness(0.5);
}

div.download-popout {
    background-image: url("<ダウンロードポップダイアログに設定したい画像ファイル>download-popup.png");
    background-position: center center;
    background-size: cover;
}

div#main div.internal-page {
    background-image: url("<スタ－トペ－ジや設定ペ－ジに設定したい画像ファイル>");
    background-position: center center;
    background-size: cover;
}

div#main div.internal-page div.vivaldi-settings,
div#main div.internal-page div.vivaldi-settings div.settings-sidebar,
div#main div.internal-page div.vivaldi-settings div.settings-content {
    background-color: transparent;
}

div#main div.internal-page div.vivaldi-settings div.settings-sidebar,
div#main div.internal-page div.vivaldi-settings div.settings-content {
    backdrop-filter: brightness(0.5);
}

div#browser.break-mode {
    background-image: url("<ブレイクモ－ドに設定したい画像ファイル>") !important;
    background-position: center center;
    background-size: cover;
}

div#browser.break-mode div#header,
div#browser.break-mode div#main div.mainbar,
div#browser.break-mode div#main div.mainbar div.toolbar,
div#browser.break-mode div#main div.inner div#panels-container {
    background-color: transparent;
}

div#browser.break-mode div#main div.mainbar,
div#browser.break-mode div#main div.inner div#panels-container {
    border: none;
}

div#browser.break-mode div#header div#titlebar,
div#browser.break-mode div#header div#tabs-tabbar-container,
div#browser.break-mode div#main div.toolbar > div,
div#browser.break-mode div#main div.inner div#panels {
    display: none;
    user-select: none;
}

div#browser.break-mode div#main div.inner div#panels {
    background-image: initial;
    background-color: transparent;
}

div#browser.break-mode div#main div.inner div#switch {
    backdrop-filter: initial;
}

div#browser.break-mode div#main div.inner div#switch button {
    color: transparent;
    user-select: none;
}

CSS ファイルと画像ファイルは一緒のフォルダに格納し、CSS ファイルでは画像ファイル名で指定する (パスの指定は不要)。

画像ファイルのファイル名には日本語が使用できないので注意 (1 敗)。

3.オリジナルカスタム UI 設定

2.CSS ファイル + 背景画像の準備で準備した CSS ファイルと画像ファイルを格納しているフォルダを『オリジナルカスタム UI』に指定し、Vivaldi を再起動すると背景画像が表示される。

されない場合は自分で調べて、どうぞ (他力本願)。

神殺しのアリア、キャラとか世界観は良かったのに…

今回使った画像は 2 、3 年前ぐらい ? にサ－ビス終了した Fanza ゲ－。

ちょっとプレイしてみて中々良さそうだったからスタ－ト記念のお得パック ? 的なの (3,000 円ぐらい ?) に課金したんだけど、なんか飽きて ? フェ－ドアウトしてたらサ終してた。

【CG集】神殺しのアリア-X- Digital Archives

たしか 1 年持たなくて、1,500 円程度課金してた人は画像セット的なのをタダでくれた。今でも 700 円ぐらいで買える。

結構好みのキャラ多かったんだけどな－。

実装されてるキャラでもツルペタキャラ (左側パネルの花小路真央) も多かったし、ロリ巨乳体型 (桐生絶佳) も結構よかったし。

未実装だったっぽいけど真ん中のツルペタキャラ (リネット・ポップルウェル・サブナック) とかド・ストライクで実装されたらカムバックしたと思う、多分。

無垢っぽいツルペタキャラのあんよを開かせて大事な所を愛撫するとか、たまりませんな (*ﾟ∀ﾟ)=3ﾊｧﾊｧ !!

まぁサ終してるんですけど。

紗凪たそ～、も滅茶苦茶好みだったのにな－。

背面座位の合うょぅι゛ょで好みだったのに…見てくださいよ、あの初めての行為に対する期待と恐れの入り混じった表情 ! たまりませんな (*ﾟ∀ﾟ)=3ﾊｧﾊｧ !!

まぁサ終（ｒｙ

おまけ

カスタム CSS で指定するセレクタ－要素を調べたい場合は、上記コマンドチェインを作成すると調べられる。

Meaningless Notebook