【Vivaldi】サイドバーの使い方。ウェブパネルが便利!

2022年1月7日Vivaldi

Vivaldiのアイコン

この記事では、ウェブブラウザ「Vivaldi」のサイドバー(パネル)について書きます。

ブックマーク、履歴、開いているタブ、好きなウェブサイト等を登録できます。

Vivaldiのウェブパネルのスクリーンショット

左右どちらかにパネルと呼ばれるサイドバーを展開して、ブックマーク、リーディングリスト、履歴、メモ、ダウンロード履歴、メール、RSS、カレンダー、翻訳、好きなウェブサイトなどを確認できる機能です。

パネルは独立しているので、いつでもどこでも展開できる、パネル上で操作が完結できる点が特徴です。例えば、Google検索している時に、パネル内で履歴やブックマークを確認するといったことができます。クリックで飛べます。

いちいちCtrlBでブックマークマネージャーを開いたり、CtrlHで履歴を開いたりしなくても、サイドバー内で全て完結します。

ウェブパネルを使えば、サイトを閲覧中に、サイドバーでTwitterを確認する、YouTubeを垂れ流しにしておく…といったことができます。Vivaldiの一押し機能です。

パネル以外のおすすめ設定については、下記記事を参考にしてください。

Vivaldiのパネルの使い方

キーボードのF4を押すか、左側のパネル開閉バー、または左下の開閉ボタンをクリックします。

Vivaldiのパネルを表示する手順画像

設定から、展開キー、開閉バーは表示切り替えできます。それぞれのメニューにアクセスするには、各アイコンをクリックします。

Vivaldiのパネルを展開する手順画像

パネルは、以下のようになっています。

各パネルの種類
ブックマークパネルブックマーク
リーディングパネルリーディングリスト
ダウンロードパネルダウンロード履歴
履歴パネル履歴
メモパネルメモ
タブパネルウィンドウ
メールパネルメール(有効にしている場合)
RSSパネルRSS(有効にしている場合)
連絡先パネル連絡先(有効にしている場合)
カレンダーパネルカレンダー(有効にしている場合)
翻訳パネル翻訳
ウェブパネル自分で登録したウェブパネル
新しいウェブパネルを追加ウェブパネルの追加

表示切り替えはショートカットキーでもできますが、同じパネルをクリックすることでも切り替えれます。

パネルの幅は、マウスで調整できます。

サイズに応じてデザインが変化するレスポンシブデザインになっています。ウェブパネルの場合は、途中でスマホ用デザインに切り替わります。(サイトによりけり)

パネルごとで幅を変化させたい場合は、固定したいパネルアイコンを右クリック→パネルの幅を記憶をクリックします。

パネルの右クリックメニュー画像 パネルの幅を記録

こうすることで、ブックマークパネル、メモパネルで、それぞれ異なる横幅にするといったことができます。

ブックマーク

ブックマークを確認できます。ダブルクリックで開きます。

右クリックで、新しいタブとして開く、名前の変更、削除等ができます。簡単なブックマーク編集ならサイドバーだけで完結します。

ブックマークパネルの右クリックメニュー

設定のブックマークで、「新しいタブでブックマークを開く」にチェックが入っている場合は、現在のタブではなく、常に新しいタブで表示します。

Vivaldi設定:ブックマーク画像

「シングルクリックでブックマークパネルの項目を開く」にチェックを入れると、ダブルクリックではなく、1回のクリックで開きます。

僕はチェックしています。クリックの手間が省けるからです。

リーディングリスト

2022年4月6日に公開されたVivaldi5.2から実装されたパネルです。その一つ前に実装されたリーディングリストと呼ばれる機能のパネル版といった感じです。

後で読みたいと思った記事を、じゃんじゃん登録してパネル内で管理できます。

「ブックマークに登録するほどではない…だけど、開きっぱなしにするのもごちゃごちゃして嫌だ…」という場合は、リーディングリストに登録してみましょう。登録したサイト記事が一覧表示されるので、後からワンクリックで見ることができます。

「後で読む」に登録したいサイトを開いて、リーディングリストパネルの「+」をクリックします。

リーディングリストパネルにサイトを登録する手順画像

追加されます。見たい時はダブルクリックで開きます。

プライムビデオの映画をずらっとリーディングリストに登録した画像
ポイント

ダブルクリックが煩わしいという場合は、設定→パネル→リーディングリストパネル→シングルクリックでアクティブ化にチェックを入れましょう。

これで、ダブルクリックではなく、シングルクリックで記事を開けます。

右クリックメニューも用意されています。CtrlAで全選択、Deleteで削除などのショートカットキーにも対応しています。

リーディングリストに登録したサイトの右クリックメニュー

ダウンロード

ダウンロード履歴を確認できます。「どのファイルをいつダウンロードしたのか~?」が確認できます。

ダウンロードパネルのスクリーンショット

履歴をずっと残しておくと、重たくなる原因にもなるので、定期的に右上の掃除アイコンアイコンで掃除しておきましょう。

履歴

履歴を確認できます。ブックマークと同様にダブルクリックで開きます。検索欄もあるので、過去履歴を検索する時にも便利です。

並び替え、日付で絞り込みできます。

履歴パネルのスクリーンショット

メモ

メモを書けます。

メモパネルのスクリーンショット

タブで開くこともできますが、サクッとメモしたい時はパネルの方がアクセスしやすいです。

vivaldi://notes/

メモは、スマホと同期できます。PCでパパっとメモしてスマホで確認する…といったことができます。

ウィンドウ(タブ)

現在開いているタブ、閉じたタブを確認できます。クリックでそのタブに移動します。ピン留めしたタブ、スタックしたタブも区別されて表示されます。

ウィンドウパネルのスクリーンショット

風の噂で聞いたのですが、Vivaldiヘビーユーザーの一部の人は、タブバーを非表示にして、ウィンドウパネルを最大限活用しているようです。

確かにタブバーと同じように、タブを閉じる、移動、複製、タブスタック、新しいタブを開く…などができるので、不要かもしれませんね。

僕は、基本的にマウスジェスチャーでタブ操作しています。右クリック押しながらマウスを動かすアレです。「新しいタブを開く」、「タブを閉じる」が本当に快適です。

2022年06月24日(金)追記

現在、ナポリタン寿司も、ウィンドウパネルに完全移行しています。タブバー(垂直タブ)は非表示にして、使っていません。デメリットもいくつかあるのですが、おおむね満足しています。

【余談】タブスタック作成

スタックしたいタブを、CtrlShiftを使って複数選択して、右クリック→「選択した〇個のタブをスタック」をクリックします。

ウィンドウパネルの右クリックメニュー

スタックが作成されます。

パネル内でタブスタックを作成してみた画像

実際のタブバーでも反映されます。

タブスタック 二段型のスクリーンショット

メール

メールを確認できます。

メールパネルのスクリーンショット

ここでいうメールは、設定→メールで追加したアカウントです。Gmailなどを登録できます。

Vivaldi設定:メール

メールパネルの不要な項目は、CSSで非表示にできます。ちょっとしたカスタマイズ例も紹介しているので、ぜひ参考にしてみてください。

フィード

購読したRSSを確認できます。

フィードパネルのスクリーンショット

メール、RSS、連絡先、カレンダーについては設定→一般→「メール、カレンダー、フィード機能を有効にする」にチェックを入れてないと使えません。

クリックでフィードリーダーを開きます。

カレンダー

Vivaldiに内蔵されているカレンダーを確認できます。

カレンダーパネルのスクリーンショット

確認だけでなく、新しい予定の追加、削除もできます。

カレンダーパネル内で、新規に予定を作成した画像

翻訳

Vivaldi5.0(2021年12月2日公開)から追加されたパネルです。

翻訳元(自動判定)、翻訳したい言語を設定します。上部に翻訳したい文章を貼り付けして、「翻訳」をクリックすると、下部に翻訳結果が表示されます。

翻訳パネルのスクリーンショット

設定の翻訳パネルの「ペースト時にテキストを翻訳」にチェックを入れると、貼り付けた時に瞬時に翻訳してくれます。

Vivaldi設定:パネル→翻訳パネル
僕の環境だけ?

僕の環境だけかもですが、翻訳元を「自動判定」にして、ペースト時にテキストを翻訳にしていると、結構な確率で以下のエラーが表示されます。

Translation failed. Server could not determine the language.

翻訳に失敗しました。サーバーが言語を決定できませんでした。

Vivaldi翻訳パネル内で、翻訳した時に表示されたエラー内容
翻訳パネルのエラー内容画像「Translation failed. Server could not determine the language.」

なんでかは不明です。翻訳元を「英語」にすると改善されます。

「選択したテキストを自動翻訳」にチェックを入れると、パネルを表示している間、翻訳したいテキストを選択するだけで、自動的に翻訳してくれます。

ウェブパネル

自分で登録したウェブサイトを確認できます。例えば、Twitter、Vivaldiメール、ニュースサイト、好きな人のブログ、ブラウザゲームなど自由自在に登録できます。(追加方法はこちら

ウェブパネルのスクリーンショット

マウスのホイール、クリックなど普通に使えます。

毎日確認するニュースやブログなどをウェブパネルとして登録することで、YouTubeで動画を見てる時に、ささっとパネルでTwitterを確認する…といったことができます。

個人的に一押しウェブパネルは、翻訳サイト「DeepL翻訳」と「記事タイトルカウンター(29文字)」(ブロガー向け)です。

DeepL翻訳は、精度の良い翻訳サイトです。

あらかじめ、翻訳元と翻訳結果が並べて表示されるように幅を調整しておくと便利です。幅を狭くしすぎると見えにくくなるので、ある程度広げたほうがいいかなと思います。

ウェブパネルにDeepL翻訳を追加した画像

DeepL翻訳をウェブパネルに登録する場合は、余計な要素をCSSで非表示にするとスッキリするのでおすすめです。

展開ショートカットキーを設定しておくと、より便利です。ウェブパネルは上から数字順で登録されています。

設定のショートカットキーから、数字ごとに表示キーを割り当てれます。例えば、DeepL翻訳を上から3番目に登録している場合、「ウェブパネル3」になります。

登録したウェブパネルを右クリック→開く→〇〇タブをクリックすると、パネルではなく、タブで開けます。大きい画面で見たくなった時に便利です。

ウェブパネルの右クリックメニュー

また、Vivaldi5.4(2022年8月10日公開)から、ウェブパネルのミュート機能が実装されました。登録したウェブパネルごとで、ミュートにできます。

ウェブパネルの右クリックメニュー→パネルをミュート

Twitterを、パネルで見ている時に、急に動画が再生されて、爆音が鳴り響く…といった事件を回避できます。

ウェブパネルを追加する

URLを入力して登録する方法、現在開いているタブを登録する方法、ドラッグ&ドロップで一気に追加の3種類あります。好きな方法で登録してみましょう。おすすめは、タブのドラッグ&ドロップです。直感的な操作で追加できます。

現在開いているタブを登録する

ウェブパネルとして登録したいサイトを開きます。試しに、「NHKニュースサイト」を登録してみます。

NHKニュースサイトのスクリーンショット

パネルを開いて、一番下の新しいウェブパネルを追加アイコンをクリックします。

ウェブパネルに新しいサイトを登録する手順画像1

現在開いているタブのURLが自動入力されるので、そのままプラスマークをクリックします。

ウェブパネルに新しいサイトを登録する手順画像2

パネルに登録されます。

ウェブパネルに新しいサイトを登録する手順画像3

タブをドラッグ&ドロップ

登録したいタブを選択して、そのままパネルの空いている部分にドラッグ&ドロップすることで追加できます。複数選択した場合は、その分登録されます。

おすすめ設定

僕が使っているパネル関係の設定を書いておきます。

ショートカットキー

パネルの展開ショートカットキーを自分の好きなように設定しておくと便利です。

Vivaldi設定:ショートカットキー(パネルの検索結果)

デフォルトだとF4です。僕は、一時期F1に割り当てていましたが、2022年8月時点では、展開自体には、何もキーを割り当てていません。

使うパネルに、ショートカットキーを割り当てています。例えば、記事タイトルカウンター(29文字)にはF2、ウェブパネルDeepL翻訳にはF3、ウィンドウパネルにはF4といった感じです。

パネルの表示方法

Vivaldi設定:パネル

パネル位置

僕は、「右」にしています。左に垂直タブを配置していた名残です。2022年時点で、垂直タブはもう使っていないのですが、左に切り替える理由もないので、そのまま「右」に配置しています。

パネルオプション

「パネル開閉バーを表示する」はオフ、「オーバーレイ表示」もオフにしています。パネルを開く時は、直接パネルアイコンをクリックするか、ショートカットキーを利用します。

開閉バーは、オンにしていましたが、以下の2点から廃止しました。

  • スペース取りすぎ
  • マウスを持っていくのがめんどくさい

オーバーレイ表示をオンにすると、パネルを開いたあとに、タブの好きな場所をクリックすると自動開閉します。特定のパネルだけオーバーレイにしたい場合は、パネルアイコンを右クリック→パネルのオーバーレイ表示→「このパネルのみ」にチェックします。

パネルの右クリックメニュー→パネルのオーバーレイ表示→このパネルのみ

不要なパネルを非表示

設定からではなく、パネルの空いている箇所を右クリックすることで、不要なパネルを非表示にできます。チェックマークチェックマークが表示するという意味です。

不要なパネルはチェックを外しておくことで、パネルがスッキリします。

パネルの空いている箇所の右クリックメニュー

僕は、以下のようにしています。2022年8月時点では、ウィンドウ、フィード、DeepL翻訳(ウェブパネル)、記事タイトルカウンター(ウェブパネル)を頻繁に利用しています。

  • ブックマーク
  • 履歴
  • メモ
  • ウィンドウ
  • メール
  • フィード
  • カレンダー
  • ウェブパネル(DeepL翻訳、記事タイトルカウンター、他10件以上)

パネルの並び替え

パネルの項目は、Ctrlを押しながらドラッグ&ドロップすることで並び替えられます。ウェブパネルについても同様です。実際に並び替えてみた動画を貼っておきます。

注意点ですが、ウェブパネルとパネルは入替えできません。ブックマークパネルと、ウィンドウパネルの間に、DeepL翻訳のウェブパネルは配置できないということです。

2022年8月時点の話なので、今後改善されるかもしれません。

ウェブパネルの遅延読み込み

オフがおすすめです。

Vivaldi設定:パネル→ウェブパネル→遅延読み込み

起動時にバッググラウンドで自動読み込みしてくれるため、すぐにウェブパネルにアクセスできます。

DeepL翻訳の遅延読み込みオンオフ比較動画を貼っておきます。オンにすると、パネルを開いた時にはじめて読み込むので、表示が遅いです。

ウェブパネルを沢山登録している、パソコンのスペックがしょぼい場合は、オンがいいかなと思います。Vivaldiの起動が早くなるかもです。とりあえず試してみて、動作に変化がない場合は、オフにしてみましょう。

パネルが消えた場合

パネルが消えた場合、ショートカットキーかVivaldiメニューから表示できます。

ブラウザ左上のVivaldiメニューをクリック→表示→パネルを表示をクリックします。横に現在設定しているショートカットキーが表示されます。

下記画像の場合、F1となっていますね。デフォルトだとF4です。

Vivaldiメニュー→表示→パネルを表示

パネルを消す方法

ショートカットキーを使って、パネルを消すこともできます。使わない場合は、思い切って非表示にしてみましょう。

表示切り替えキーを押すことで非表示にできます。デフォルトだと、F4を1回押すと表示、もう1回押すと非表示になります。間違ってキーを押して表示されるのを防ぐには、一旦パネルを非表示にして、表示切り替えのキーを無効にします。

これでパネルは表示されなくなります。

その際、うっかり表示を防ぐために、以下の設定を変更しとくといいかなと思います。

パネルを非表示にするときのおすすめ設定
パネル
-パネルオプション
パネル開閉バーを表示するオフ
パネルのオーバーレイ表示オフ
ダウンロードダウンロードをポップアップで表示するオン
ダウンロードポップアップを自動的に開く好み
パネルを非表示にしたい時のおすすめ設定

CSSを使うことで、完全に非表示にもできます。Vivaldiの便利な機能を消すということなので、おすすめはしません。

/*パネル非表示*/
#panels-container {
  display: none;
}

CSSについては、以下の記事を参考にしてみてください。

パネルの欠点

3点ほど欠点があります。

  • 一部パネルは1つ目ウィンドウにしか表示されない
  • 一部Chrome拡張機能は使えない
  • マウスのサイドボタンは使えない

一部パネルは1つ目ウィンドウにしか表示されない

RSS、メール、連絡先パネルは、1つ目のウィンドウにしか表示されません。

フィード、メール、連絡先パネルは1つ目のウィンドウにしか表示されない

最初に開いたウィンドウのみに表示され、2つ目以降のウィンドウには表示されません。

僕は、よくメインモニターとサブモニターに2つウィンドウを表示させているので、結構困ります。いつか改善されるといいなぁと思います。

一部Chrome拡張機能は使えない

ウェブパネルの欠点です。一部Chrome拡張機能は動作しません。例えば、CSSを適用する「Stylebot」は、パネル内だと動作しません。

僕は、CSSでTwitterのデザインを変更しているので、パネル内で開いた時のデザインに違和感です。例えば、Twitterプロにすると表示される「プロモーションする」を、CSSで非表示にしています。

CSSでカスタマイズしたTwitter画面

パネル内だと、通常通り表示されます。CSSが効いていない=Chrome拡張機能が有効になっていないということです。

ウェブパネル内ではChrome拡張機能が適用されない

もし、ウェブパネル内にもCSSを適用したい場合は、「Stylus」を使ってみてください。こちらは、ウェブパネル内にも反映されます。

マウスのサイドボタンは使えない

僕が愛用しているスーパー最強マウス「Logicool G PRO ワイヤレス」には、サイドボタンがついているんですが、パネル内では機能しません。

ブラウザの「戻る」、「進む」をサイドボタンで操作している人にとっては、かなりストレスです。現状、パネル内で戻る・進むは、ボタン操作でしかできません。

ボタンは、パネル上部のタイトルを右クリック→ツールバー→「全てのコントロールを表示」をクリックすることで表示できます。

ツールバー 全てのコントロールを表示

戻る・進む・リロード・ホームボタンが表示されます。

ツールバーの戻る・進む・リロード・ホームボタン

CSSを使うことで、タイトルを非表示にして、左揃えにするといったことが可能です。

感想

以上、Vivaldiパネルの使い方についてでした。

ブックマークや履歴を一目で確認できるのも便利なんですが、ウェブパネルで好きなサイトを登録できるのが一番便利です。

ナポリタン寿司のPC日記」をパネルに登録してみてください。あぁ違う違う、間違えました。好きなウェブサイトを登録してみましょう!

Posted by ナポリタン寿司