【Vivaldi】スタートページ・スピードダイヤルのカスタマイズ方法
この記事では、ウェブブラウザ「Vivaldi」のスタートページのカスタマイズ方法について書きます。
スピードダイヤルは、アイコンのみ表示、CSSで背景透過にすると綺麗に見えます。
Vivaldiには、スタートページと呼ばれる専用のページに、好きなブックマークをサムネイルで登録（スピードダイヤル）できる機能があります。
新しいタブで開くページを「スタートページ」にして、よくアクセスするサイトをスピードダイヤルとして登録しておけば、瞬時に開けます。
サムネイル付きで管理できるので、どのサイトか確認しやすいです。上部には、検索ボックス（Googleなどの検索エンジン）があるので、何か調べものする時に便利です。
そんな標準で搭載されているスタートページ、スピードダイヤルのカスタマイズ方法について書きます。感覚としては、家（スタートページ）があって、その中に、自分の好きな家具（スピードダイヤル）を配置していくって感じです。
本記事は、Vivaldiを既にインストールしている前提です。「ヴィヴァルディって何？イタリアの作曲家？」って方は、下記記事を参考にしてみてください。僕のおすすめブラウザです。
カスタマイズ方法
スタートページを開くように設定
まずは、デフォルトのホームページ、新しいタブで開くページをスタートページに変更してみましょう。設定（Ctrl＋F12）を起動して、一般→ホームページをスタートページにします。
タブの「新しいタブで表示するページ」もスタートページにします。
新しいタブ
や、ホームボタン
をクリックすると、スタートページが表示されます。
スピードダイヤルの登録方法
スタートページに表示されているスピードダイヤルは、ブックマークの1つなので、「ブックマークマネージャーから追加・編集する方法」、「スタートページ内で追加・編集する」の2パターンがあります。
サクッと編集したい時はスタートページ、もりもり編集したい時はブックマークマネージャーがおすすめです。
スタートページ内から登録
「スピードダイヤルを追加」ボタンをクリックします。
登録したいURLを入力して「追加」をクリックします。フォルダーを作成して、その中に入れることもできます。
登録されます。
デフォルトでは、サイトのスクリーンショットがサムネイルとして表示されます。
追加ボタンが不要な場合は、設定→スタートページ→追加ボタンを表示のチェックを外します。
追加ボタンが非表示になります。非表示にした場合は、背景画像の好きなところをダブルクリックすると、追加ダイアログが表示されます。
ブックマークマネージャーから登録
キーボードのCtrl＋Bを押すか、以下のURLをアドレスバーに貼り付けて、Enterを押します。
vivaldi://bookmarks/ブックマークマネージャーが開きます。「スピードダイヤル」フォルダーがあるので、その中に好きなようにブックマークを移動・作成します。
動画を貼っておきます。CtrlやShiftと組み合わせることで、複数一気に移動できます。
ずらっと追加されます。
ツールバー内の全てのサイトをスピードダイヤルに移動したい時は、スピードダイヤルの対象フォルダーを変更してみましょう。フォルダーを選択して、右側の「スピードダイヤル」をチェックします。
これで、スタートページに表示されるフォルダーが入れ替わります。
「vivaldi://history/」や「vivaldi://mails/」などのVivaldiの特殊なURLも、スピードダイヤルに登録できます。
ただし、サムネイル画像はうまく取得してくれないことが多いので、自分で分かりやすい画像を用意するのがおすすめです。
スピードダイヤルの削除方法
デフォルトでは、YouTube、Yahoo!、Amazon、hulu、Vivaldia（ブラウザ内臓ミニゲーム）などの13ページが登録されています。不要なサービスは、サムネイル右上の
をクリックして削除できます。
右クリック→削除からでもできます。
ブックマークマネージャーからでも同様に作業できます。
一つずつ削除するのがめんどくさい場合は、一括で削除（非表示）することもできます。
詳しくは、下記記事を参考にしてみてください。
サムネイル画像を変更
自分で好きな画像に変更できます。事前に変更したい画像を、PC内のどこかに保存しておきます。拡張子は、JPG、JPEG、PNG、BMP、GIF、WEBPの6種類に対応しています。
僕は、「Vivaldiスタートページ用アイコン」というフォルダーを作成して、色々入れています。
アイコン画像を変更したからといって、PCに保存してある元の画像は削除しないようにしましょう。
元の画像を削除するとスピードダイヤルの方も一緒に非表示になります。PC内にある画像と連携しているので、どこかのフォルダーの中にまとめて管理しておくのがおすすめです。
スピードダイヤルのサムネイルにマウスを乗せると、左上に
アイコンが表示されるのでクリックします。
変更したいアイコン画像を選択します。
アイコンが変更されます。
余談ですが、動くのが特徴のGIF画像も登録できます。
自作できる方は、かなり個性が出せるかなと思います。ただし、毎回ヌルヌル動かれては、ストレスかもしれません。
デフォルトで用意されているサムネイル画像については、以下の場所に保存されています。
\Vivaldi\Application\バージョン\resources\vivaldi\resourcesVivaldiより前のフォルダーについては、各自でインストールしている場所が違うと思うので省略しています。resourcesフォルダーの中には、こんな感じで、色々なサムネイルが「sd_〇〇」という名前で保存されています。
使うことはあんまりないと思いますが、元の画像に戻したい時に活用してみましょう。初期で用意されているサービス以外にも沢山のサイトアイコンが保存されていました。
国によって主要のサービスが違うから、使い分けているのかなぁと思います。日本では13種類でしたが、別の国だともっと多かったり、少なかったりするんでしょうかね。
僕のおすすめは、背景を透過したPNG画像です。背景透過のアイコンを作成するコツについては、こちらに飛んで参考にしてみてください。後述するCSSと組み合わせることで、綺麗になります。
列幅、サムネイルサイズについて
設定→スタートページでスピードダイヤルの表示方法について設定できます。以下、紹介するカスタマイズ項目は全てこちらの設定画面から変更できます。
結構登録する方は、最大列数7以上、サムネイルサイズは「極小」がおすすめです。かなりスッキリします。
Vivaldiaをプレイしない場合は、Vivaldiオリジナルゲームの「スピードダイヤルに表示」のチェックを外しましょう。
スタートページのナビゲーション
スタートページ上部に表示されるスピードダイヤル、ブックマーク、履歴、メモを切り替えできるバーのことです。
使わない方は、オフにすることで見た目がスッキリします。
スピードダイヤルの外観
サイト名の表示を設定できます。以下の3種類から選択できます。
- タイトルを表示する
- ホバー時にタイトルを表示する
- タイトルを非表示にする
「ホバー時にタイトルを表示する」にしてみた動画を貼っておきます。
「基本は、サムネイルで判別するからタイトルは不要、でもふとした時にタイトル見たい時がある！」という方は、「ホバーで表示する」がおすすめです。僕は不要なので、「非表示」にしています。
ファビコンを表示する
サイトタイトルを表示するようにした場合、タイトル名の左にアイコンを表示するかどうかの設定です。比較画像を貼っておきます。
タイトルを表示するようにしている方は、オンにした方が見やすいのかなぁと思います。そもそも非表示にしている方には関係ない項目です。
サムネイルコントロール＆削除ボタン
スピードダイヤルにマウスを乗せると、小さいボタンが表示されます。このボタンは、「削除ボタンを表示する」、「サムネイルコントロールボタンを表示する」のチェックを外すことで非表示にできます。
「うっかり押し間違えて、サムネイル更新ボタンを押してしまう！そしたら、折角カスタマイズしたアイコンがパーになってリセットされてしまう！」といった方は、非表示にしておくと便利です。
非表示にしていても、サムネイル画像の変更は、スピードダイヤルの右クリック→「カスタムサムネイル画像を選択」からできます。
プライバシー統計
Vivaldi5.2（2022年4月6日公開）から実装された機能です。スタートページ内にプライバシー統計と呼ばれるバーが追加されました。Vivaldi標準の広告ブロッカーがどのくらい機能したかを確認できます。
不要な場合は、スピードダイヤルの外観→プライバシー統計を表示のチェックを外します。
詳細情報をクリックすると、具体的なブロックした数が表示されます。
背景画像の変更
設定→テーマから変更できます。
エディタータブ→背景→画像を選択で好きな画像に変更できます。
僕が実際に撮影した米の写真にしてみました。うんうん。美味しそう。
「デスクトップ画像を使用」でPCの壁紙と同じ画像にできます。
テーマをカスタマイズする時は、デフォルトで用意されているテーマではなく「新しいテーマ」で複製してから作成することをおすすめします。
理由は、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; /*背景透明化*/
}上記コードを適用することで、下記のようになります。
僕が作成した桜のテーマでは、下記画像のようになります。
スピードダイヤルの背景を透明にして、アイコンが浮いているようにしているのが特徴です。
自分でも何で下にしているんだろうって思ったんですが、ナビゲーションバーは下部配置にしています。あ、ブックマークバーをマウスオーバーで自動開閉するようにしているからか…。多分被ったんですね。（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);
これで、ブックマークレットレット（コマンドチェイン版）が完成しました。
アイコンを入手したいサイトを開きます。クイックコマンドダイアログを起動します。デフォルトでは、F2になっています。先ほど作成したコマンドチェインの名前を入力して実行します。
そのサイトのアイコン画像が新しいタブで表示されます。右クリックで画像を保存できます。
サイトによっては表示されない＆画像サイズが小さい場合もあります。その場合は、少々手間ですが、次で紹介する方法を試してみましょう。
背景透過アイコンを作成するコツ
コツ…っていうほどでもないんですが、こういうこと意識したらいいんじゃない～？ってことを書きます。
- 高画質のアイコンをGoogle検索でゲットする
- ヒットしない場合はサイトをスクショする
- 背景透過ツールで透明にする
高画質のアイコンをGoogle検索でゲットする
登録したいサイト名で、Google画像検索してみます。多分、いい感じのアイコンがヒットします。
ヒットしたら、右クリック→名前を付けて画像を保存でPCにダウンロードします。
ヒットしない場合はサイトをスクショする
上記のGoogle画像検索でそれっぽい画像がヒットしない場合は、該当サイトにアクセスします。試しに、メルカリのロゴ画像を入手してみます。
Windows11の画面領域切り取りツールを起動します。Win＋Shift＋Sで起動します。
サイトのロゴは大体ヘッダー部分（画面上部らへん）にあるので、そこを範囲選択してクリップボードに取り込みます。
後はペイントアプリ等を起動して貼り付けて画像として保存します。
続いて、画像を綺麗に拡大してくれるツール「waifu2x-caffe」で保存した画像を拡大します。詳しくは、下記記事を参考にしてみてください。
これで、いい感じのロゴ画像が拡大された綺麗な状態でゲットできるはずです。
背景透過ツールで透明にする
Windowsのおすすめフリーソフトだと「GIMP」、インターネット上で完結したい場合は、「画像透過ツール」などがおすすめです。指定した背景色を透明にできます。
いい感じに登録できました。
当然ですが、著作権があるので人様のロゴを加工して公開するといったことはしないようにしましょう。
外部サービスを利用して作成
「VIVALDI THUMBNAIL GENERATOR」と呼ばれるサイトで、いい感じのスピードダイヤル用サムネイルを作成できます。ブックマークからファビコンを取得して、好きなアイコンサイズ、背景色にできます。
背景色を指定できるので、全て同じ色にすると統一感が出ます。
感想
以上、スタートページ、およびスピードダイヤルのカスタマイズ方法についてでした。
スタートページは、一番開くサイトといっても過言じゃないと思うので、自分が好きなようにカスタマイズしてみましょう。