【広告】

Amazonブラックフライデーが12月2日まで開催中です!

個人的には、Anker製品か、コカ・コーラがかなり安くなっているのでおすすめです!

高級キーボードで有名な東プレが最近発売した「REALFORCE R3」もセールをやっていました!詳しくはこちらの記事を確認してみてくださーい。

【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」などのエディタで書けばOKです。

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

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

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

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

画像を指定する

上記CSS の黄色ハイライト表示の部分で、自分の好きな画像に変更できます。

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

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

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

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

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

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

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

画像のURLが表示

僕が公開しているナポリタン寿司のアイコンGIF を使いたい場合は以下のCSS になるってことです。

/* タブを透過して画像が見えるようにするやつ */
.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/10/window-background-gif_01.gif");
    background-size: 3%;
}

画像の著作権とかにはくれぐれも気を付けてくださいね。私的利用に留めましょうね。違法にアップロードされた画像はめっ!ですよ。

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

インターネット上ではなく、自分のパソコン内に保存されている画像を使うこともできます。こっちのほうが、なんとなーく安心感があります。インターネットの画像保存せずにそのまま使うのが僕には抵抗が…笑なんででしょうね。

ローカルで使うには、Vivaldi のオリジナルカスタムUI を利用するために、作成したCSS ファイル(スタイルシート)と同じ場所に保存しましょう。

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

D:\デスクトップ\HTML\VivaldiCSS-snapshot\Vivaldi.css                ←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

画像サイズを指定する

CSS の緑ハイライトの部分で、画像サイズを調整できます。

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

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

なので、自分が使いたい画像のサイズに合わせて適宜、変更してみてください。多分、1~5%あたりだと思います。何回か試してみましょう。

まとめ

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

CSS自体は、フォーラムを参考にしたのですぐにできたんですが、GIF画像を用意する過程が一番大変でした。GIF って作ったこともなかったですから、どうやってやるのかすらさっぱりでした…。かなり苦労した…。多分めちゃくちゃ効率悪い方法で作成しました。。。でも楽しいです。

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

Posted by ナポリタン寿司