【Vivaldi】ウィンドウ(タブ)の背景にGIFや画像などを表示するCSS

2021年10月30日カスタムCSS

Vivaldiのアイコン

この記事では、Vivaldi のオリジナルカスタムUI機能を使って、ウィンドウの背景にGIFや画像を表示するCSSについて書きます。

実用性は皆無ですが、面白いです。

ウィンドウ背景画像のスクリーンショット

ウィンドウの背景(タブバー)に、自作したGIFや画像を表示するCSSです。

GIFをいい感じに作成すると、まるでウィンドウ上を物体が動いているようにできます。かなり面白い機能です。動画の方が分かりやすいので動画貼っておきます。

僕は、GIF 画像を作成する達人でも何でもないので、非常に粗い出来映えですが、上手い人がやるとかなりすごい感じになると思います。

今回の方法は、以下のVivaldiフォーラムに質問が寄せられていたので、色々調べてみて実現できたって感じです。奮い立たせてくれて感謝です。昔は、こんな機能がVivaldiの標準にあったんですね~。面白いですなぁ。

参考:ウィンドウ背景画像機能の復活/Restoration of the window background image function | Vivaldi Forum

オリジナルカスタムUI(CSS)を使うには?

この記事では、オリジナルカスタムUIが有効になっていることを前提に書きます。

有効にしていないという方は、以下の記事を参考にしてみてください。

CSS

CSSは以下になっています。

/* タブを透過して画像が見えるようにするやつ */
.tab-header {
  background-image:linear-gradient(hsla(0,0%,100%,.4),hsla(0,0%,100%,.2));
} 

/* ウィンドウに画像を指定するやつ */
#tabs-container {
    background-image: url("window-background-gif_01.gif");
    background-size: 3%;
}

このCSSは以下のVivaldiフォーラムを参考にさせていただきました。感謝です。

参考:How to place custom background on tab bar? | Vivaldi Forum

これを、「Visual Studio Code」やメモ帳などのエディタで書きます。

画像だとこんな感じです。

ウィンドウの背景にGIFや画像などを表示するCSS

上記で紹介したCSSをただコピペすればいいってわけでなく、自分の環境に合わせて修正しないといけません。

修正箇所は以下の2つです。

画像を指定する

以下の部分で、背景画像を変更できます。

background-image: url("window-background-gif_01.gif");

画像は、ローカルファイルとインターネット上の画像どちらも適用できます。

インターネット上の画像だと、アドレスバーのURLをそのままコピペすればいいですが、ローカルのファイルだと少し癖があります。

どちらの方法も紹介します。

インターネット上の画像を使う

インターネット上の画像をそのまま使う場合は簡単です。

欲しい画像を右クリック→新しいタブでリンクを開くをクリックします。

画像の右クリックメニュー 新しいタブでリンクを開く

新しいタブで画像(またはGIF)が開くので、アドレスバーのURLを丸ごとコピーして貼り付ければOKです。

画像のURLが表示

当サイトロゴのGIFを公開しておきます。

当サイトのロゴGIF
/* タブを透過して画像が見えるようにするやつ */
.tab-header {
  background-image: linear-gradient(hsla(0, 0%, 100%, .4), hsla(0, 0%, 100%, .2));
}

/* ウィンドウに画像を指定するやつ */
#tabs-container {
  background-image: url("https://www.naporitansushi.com/wp-content/uploads/2021/12/window-background-gif_01.gif");
  background-size: 3%;
}

ローカル(自分のPC内)にある画像を使う

インターネット上ではなく、自分のパソコン内に保存されているローカルの画像を使うこともできます。

ローカルで使うには、画像を、CSS ファイル(スタイルシート)と同じ場所に保存します。

僕の場合は、以下のようになります。

::CSSファイル
D:\デスクトップ\HTML\VivaldiCSS-snapshot\Vivaldi.css

::画像ファイル
D:\デスクトップ\HTML\VivaldiCSS-snapshot\window-background-gif_01.gif

この記事を見ている方で、「CSSファイルって何よ?」って方はいないと思うので詳しくは省きます。オリジナルカスタムUIを有効にする記事(こちら)で作成したファイルのことです。

同じ場所に保存できたら、拡張子を含む画像ファイル名をURLの部分に貼り付けます。僕の場合は、以下のようになります。

/* タブを透過して画像が見えるようにするやつ */
.tab-header {
  background-image: linear-gradient(hsla(0, 0%, 100%, .4), hsla(0, 0%, 100%, .2));
}

/* ウィンドウに画像を指定するやつ */
#tabs-container {
  background-image: url("window-background-gif_01.gif");
  background-size: 3%;
}

最初に紹介したCSSと全く一緒です。

画像の拡張子が表示されていない場合は、表示するように設定しましょう。

エクスプローラー上部にある表示タブをクリック→ファイル名拡張子にチェックを入れます。拡張子が表示されます。

VivaldiCSS-snapshot 内のファイル

正確には、同じフォルダー内にしなくてもできます。

本記事では、頭がこんがらないように同じ場所に配置することを推奨しています。

同じフォルダ以外の画像ファイルを読み込ませたい場合は、以下のサイトが参考になります。

参考:ローカルの画像をCSSで適用する方法 Qiita

画像サイズを指定する

以下の部分で、画像サイズを調整できます。

background-size: 3%;

例えば、ナポリタン寿司のアイコンを「10%」にすると、大きくなりすぎて見切れます。

10%だと画像サイズが大きい

自分が使いたい画像のサイズに合わせて変更してみましょう。多分、1~5%あたりがちょーどいいかなと思います。

感想

以上、ウィンドウの背景にGIFや画像を表示するCSSについてでした。

CSS自体は、フォーラムを参考にしたのですぐにできたんですが、GIF画像を用意する過程が一番大変でした。

GIFって作ったことなかったですから、どうやってやるのかすらさっぱりでした…。多分めちゃくちゃ効率悪い方法で作成しました。でも楽しかったです。

GIF画像作成 努力の結晶
GIF画像作成 努力の結晶

Posted by ナポリタン寿司