【Vivaldi】スタートページ・スピードダイヤルのカスタマイズ方法

2022年1月20日Vivaldi,カスタムCSS

Vivaldiのアイコン

この記事では、ウェブブラウザ「Vivaldi」のスタートページのカスタマイズ方法について書きます。

スピードダイヤルは、アイコンのみ表示、CSSで背景透過にすると綺麗に見えます。

Vivaldiスタートページのスクリーンショット

Vivaldiには、スタートページと呼ばれる専用のページに、好きなブックマークをサムネイルで登録(スピードダイヤル)できる機能があります。

新しいタブで開くページを「スタートページ」にして、よくアクセスするサイトをスピードダイヤルとして登録しておけば、瞬時に開けます。

サムネイル付きで管理できるので、どのサイトか確認しやすいです。上部には、検索ボックス(Googleなどの検索エンジン)があるので、何か調べものする時に便利です。

そんな標準で搭載されているスタートページ、スピードダイヤルのカスタマイズ方法について書きます。感覚としては、家(スタートページ)があって、その中に、自分の好きな家具(スピードダイヤル)を配置していくって感じです。

本記事は、Vivaldiを既にインストールしている前提です。「ヴィヴァルディって何?イタリアの作曲家?」って方は、下記記事を参考にしてみてください。僕のおすすめブラウザです。

カスタマイズ方法

スタートページを開くように設定

まずは、デフォルトのホームページ、新しいタブで開くページをスタートページに変更してみましょう。設定(CtrlF12)を起動して、一般→ホームページをスタートページにします。

Vivaldi設定:一般 ホームページ

タブの「新しいタブで表示するページ」もスタートページにします。

Vivaldi設定:タブ 新しいタブで表示するページ

新しいタブ新しいタブを開くや、ホームボタンホームをクリックすると、スタートページが表示されます。

スピードダイヤルの登録方法

スタートページに表示されているスピードダイヤルは、ブックマークの1つなので、「ブックマークマネージャーから追加・編集する方法」、「スタートページ内で追加・編集する」の2パターンがあります。

サクッと編集したい時はスタートページ、もりもり編集したい時はブックマークマネージャーがおすすめです。

スタートページ内から登録

「スピードダイヤルを追加」ボタンをクリックします。

「スピードダイヤルを追加」ボタン

登録したいURLを入力して「追加」をクリックします。フォルダーを作成して、その中に入れることもできます。

ブックマークをスピードダイヤルに追加

登録されます。

サイトのスクリーンショットがサムネイルとして表示される

デフォルトでは、サイトのスクリーンショットがサムネイルとして表示されます。

ポイント

追加ボタンが不要な場合は、設定→スタートページ→追加ボタンを表示のチェックを外します。

Vivaldi設定:スタートページ 追加ボタンを表示

追加ボタンが非表示になります。非表示にした場合は、背景画像の好きなところをダブルクリックすると、追加ダイアログが表示されます。

スピードダイヤル横の追加ボタンが非表示になる。この場合、背景をダブルクリックすることで追加ダイアログが表示される

ブックマークマネージャーから登録

キーボードのCtrlBを押すか、以下のURLをアドレスバーに貼り付けて、Enterを押します。

vivaldi://bookmarks/

ブックマークマネージャーが開きます。「スピードダイヤル」フォルダーがあるので、その中に好きなようにブックマークを移動・作成します。

動画を貼っておきます。CtrlShiftと組み合わせることで、複数一気に移動できます。

ずらっと追加されます。

スピードダイヤルを一括で登録してみた画像

ツールバー内の全てのサイトをスピードダイヤルに移動したい時は、スピードダイヤルの対象フォルダーを変更してみましょう。フォルダーを選択して、右側の「スピードダイヤル」をチェックします。

スピードダイヤルフォルダーを切り替え

これで、スタートページに表示されるフォルダーが入れ替わります。

Vivaldi 専用の特殊URLの登録

「vivaldi://history/」や「vivaldi://mails/」などのVivaldiの特殊なURLも、スピードダイヤルに登録できます。

スピードダイヤルには、特殊URLを登録できる

ただし、サムネイル画像はうまく取得してくれないことが多いので、自分で分かりやすい画像を用意するのがおすすめです。

特殊URLはアイコンを取得してくれないので、別途用意するのがおすすめ

スピードダイヤルの削除方法

デフォルトでは、YouTube、Yahoo!、Amazon、hulu、Vivaldia(ブラウザ内臓ミニゲーム)などの13ページが登録されています。不要なサービスは、サムネイル右上の削除ボタンをクリックして削除できます。

サムネイル右上のマイナスボタンをクリック

右クリック→削除からでもできます。

サムネイルの右クリック 削除

ブックマークマネージャーからでも同様に作業できます。

2022年2月19日追記

サムネイル画像を変更

自分で好きな画像に変更できます。事前に変更したい画像を、PC内のどこかに保存しておきます。拡張子は、JPG、JPEG、PNG、BMP、GIF、WEBPの6種類に対応しています。

僕は、「Vivaldiスタートページ用アイコン」というフォルダーを作成して、色々入れています。

エクスプローラー Vivaldiスタートページ用アイコン
ポイント

アイコン画像を変更したからといって、PCに保存してある元の画像は削除しないようにしましょう。

元の画像を削除するとスピードダイヤルの方も一緒に非表示になります。PC内にある画像と連携しているので、どこかのフォルダーの中にまとめて管理しておくのがおすすめです。

元の画像を削除(または移動)するとスピードダイヤルのアイコンも消えるので注意

スピードダイヤルのサムネイルにマウスを乗せると、左上にプラスボタンアイコンが表示されるのでクリックします。

Amazonのスピードダイアル サムネイル変更ボタン 

変更したいアイコン画像を選択します。

エクスプローラーダイアログ 好きな画像を選択する

アイコンが変更されます。

スピードダイヤルのアイコンが変更する(例:Amazon)

余談ですが、動くのが特徴のGIF画像も登録できます。

自作できる方は、かなり個性が出せるかなと思います。ただし、毎回ヌルヌル動かれては、ストレスかもしれません。

【余談】初期で用意されているサムネイルの保存場所

デフォルトで用意されているサムネイル画像については、以下の場所に保存されています。

\Vivaldi\Application\バージョン\resources\vivaldi\resources

Vivaldiより前のフォルダーについては、各自でインストールしている場所が違うと思うので省略しています。resourcesフォルダーの中には、こんな感じで、色々なサムネイルが「sd_〇〇」という名前で保存されています。

\Vivaldi\Application\5.1.2553.3\resources\vivaldi\resources

使うことはあんまりないと思いますが、元の画像に戻したい時に活用してみましょう。初期で用意されているサービス以外にも沢山のサイトアイコンが保存されていました。

国によって主要のサービスが違うから、使い分けているのかなぁと思います。日本では13種類でしたが、別の国だともっと多かったり、少なかったりするんでしょうかね。

僕のおすすめは、背景を透過したPNG画像です。背景透過のアイコンを作成するコツについては、こちらに飛んで参考にしてみてください。後述するCSSと組み合わせることで、綺麗になります。

列幅、サムネイルサイズについて

設定→スタートページでスピードダイヤルの表示方法について設定できます。以下、紹介するカスタマイズ項目は全てこちらの設定画面から変更できます。

Vivaldi設定:スタートページ

結構登録する方は、最大列数7以上、サムネイルサイズは「極小」がおすすめです。かなりスッキリします。

最大列数とサムネイルサイズのカスタマイズ比較画像

Vivaldiaをプレイしない場合は、Vivaldiオリジナルゲームの「スピードダイヤルに表示」のチェックを外しましょう。

スタートページのナビゲーション

スタートページ上部に表示されるスピードダイヤル、ブックマーク、履歴、メモを切り替えできるバーのことです。

スタートページのナビゲーション

使わない方は、オフにすることで見た目がスッキリします。

スピードダイヤルの外観

サイト名の表示を設定できます。以下の3種類から選択できます。

  • タイトルを表示する
  • ホバー時にタイトルを表示する
  • タイトルを非表示にする

「ホバー時にタイトルを表示する」にしてみた動画を貼っておきます。

「基本は、サムネイルで判別するからタイトルは不要、でもふとした時にタイトル見たい時がある!」という方は、「ホバーで表示する」がおすすめです。僕は不要なので、「非表示」にしています。

ファビコンを表示する

サイトタイトルを表示するようにした場合、タイトル名の左にアイコンを表示するかどうかの設定です。比較画像を貼っておきます。

スピードダイヤル サイトファビコンを表示・非表示した比較画像

タイトルを表示するようにしている方は、オンにした方が見やすいのかなぁと思います。そもそも非表示にしている方には関係ない項目です。

サムネイルコントロール&削除ボタン

スピードダイヤルにマウスを乗せると、小さいボタンが表示されます。このボタンは、「削除ボタンを表示する」、「サムネイルコントロールボタンを表示する」のチェックを外すことで非表示にできます。

Vivaldi設定:スタートページ サムネイルコントロールボタンを表示する

「うっかり押し間違えて、サムネイル更新ボタンを押してしまう!そしたら、折角カスタマイズしたアイコンがパーになってリセットされてしまう!」といった方は、非表示にしておくと便利です。

非表示にしていても、サムネイル画像の変更は、スピードダイヤルの右クリック→「カスタムサムネイル画像を選択」からできます。

スピードダイヤルの右クリックメニュー カスタムサムネイル画像を選択

プライバシー統計

Vivaldi5.2(2022年4月6日公開)から実装された機能です。スタートページ内にプライバシー統計と呼ばれるバーが追加されました。Vivaldi標準の広告ブロッカーがどのくらい機能したかを確認できます。

不要な場合は、スピードダイヤルの外観→プライバシー統計を表示のチェックを外します。

Vivaldi5.2から実装されたプライバシー統計バー

詳細情報をクリックすると、具体的なブロックした数が表示されます。

プライバシー統計ポップアップ

背景画像の変更

設定→テーマから変更できます。

Vivaldi設定:テーマ ライブラリー

エディタータブ→背景→画像を選択で好きな画像に変更できます。

Vivaldi設定:テーマ エディター 背景

僕が実際に撮影した米の写真にしてみました。うんうん。美味しそう。

Vivaldiのスタートページの背景画像 僕が撮影した米の写真

「デスクトップ画像を使用」でPCの壁紙と同じ画像にできます。

Vivaldiのスタートページの背景画像 デスクトップ画像を使用(Windows11の壁紙)
ポイント

テーマをカスタマイズする時は、デフォルトで用意されているテーマではなく「新しいテーマ」で複製してから作成することをおすすめします。

デフォルトテーマではなく、テーマを複製してカスタマイズするのがおすすめ

理由は、Vivaldi5.0で勝手にデフォルトテーマがリセットされる事件が起こったからです。デフォルトテーマを改造していた方は、綺麗さっぱり消えて元のテーマに戻ってしまいました。テーマを複製していた方には影響ありませんでした。

このような不具合が再び発生する可能性もあるので、複製することをおすすめします。

テーマのカスタマイズについて、詳しくは下記記事を参考にしてみてください。

カスタムCSSでより自由にカスタマイズ

Vivaldiには、カスタムCSSと呼ばれるCSSで外観をカスタマイズできる機能が備わっています。CSS(プログラミング言語)を理解していないと、使うことはできませんが、ここでは僕が実際に使っているCSSを紹介します。

「カスタムCSS使ってみたーい!」って方は、まず下記記事を参考にしてみてください。初心者でも理解できるように書いているつもりです。

僕が使っているコードは以下になります。

/*スピードダイヤルのサムネイル表示*/
.thumbnail-image img {
  object-position: center;
  object-fit: contain;
  border-radius: var(--radiusHalf);
}

/*スピードダイヤルのホバー時アニメーション*/
.startpage .dial {
  background-color: transparent;
  box-shadow: none;
  transition: .3s;
}

/*サムネイル中央揃え*/
.speeddial .dial>.thumbnail-image {
  text-align: center;
}

/*ナビゲーションバーを下部に移動、透明化*/
.startpage .startpage-navigation {
  order: 1;
  box-shadow: none;
  background-color: transparent;
  min-height: 20px;
}

/*ナビゲーションバーの余分な枠線非表示*/
.startpage .startpage-navigation .startpage-navigation-group:last-of-type {
  border-left: none;
}

/*スピードダイヤルのプライバシー統計バー*/
.SpeedDial-Blocked-Counter {
  background-color: transparent; /*背景透明化*/
}

上記コードを適用することで、下記のようになります。

スタートページをカスタマイズするCSSの適用前と適用後の比較画像

僕が作成した桜のテーマでは、下記画像のようになります。

Pastel Colors Cherry blossomのスタートページカスタマイズ

スピードダイヤルの背景を透明にして、アイコンが浮いているようにしているのが特徴です。

ナビゲーションバーは下配置に変更

自分でも何で下にしているんだろうって思ったんですが、ナビゲーションバーは下部配置にしています。あ、ブックマークバーをマウスオーバーで自動開閉するようにしているからか…。多分被ったんですね。(2022年4月13日追記:ページ内検索を下配置にする方法は、こちらの記事を参考にしてみてください。)

CSSを使えば、マウスホバー時だけスピードダイヤルを表示する…といったことも可能です。

本記事で紹介した以外のスタートページ関連のCSSを知りたい場合は、当サイトの検索ボックスで「スタートページ CSS」と検索してみてください。サムネイル更新ボタンを非表示にする…といったコードも紹介しています。

ブックマークレットを活用してアイコン入手

サイトのアイコン画像を入手したい場合は、ブックマークレットを活用してみましょう。ブックマークレットとは、ブックマーク上で動作するプログラムのことです。

Vivaldiの設定を開いて、クイックコマンド→コマンドチェイン欄を表示します。新しいチェインを作成して、コマンド1を「現在のタブでリンクを開く」にします。URLの部分を下記コードにします。

javascript:(function()%7Bvar%20i%3D0%3Bvar%20arrLink%3D%5B%5D%3Bvar%20found%3D0%3BarrLink%3Ddocument.getElementsByTagName('link')%3Bif(arrLink.length%20%3E%200)%7Bfor(i%3D0%3Bi%20%3C%20arrLink.length%3Bi%2B%2B)%7Bif(typeof%20arrLink%5Bi%5D.rel%20!%3D%3D'undefined'%20%26%26%20arrLink%5Bi%5D.rel.indexOf('icon')%3E%20-1)%7Bfound%3D1%3Bwindow.open(arrLink%5Bi%5D.href)%3B%7D%7Dif(found%3D%3D%3D0)%7Balert('favico%20Not%20Found')%3B%7D%7Delse%7Balert('favico%20Not%20Found')%3B%7D%7D)()%3Bvoid(0);
Vivaldi設定:クリックコマンド コマンドチェイン

これで、ブックマークレットレット(コマンドチェイン版)が完成しました。

アイコンを入手したいサイトを開きます。クイックコマンドダイアログを起動します。デフォルトでは、F2になっています。先ほど作成したコマンドチェインの名前を入力して実行します。

クイックコマンド ブックマークアイコンを取得コマンドチェインを選択した画像

そのサイトのアイコン画像が新しいタブで表示されます。右クリックで画像を保存できます。

Twitterのロゴ画像

サイトによっては表示されない&画像サイズが小さい場合もあります。その場合は、少々手間ですが、次で紹介する方法を試してみましょう。

背景透過アイコンを作成するコツ

コツ…っていうほどでもないんですが、こういうこと意識したらいいんじゃない~?ってことを書きます。

  1. 高画質のアイコンをGoogle検索でゲットする
  2. ヒットしない場合はサイトをスクショする
  3. 背景透過ツールで透明にする

高画質のアイコンをGoogle検索でゲットする

登録したいサイト名で、Google画像検索してみます。多分、いい感じのアイコンがヒットします。

該当サービス名でGoogle検索する

ヒットしたら、右クリック→名前を付けて画像を保存でPCにダウンロードします。

ロゴを見つけたら右クリック 名前を付けて画像を保存

ヒットしない場合はサイトをスクショする

上記のGoogle画像検索でそれっぽい画像がヒットしない場合は、該当サイトにアクセスします。試しに、メルカリのロゴ画像を入手してみます。

Windows11の画面領域切り取りツールを起動します。WinShiftSで起動します。

Windows11の画面領域切り取りツールを起動する

サイトのロゴは大体ヘッダー部分(画面上部らへん)にあるので、そこを範囲選択してクリップボードに取り込みます。

ロゴの部分を切り取ってクリップボードに保存する

後はペイントアプリ等を起動して貼り付けて画像として保存します。

ペイントアプリに貼り付ける

続いて、画像を綺麗に拡大してくれるツール「waifu2x-caffe」で保存した画像を拡大します。詳しくは、下記記事を参考にしてみてください。

これで、いい感じのロゴ画像が拡大された綺麗な状態でゲットできるはずです。

背景透過ツールで透明にする

Windowsのおすすめフリーソフトだと「GIMP」、インターネット上で完結したい場合は、「画像透過ツール」などがおすすめです。指定した背景色を透明にできます。

画像透過ツール

いい感じに登録できました。

ナポリタン寿司のPC日記をスピードダイヤルに登録

当然ですが、著作権があるので人様のロゴを加工して公開するといったことはしないようにしましょう。

外部サービスを利用して作成

VIVALDI THUMBNAIL GENERATOR」と呼ばれるサイトで、いい感じのスピードダイヤル用サムネイルを作成できます。ブックマークからファビコンを取得して、好きなアイコンサイズ、背景色にできます。

VIVALDI THUMBNAIL GENERATORのスクリーンショット

背景色を指定できるので、全て同じ色にすると統一感が出ます。

感想

以上、スタートページ、およびスピードダイヤルのカスタマイズ方法についてでした。

スタートページは、一番開くサイトといっても過言じゃないと思うので、自分が好きなようにカスタマイズしてみましょう。

Posted by ナポリタン寿司