製品： デスクトップ版 Vivaldi のみ

ウェブパネル は Vivaldi のサイドパネルに追加して常に手元においておける特別なタブのようなものです。

ウェブパネルでは、ユーザーが設定した URL がサイドパネルの狭い列に読み込まれます。幅が狭いモバイルのようなビューポートにマッチするよう、モバイルのユーザーエージェントで読み込まれます。モバイルデバイスに最適化されたドキュメントやウェブアプリは、ウェブパネルで問題なく実行されるでしょう。

ウェブパネルは、タブの通知を通して数値に関するステータス情報を、また、タブのアイコン（ファビコン）を動的にアップデートすることで、その他のステータス情報のやり取りを行えます。

問題が生じる可能性がある alert() や prompt() のようなダイアログ API は利用できません。

ウェブパネルは通常のタブと共有するコンテキストで実行します。ウェブパネルはユーザーに新たな許可を促すことはできませんが、通常のタブに与えられた許可を共有することができます。

拡張機能で利用できる chrome.sidePanel API を使って、さらにパワフルで一体化されたパネル体験を実現することができます。

製品： デスクトップ版 Vivaldi のみ

タブの通知でウェブページが数値に関するステータスの概要をユーザーに示すことができます。 例としては、新規の未読メッセージ、メールの数、ニュースの数、処理していないタスクや支払などの他、ショッピングカートに追加したアイテムの数などがあります。

タブの通知はタブバーやウェブパネルで、ドキュメントのファビコンの上に数字のバッジとして表示されます。

Vivaldi はドキュメントタイトルの先頭にある数値カウンターが「かっこ」で囲まれていて (U+0029 RIGHT PARENTHES と U+0028 LEFT PARENTHESIS)、また、スペースでタイトルの残りと区切られている (U+0020 SPACE) 場合を検知します。 以下はその例です：

<title>(7) Webmail</title>

タブの通知はデフォルトで有効になっていますが、無効にすることができます。

ドキュメントのタイトルが変更されると、バッジは動的にアップデートされます。 パフォーマンスが最適となるよう、document.title プロパティか、<title> 要素の innerText プロパティをアップデートしてください。 <title> 要素を置き換えると、バッジの更新が遅れる可能性があります。

２桁、あるいは、それ以上の数の場合、スペースの制約のため、数字のバッジの代わりに「＋」サインのバッジとして表示される可能性があります。

数値カウンターはバッジが表示されるユーザーインターフェイスのドキュメントタイトルから削除されます。 文字のシーケンス “(0) ” がタイトルから削除されますが、バッジは生成されません。

タブの通知はドキュメントタイトルのトップフレームのみで検知されます。

タブの通知の無効化

タイトルの前にゼロ幅スペース U+200B ZERO WIDTH SPACE 文字を付けて、ドキュメントでタブの通知を無効にすることができます。 以下はその例です：

<title>&#x200b;​(1195) Step Counter</title>

製品： デスクトップ版 Vivaldi のみ

Vivaldi ではリンク内のテキストを選択したり、リンクをドラッグすることができます。 Vivaldi での動作は、他の Blink (Chromium) ブラウザのデフォルトの動作と異なります。

ユーザーはリンク上でクリックして左右にドラッグすることでテキストを選択できます。 上下にドラッグすることでリンク要素がドラッグ可能になります。

リンクをどの方向にも常にドラッグできるようにするには、draggable 属性を true に設定してください。 以下はその例です：

<a href="https://example.com/" draggable="true">
  Draggable and Not Selectable Link Text
</a>

リンクのテキストをどの方向にも選択可能にするには、draggable 属性を false に設定してください。 以下はその例です：

<a href="https://example.com/" draggable="false">
  Selectable and Not Draggable Link Text
</a>

リンクが明示的にドラッグ可能でない場合 (デフォルト)、CSS の user-select プロパティは無視され、その cursor プロパティも無視される可能性があります。

製品： デスクトップ版、Android 版、iOS 版 Vivaldi

アダプティブテーマカラーを使用して、タイトルバー、タブバー、アドレスバー、ステータスバーなどを含む Chrome ブラウザでウェブページにアクセントカラーを設定することができます。例えば、Chrome ブラウザにライトな抹茶グリーンカラーを適用する場合は以下のようになります：

<meta name="theme-color" content="#8ba888">

Vivaldi はドキュメントで一番最初に <meta> と名付けられている要素を使用します。

アダプティブテーマカラーはデフォルトで有効になっています。機能はカスタムのテーマを使用することで無効にできます。

デスクトップ版や Android 版 Vivaldi では、適切なメディアクエリを使用してライトテーマとダークテーマそれぞれに異なる色を設定できます。例えば、ライトモードにはライトな抹茶グリーンカラー、ダークモードにはダークな抹茶グリーンカラーを適用する場合は以下のようになります：

<meta name="theme-color" content="#8ba888" media="(prefers-color-scheme:light)">>
<meta name="theme-color" content="#44624a" media="(prefers-color-scheme:dark)">

Android 版と iOS 版 Vivaldi では、content プロパティに対する動的なアップデートは無視されます。これらのプラットフォームのテーマカラーは、ドキュメントの初期化時にのみ設定されます。

デスクトップ版 Vivaldi では、テーマカラーに対する急激な変更は遅れて反映される可能性があります。ドキュメントでテーマカラーが何度も変更されないようにしてください。

一部のテーマカラーのぼかしや彩度は、ツールバーのテキストやアイコンと十分なコントラストを保つため、多少調整される可能性があります。

Vivaldi Social には、色々な言語を話す人々が集まっています。 世界のさまざまな場所で人々が何をしているのかを知ることができるのはとても魅力的ですが、その言語を理解できなければ、それもかないません。

そんな言語の壁を越えるため、Vivaldi Social では、Vivaldi ブラウザでもお馴染みの Lingvanex が提供する翻訳サービスを使用しています。

投稿の翻訳

Vivaldi Social での投稿は、ユーザーインターフェイスの言語として選択された言語に翻訳されます。 ユーザーインターフェースの言語は、ユーザー設定 > 外観 > 言語 で変更できます。

投稿を翻訳するには：

1. Vivaldi Social で翻訳したい投稿を確認する
2. 投稿の下にある「翻訳」ボタンをクリックする
3. 元の言語に戻すには、「原文を表示」をクリックする

投稿が別の言語にもかかわらず、翻訳のオプションが表示されない場合は、投稿者が投稿に正しい言語を設定していないことが考えられます。 そんな時には、Vivaldi ブラウザに内蔵された翻訳機能を使って投稿を翻訳してください。

---

投稿を翻訳可能にするには

自分の投稿を翻訳可能にするには、投稿に使用する言語と一致する言語を選択して設定するようにしてください。

デフォルトの投稿の言語を設定するには：

1. ユーザー設定 > その他 > デフォルトの投稿設定 >投稿する言語に移動する
2. 投稿に最も使用する言語を選択する

デフォルトとは異なる言語で投稿する場合には、投稿エディターで以下のように言語設定を変更してください：

1. テキスト欄の下で現在の言語コード（ など）をクリックする
2. ドロップダウンメニューから投稿に使用する言語を選択する

iOS 版 Vivaldi で何らかの問題に遭遇し、自分で修正できるのか、バグを報告する必要があるのかを見極めたい場合、以下のステップに従ってください。 多くの場合、ウェブページを再度読み込むか、再起動してアプリをアップデートし、追加された変更を適用することで解決できることがあります。

アプリの再起動

場合によっては、非常に簡単なことで解決できることがあります。ブラウザを終了して再起動すると、問題が解消される場合があります。

iOS 版 Vivaldi を終了するには、デバイスのアプリスイッチャーを開いて、Vivaldi を上にスワイプしてください。

モバイルデバイスを長い時間使用していた場合、デバイスを再起動することで解決できる場合があります。

---

アプリのアップデート

アプリの自動更新をオフにしている場合は、App ストア、あるいは Vivaldi をインストールしたアプリストアで、アップデートがないかを手動で確認してください。

---

トラッカー・広告ブロッカーの無効化

トラッカー・広告ブロッカーにより何らかの要素がブロックされたことで、ウェブサイトが正しく表示されない場合があります。 アドレスバー右側の コンテンツブロッカーをクリックしてブロッカーを無効にし、ウェブサイトが正しく表示されるかを確認してみてください。

ブロック設定を全体的に変更するには、Vivaldi メニュー > 設定 > トラッカー・広告ブロッカー > デフォルトのブロックレベルに移動する

---

ブラウジングデータの削除

ウェブサイトは常にアップデートされていますが、サイトの旧いバージョンの情報はキャッシュファイルや Cookie に保存されています。 この場合、表示されたウェブサイトに不整合が生じたり、時には機能が壊れることもあります。

加えて、ブラウジングデータを長い期間保存するとデバイスのメモリーを浪費してしまうため、時々削除することでブラウザの速度を向上することができます。

iOS 版 Vivaldi でブラウジングデータを削除するには：

1. Vivaldi メニュー > 設定 > プライバシーとセキュリティ > ブラウジングデータの削除に移動する
   あるいは、パネル > 履歴パネルに移動して、画面右下の「閲覧履歴データの削除」をタップする
2. 削除したいデータと期間を選択する
3. 「データを削除」をタップする

---

flags のリセット

Experiments（実験機能） は、開発中の新機能をテストできる素晴らしい方法です。 しかし、バグが存在するため、flags を通してのみ利用できるようになっています。 flags を通して新機能を試した後に Vivaldi が正しく機能しなくなったり、クラッシュしたりした場合には、デフォルトの設定に戻してください。

flags をリセットするには：

1. vivaldi://flags に移動する
2. 右上の「Reset all」をタップする
3. ウィンドウ下の「Relaunch」をタップしてブラウザを再起動する

まれにブラウザを 2 度再起動しないと、experiments が完全にリセットされない場合があります。

---

iOS 設定の確認

iOS のオペレーティングシステムの設定が Vivaldi の機能に影響する可能性があります。 Vivaldi に影響しそうな設定をチェックして変更し、再度テストして問題が解決されたかを確認してください。

---

その他のアプリの無効化

Vivaldi に影響を与える可能性があるアプリ（VPN など）を使用している場合、該当のアプリを無効にした後、同じ問題が生じるかどうかを確認してください。

---

Vivaldi のスナップショット版のテスト

遭遇したバグが修正され、スナップショット版のブラウザでテストされている場合があります。 その場合、修正は次の安定版に取り込まれるため、安定版がリリースされるまでお待ちください。

iOS では、TestFlight アプリからスナップショット版をインストールできます。

---

バグを見つけたら？

上記のステップに従っても問題が解決されない場合には、フォーラムに投稿してみてください。 フォーラムではコミュニティメンバーが自分のデバイスでテストして、バグを確認したり、解決方法を提案してくれたりします。 場合によっては、開発者が既に該当のバグを認識しているか、バグ報告が必要かどうかなどのアドバイスをくれることもあります。

バグを報告するには、まず、iOS 版 Vivaldi でのバグ（不具合）の報告を確認した上で、vivaldi.com/bugreport に移動してレポートを提出してください。

デスクトップ版ブラウザと同様、iOS 版 Vivaldi もユニークなユーザーインターフェイスを備えています。

タブバー

デスクトップ版と同様、開いているすべてのタブをタブバーで把握できます。 多数のタブを開いている場合、タブバーで左右にスワイプして、他のタブを確認できます。

タブバーを有効・無効にするには：

1. Vivaldi メニュー > 設定 > タブに移動する
2. 「タブバーを表示」で有効・無効を切り替える

アドレスバーと共にタブバーを画面下に移動させるには：

1. Vivaldi メニュー > 設定 > タブ に移動する
2. アドレスバーの位置で「下部」を選択する

---

アドレスバー

• サイト情報 – 接続の安全性を確認し、サイト設定にアクセス
• アドレスと検索フィールド – アクセスしたいサイトの URL か、調べたい検索語句を入力する
• 再読み込み – 下にスクロールしすぎて、リロードするために下にスワイプするのが合理的でない場合は、リロードボタンをタップすることができます
• コンテンツブロッカー – ウェブサイトに対するトラッカーと広告ブロックのレベルを変更する
• Vivaldi メニュー – Vivaldi ロゴをタップして、 ブックマーク、設定などのオプションにアクセスする

アドレスバーを画面下部に移動させるには：

1. Vivaldi メニュー > 設定 > タブ に移動する
2. アドレスバーの位置で「下部」を選択する

アドレスバーを画面下部に移動させる場合、検索候補の表示順序を反対にして、最も関連性の高い候補がアドレスバー近くに表示されるようにすることをお勧めします。

検索候補の表示順序を反対にするには：

1. Vivaldi メニュー > 設定 > タブ に移動する
2. アドレスバーの位置に「下部」を選択する
3. 検索候補で、「検索候補の順序を逆にする」を有効にする

---

ツールバー

• パネル – ブックマーク、 履歴、 メモ、 ダウンロードにアクセスできます
• 履歴を戻る – アクセスしたページの履歴で前のページに移動できます
• アドレスフィールドにフォーカスして検索、あるいはウェブサイトのアドレスを入力できます。 タブスイッチャーやウェブページでは、その場所に 新規タブボタンが表示されます
• 履歴を進む – アクセスしたページの履歴で次のページに移動できます
• タブスイッチャー – 開いているすべてのタブ、プライベートタブ、同期済みタブ、最近閉じたタブを表示できます

アドレスバーを下部に表示すると、画面下には 2 つのツールバーが表示されます。 タブバーを有効にしている場合、画面下部ではツールバーの場所にタブバーが表示されます。

ランドスケープモードや iPad のような大きな画面のデバイスでは、画面下のツールバーのアイコンはすべてアドレスバーに表示されます。

デスクトップ版 Vivaldi は多数のカスタマイズオプションを提供していることで知られていますが、その多くが iOS 版 Vivaldi でも利用できます。

iOS 版 Vivaldi でブラウザのテーマを変更するには：

1. Vivaldi メニュー > 設定 > 外観とテーマ > ブラウザテーマ に移動する
2. 以下のいずれかから選択する：
   • システム設定に従う
   • ライトモード
   • ダークモード

ライトテーマを選択すると、ブラウザのツールバーはウェブサイトの色に合わせてアクセントカラーが変わります。

アクセントカラー

ブラウザのツールバー用にアクセントカラーを選択して、テーマをさらにカスタマイズできます。 タブバーを有効にすると、選択したアクセントカラーで表示されます。 タブバーが非表示の場合、アドレスバー（画面下部にある場合は下部ツールバーも）がアクセントカラーで表示されます。

アクセントカラーを選択するには：

1. Vivaldi メニュー > 設定 > 外観とテーマ > アクセントカラー に移動する
2. 以下のいずれかから選択する：
   • プリセットカラーの 1 つ
   • ページからアクセントカラーを継承
   • カスタムカラー – 色の HEX 値 を入力するか、前にある カラーホイール をタップして、グリッド・スペクトル・スライダーを使って色を選択します。

---

カスタムのスタートページの壁紙

デスクトップ版と同様、組み込まれている壁紙から選択してスタートページに適用するか、独自の画像を使用することができます。

壁紙をアップデートするには：

1. Vivaldi メニュー > 設定 > 外観 > 壁紙 へ進む
2. 好きな壁紙をタップするか、+ ボタンをタップして「写真」から画像を選択する

---

ウェブページのダークモード

アプリのユーザーインターフェースに加えて、ウェブサイトもダークモードで表示したい場合は：

1. Vivaldi メニュー > 設定 > 外観とテーマ > ウェブサイトの外観 に移動する
2. 以下の中から選択する：
   • ライト
   • ダーク
   • 自動

一部のウェブサイトではサイトをダークモードで提供していません。 その場合、「ダーク」のオプションを選択し、「すべてのウェブサイトにダークテーマを強制適用」を有効にすることで、ダークモードを強制的に適用することができます。

セッションは、開いているタブを後で簡単にアクセスできるように保存する方法です。 使用していないタブ、あるいは、すべてのタブを閉じて、パソコンでメモリとリソースを解放できます。 セッションには単一のウィンドウや、すべてのウィンドウ、また、オプションとしてワークスペースのタブを含めることができます。 ここでは、セッションパネスを使用してセッションを管理する方法を説明します。

セッションパネルへのアクセス

セッションパネルを開くには：

• サイドバーの セッションパネルボタンをクリックする
• クイックコマンドで「セッションパネル」と入力する
• セッションパネルを開くキーボードショートカット、あるいは、マウスジェスチャーを作成する

---

新規に保存したセッションの追加

セッションパネルを使用してタブをセッションとして保存するには：

1. セッションパネルを開く
2. パネル右上の「タブをセッションとして保存」をクリックする
3. セッションに名前をつける
4. セッションにすべてのワークスペースのタブを含めるか、現在のウィンドウのタブのみを保存するかを選択する
5. 「保存」をクリックする

---

セッションの表示と編集

保存したセッションのコンテンツを表示・編集するには：

1. セッションパネルを開く
2. セッションを選択する
3. パネル右上の 「セッションを編集」をクリックする

ウィンドウパネルでアクティブなセッションのタブの並べ替え、名前の変更、タブの削除などを行えます。

---

セッションの自動保存

開いているすべてのタブを 1 時間ごとに自動的にバックアップするには：

1. パネルの下にある「セッションの自動バックアップ」をクリックする
2. バックアップを保持したい日数を選択する：
   • 過去 1 日
   • 3 日間
   • 5 日間
   • 30 日間

---

保存したセッションの削除

セッションを削除するには：

1. セッションパネルを開く
2. 削除したいセッションを選択する
3. パネル右上の「セッションを削除」をクリックする

その他に、セッション上で右クリックし、コンテキストメニュー内で「削除」をクリックすることでもセッションの削除が可能です。

パネルを使用して、ブックマークや履歴、メモ、ダウンロードなどの便利なツールに素早くアクセスできます。

パネルへのアクセス

パネルを開くには、画面下部のツールバー左側にあるパネル ボタンをタップしてください。

iOS 版 Vivaldi には、以下の 4 つのパネルがあります。

• ブックマーク
• 履歴
• メモ
• リーディングリスト

パネルを切り替えるには、パネルビュー上部にある各アイコンをタップしてください。

検索フィールドをタップして、アクティブなパネル内のコンテンツを検索できます。

パネル関連の操作は、画面下から行えます。

パネルを閉じるには、右上の「完了」をタップしてください。

---

タブレットでのパネル

iPad では、スマートフォンと比較して画面上のスペースに余裕があるため、デスクトップ版 Vivaldi と同じデザインを採用しています。

タブレットでパネルを開くには：

1. アドレスバー左側の パネルボタンをタップすると、パネルが開いて最後に表示したパネルが表示されます。
2. パネルを切り替えるには、画面左側に縦にリスト表示されたパネルアイコンをタップしてください。

パネルを閉じるには：

• パネルの右上の「完了」をタップする
• パネルの外側をタップする