2023/09 Vivaldi v6.2 ～ V6.4 で設定した事のまとめ／余分な機能の停止など

2023

2023/09 Vivaldi v6.2 ～ V6.4 で設定した事のまとめ／余分な機能の停止など

商品リンクをクリックし通販サイトへ飛ぶ物は「広告」のリンクです。
記事の執筆に AI な類は使用しておりません。

【目次】

はじめに
Vivaldi をポータブルで使う
自分で用意した CSS を指定する
タブを閉じたら左右タブへ移動
ダウンロードを自動で表示しない
ダウンロードバーをツールバーに表示する
ALTキーでメニューを出さない
ページを翻訳するか尋ねない
タブにマウスカーソルを置くと出るサムネイルを消す
完全なアドレス／アドレスをエンコードする
アドレス欄／URL欄から検索する
検索エンジンの Yahoo を登録する／検索エンジンの指定
アドレス欄で自動補完／ドロップダウンメニューを止める
Vivaldi の左上アイコンを三に
テーマを新しく作る
テーマを変更しても反映しない場合の設定方法
テーマを変更したらスタートページが眩しい
拡張機能のアイコンを並び替えしたい／不要アイコンを消したい
右クリックメニューを編集
メモ／メモファイル位置
拡張機能を呼び出すボタンの設置
不要な拡張機能アイコンをロックダウン ( プルダウン ) 表示
拡張機能アイコンを任意の場所へ移動
コマンドチェインのアイコンを変更
コマンドチェインで使うアイコンを作成
コマンドチェインでページを翻訳
コマンドチェインでクリップボードの内容で新しいタブを開く
コマンドチェインにキーボードショートカットを割り当てる
コマンドチェインで html を読み込み表示
X ( 旧：Twitter ) シャドウバン確認検索／日本語のみで検索
ブックマークを表示する
開いている記事のタイトルとURLをクリップボードへ
Vivaldi アップデートで検索サイトが Bing に
パスワードを簡単に編集／追加／エクスポート
上からツールバー、ブックマークバー、タブの順にする
コマンドチェインで２つのリンクを開き２画面に
タブをタイル表示する ( 手動で２画面に )
ワークスペースでタブを切り替える
設定済みのデータでユーザーを複製する
おすすめリンク／関連記事

はじめに

Firefox を使用していて VPN の接続が最新バージョンで
安定しないので安定している Vivaldi へ乗り換えしました。
バージョンは 2023/09/08 時点での Vivaldi.6.2.3105.45.x64

設定で忘れやすい箇所をここに記載しておこうかな？と。
ブログネタです。

*** ご注意 ***

ブログに書いてあることや
ブログで配布している設定ファイルな類を使用する場合は
自己責任にてお願いいたします。

このブログの管理者気ままさんは
ブログに書いてあること、ブログで配布している
設定ファイルな類を使用して発生した
すべての事柄において責任を負いません。

これに同意をいただけない方へのご使用は許可いたしかねます。

【目次へ戻る】

Vivaldi をポータブルで使う

以下の内容、データの位置などは Vivaldi をポータブルで
( スタンドアローンインストール ) 使用した場合のフォルダ位置です。

ポータブルは設定データ類を１つのフォルダに詰め込む為
インストールしたフォルダを圧縮しておけば
不具合が出た場合に圧縮したもので書き戻せば元に戻る
便利なインストール方法です。

一応、ポータブルでの使用方法。
以下にて Windows版の Vivaldi をダウンロードします。
Vivaldi ブラウザ | パワフル、パーソナル、プライベートなウェブブラウザ

落としたファイルを実行して
１．高度な設定を選択

１．スタンドアローンインストールを選択 ( これがポータブル設定 )
２．解凍先フォルダを指定
３．もしくはフォルダーを選択で解凍先を指定
４．リンクなどで Vivaldi ブラウザで開く場合は
　　スタンドアローンの Vivaldi をデフォルトのアプリ～にチェック
　　( お試し／サブとして Vivaldi を使うならチェックを外す )
　　Vivaldi が自動で更新されるのを防ぐなら
　　自動更新しないにチェックをする
５．承認してインストール

実行ファイルは解凍したフォルダの以下です。
～\Vivaldi\Application\vivaldi.exe

【目次へ戻る】

自分で用意した CSS を指定する

以下より下は Vivaldi をポータブルでインストールした場合の
設定やフォルダ位置です。
通常インストールでは位置が違う場合がありご了承下さい。

また、殆どの場合は設定から設定を致します。
設定の開き方は以下です。

Vivaldi を起動しまして
１．Vivaldi のアイコンをクリック

１．設定を選択、もしくは CTRL＋F12 で同じ画面が開きます

自分で用意しました CSS を適用する方法は以下にて。
不要な方は無理に行う意味はありません。

ここは CSS がないと試せないので
URLバーの文字をマウスで反転した場合の
色変更 CSS を以下に置いておきます。

Vivaldi-CSS-230908.zip
MD5：0D6FB53DF74FC9522EFC9C7F0F5FCC7B

自分の用意してある CSS か上の CSS を設置します。
どこでもいいのですが Vivaldi のフォルダ位置へ置けば。
新しいフォルダを作り、CSS と命名しフォルダの中に CSS をコピー。

１．URL欄に以下をコピペして Enter キー。
　　vivaldi://experiments
２．Allow CSS modifications にチェック

設定より
１．外観を選択
２．下へスクロールし、オリジナルカスタム UI で
　　上に設置した CSS が入っているフォルダを指定する
　　この設定は Allow CSS modifications にチェックしないと出ません

ブラウザを再起動で適用されます。

【目次へ戻る】

タブを閉じたら左右タブへ移動

タブを閉じるとデフォルトでは開いた順になるので
左右のどちらかに移動したい場合は以下です。

１．タブを選択
２．下へスクロールしタブを閉じた後の
　　左 ( 右 ) のタブへ移るを選択

設定ウィンドウの大きさにより２．の設定が右に行ったり
左へ行ったり移動するので
画像のように左の位置にあるとは限らないので注意。

【目次へ戻る】

ダウンロードを自動で表示しない

ファイルをダウンロードすると
ダウンロードのウィンドウが開いてしまうので止めたい場合は以下。

１．ダウンロードを選択
２．ダウンロードを自動的に表示するのチェックを外す

ダウンロード位置を固定したい場合は
ダウンロード先フォルダへフォルダを指定しておき
確認せずに規定のダウンロード先にファイルを保存するにチェック
保存先を選択した場合、規定のダウンロード先を更新するのチェックを外す

ダウンロードが終了した場合、右下に小さいウィンドウ的に
ファイル名が出るので邪魔ならダウンロード完了後に通知するのチェックを外す

戻したい場合は下にある
ダウンロードの設定をデフォルトに戻すを押す。

【目次へ戻る】

ダウンロードバーをツールバーに表示する

ダウンロード画面をツールバー、拡張機能のあるアイコン部分へ設置し
ダウンロード画面を開きやすくします。

１．パネルが消えている場合はここを押すと表示されます
２．パネルから ↓ というダウンロードアイコンを見つけ、覚える
３．アイコンの上で右クリック →　編集
４．ツールバーをカスタマイズを選択

１．のダウンロードを矢印の様にドラッグする
　　更新マークの隣がよい
２．と３．は余白を設定しているので邪魔と感じたらこのアイコンの上で
　　右クリック →　編集 → ツールバーから削除で消せます
　　無理に消す必要はありません
４．必ず完了を押して閉じます

ダウンロードのアイコンが設置されるので
押すと左のようにダウンロード画面が現れもう一度押すと消えます。

【目次へ戻る】

ALTキーでメニューを出さない

外部のアプリやスクリプトで ALTキーを押す場合がある人で
Vivaldi は ALTキーでメニューが出てしまい邪魔なので消せます。

１．キーボードより
２．Alt キーでメニューを開くのチェックを外す

チェックを外した瞬間から ALTキーを押してもメニューが出なくなります。

【目次へ戻る】

ページを翻訳するか尋ねない

自国の言語以外のページを開いた場合に
自動で翻訳しますか？と尋ねられると気が散り
任意のタイミングで自分で翻訳したいの場合は止められます。

１．一般タブを選択
２．下へスクロールし
　　ページを翻訳するか自動で尋ねるのチェックを外す

【目次へ戻る】

タブにマウスカーソルを置くと出るサムネイルを消す

WEBページを開いているタブの上にマウスカーソルを移動すると
サムネイルが表示されますが邪魔と感じられれば消せます。

１．タブを選択
２．下へスクロールしポップアップサムネイルのチェックを外す

上のタブサムネイルは常にサムネイルを表示する設定です

【目次へ戻る】

完全なアドレス／アドレスをエンコードする

URL は長いので一部を省略表示をするのですが
それだと省略された URL／アドレス先が見えないので
セキュリティ上どうなの？全部表示しての設定です。

アドレスをエンコードし
クリップボードへコピーしたいの場合もここで設定します。
あいうという文字を
%E3%81%82%E3%81%84%E3%81%86 へ変換するです。
必要ない人は全く必要ないので出来るよとだけ覚えておけば。

１．アドレスバーを選択
２．完全なアドレスを表示するにチェックする

エンコードを使用したい場合は
アドレスをエンコードしてコピーするにチェック

お好みによりページ読み込み進捗バーを表示するにチェック

【目次へ戻る】

アドレス欄／URL欄から検索する

アドレス欄／URL欄に文字を入力してもアドレスとして認識され
検索できなく鬱陶しいの場合は設定にてアドレス欄でも検索が可能。

１．検索タブを選択
２．アドレス欄から検索を行うにチェックをする

検索サイトを Vivaldi を閉じた状態のサイトで保つなら
下にある最後に選択した検索エンジンを保持するにチェックをする

【目次へ戻る】

検索エンジンの Yahoo を登録する／検索エンジンの指定

検索サイトの Yahoo! が登録されていないので
登録自体は簡単です。

１．検索を選択
２．サイトを追加する場合は＋を押します
　　－は消えますので注意、消えた場合は下の初期状態に戻すにて
３．作成した物が一番下に出るのでマウスで選択
４．検索サイトの名前とニックネーム
　　ニックネームは y としたら検索バーで y あいうと入力で Yahoo! で検索
　　ちなみに g あいうと入力で Google で検索になっている
５．検索サイトのアドレスに %s をつける、 %s が入力した文字となる
　　具体的には以下の URL を貼り付けるだけ

　　https://search.yahoo.co.jp/search?p=%s&ei=UTF-8

６．検索サイトの順番を変更したい場合は移動したいサイトを選択し
　　ここの ▲▼ で移動可能、なのだが
　　マウスのドラッグで移動が可能であった

すぐ上にスクロールすると検索サイトの設定画面なので
ついでに設定しておくとよい。

１．検索を選択
２．デフォルト検索エンジン／プライベートウィンドウの検索エンジンを
　　通常使用する物に切り替えておく

上で Yahoo! を登録したが、あちらは文字の検索なので
画像を検索したいなら以下を登録したりと各自で工夫をする

https://search.yahoo.co.jp/image/search?p=%s&ei=UTF-8

【目次へ戻る】

アドレス欄で自動補完／ドロップダウンメニューを止める

アドレス欄／URL欄などへ入力すると
文字が自動補完されたり履歴が表示されたり ( 履歴候補な類 ) が
邪魔な人は消せます。

１．アドレスバーを選択
２．アドレスの自動補完の不要な類のチェックを外す
３．ドロップダウンメニューの不要な類のチェックを外す

【目次へ戻る】

Vivaldi の左上アイコンを三に

Vivaldi ブラウザは左上にアイコンがボタンとして存在しますが
シンプルな方がいいとの人は三へ変更可能。

１．外観を選択
２．下へスクロールし、メニューアイコンのスタイルを
　　メニューアイコンへ変更

【目次へ戻る】

テーマを新しく作る

Vivaldi は追加の機能なしで外見、テーマを変更できる。
以下、手順。

１．テーマを選択
２．作成の元となるテーマを選択する
　　自分で色指定をするならどれでも良い
３．新しいテーマを選択

１．名称を入力、任意で
２．背景、前景、ハイライト、アクセントを６桁英数字で指定する
　　何この数値？という場合は Google にてカラーピッカーで
　　検索すると画面上部に色取得な機能が出る、HEX値がそう
　　システムカラーを使用したい場合はシステムカラーを参照をチェック
３．カラーオーバーライドは必要がない限りは両方のチェックを外す
４．設定が終わったらライブラリーより戻ります

ちなみに私の色設定で良ければ、置いておきます。

紺色テーマ
背景 #2e2e2e　前景 #a59f9f　ハイライト #697883　アクセント #b7b2b2

灰色テーマ
背景 #969696　前景 #0a0a0a　ハイライト #697883　アクセント #b4b4b4

【目次へ戻る】

テーマを変更しても反映しない場合の設定方法

上でテーマを書き換えても何も変化がないんだけれど？の場合
Windows のテーマがハイコントラストテーマではありませんか？
その場合は改善方法があります。

１．アドレス欄／ URL欄に以下を貼り付けて Enter キー
　　vivaldi://flags/#forced-colors
２．少し上にスクロールして Forced Colors を探す
３．Disabled へ変更する

もし１．で出なかった場合 ( かなり昔にあった )
１．アドレス欄／ URL欄に以下を貼り付けて Enter キー
　　vivaldi://flags/
４．ここに以下を貼り付ける
　　Forced Colors
２．Forced Colors を探す
３．Disabled へ変更する

以下を行うと、Vivaldi ブラウザが再起動しますので
この記事を Vivaldi で観覧しながら設定しているなら
この記事の URL 、以下をどこかへ貼り付けておくと
行方不明にならないです。
https://kimama9.blog.fc2.com/blog-entry-1112.html

１．Forced Colors が Disabled になっているを確認
２．右下に Relaunch と出るので押すと Vivaldi ブラウザが閉じて
　　Vivaldi が再起動して設定が反映される

【目次へ戻る】

テーマを変更したらスタートページが眩しい

上でテーマの表示設定を書き換えこれでやっと！と思ったら
スタートページが眩しいという、改善方法。

スタートページを表示している状態で
１．右上の設定アイコンを押す

背景画像が一番上にあると思うので
１．横スクロールバーを右へスライドさせ
　　黒い背景画像を探す
２．良さそうな背景画像を選択する

【目次へ戻る】

拡張機能のアイコンを並び替えしたい／不要アイコンを消したい

拡張機能の並び替えが出来ない…という
基本的な方法が最初はわからなくて詰みますが方法は簡単。

CTRLを押しながら拡張機能のアイコンをドラッグで
拡張機能の並び替えが可能。
ただ、これで動かない物は動きません。

拡張機能のアイコンを隠す場合は
１．隠したいアイコンを右クリックし、ボタンを隠すを選択

【目次へ戻る】

右クリックメニューを編集

Vivaldi はかゆい所にも手が届く設計なので
各部分の右クリックメニューも変更可能。
機能が多すぎて混乱するのが難点。

１．外観を選択
２．カスタマイズするメニューを選択
　　開いているページな箇所の設定を見ながら行いたい場合は
　　タブで別ページを開いておき
　　そのタブを Vivaldi ブラウザのウィンドウ枠外へ
　　ファイルをドラッグするようにするとウィンドウが分離できます

一例：

見ている WEBページの何もない所でのメニューは
ページ

WEBページ上のリンクを右クリックした場合のメニューは
リンク

３．上で選択した類でここの表示が変化します
　　ページを開いて書き換えたい場所を右クリックし
　　ここと同じ内容のメニューなら
　　編集したいメニューですの確認方法
４．▼をクリックすると項目が出るので
　　３．へドラッグして追加するになります

裏技？としまして３．の不要な部分を選択して
キーボードの DELキーで消せます。
同じくコピーしたい物を選択して CTRL＋Cキーでコピーしてから
CTRL＋Vキーで同じ物が複製可能、区切りなどを増やすのに便利。
項目はドラッグで並び替えが可能です。

間違えて面倒になったら、３．の下にある
デフォルトメニューに戻すで初期化できます。

メニューを変更すると contextmenu.json との
ファイルが作成されます、変更していない場合は作成されない。
ここに変更したメニューが書き込まれているので
バックアップしておけば初期化しても書き戻すだけでＯＫ。

場所は、ポータブルで使用していれば以下にある。
書き戻す場合は Vivaldi を全部閉じてから。
\Vivaldi\User Data\Default\contextmenu.json

【目次へ戻る】

メモ／メモファイル位置

Vivaldi はメモを書き残せるのが地味に便利。

呼び出し方法は
※CTRL＋Shift＋O でも呼び出せます

１．メモアイコンを押す
　　このバー自体がなかったら画像でいう
　　左上の三のすぐ下のアイコンを押して下さい
２．メモを追加する場合は＋を押す
３．ここに新しいメモ、今までの物が存在
　　消したい場合はごみ箱へドラッグする
４．先頭の文字がメモの名前になる
５．写真マークで画像キャプチャを保存という類も可能

メモのデータの保存場所は以下。
ここが文字データ。
※Notes とのファイルで Notes というフォルダではない
\Vivaldi\User Data\Default\Notes

ここが画像データ。
\Vivaldi\User Data\Default\SyncedFiles

【目次へ戻る】

拡張機能を呼び出すボタンの設置

拡張機能画面を呼び出すのがダルいという場合は
コマンドチェイン ( クイックコマンド ) により
拡張機能画面を呼び出すボタンを
パネル、拡張機能アイコン部分へ作成可能。

Vivaldi の設定を呼び出し

１．クイックコマンドを選択
２．＋で新しく作成、－で選択したコマンドを削除
３．上の＋を押して作成された物を選択
４．チェインの名前は任意で拡張機能を開くでよい
　　Commands の入力部分から拡張機能を地道に探すか
　　拡張と入力して拡張機能を選択

チェインのテストで拡張機能画面が開けば成功。
保存などはないので設定画面を閉じます。

次はパネルか拡張機能アイコン部分に今作成した
コマンドチェインなボタンを設置します。

１．左のパネル上で右クリックし編集を選択
　　※パネルがない場合は左上の
　　　Vivaldi アイコンの下にあるボタンを押す
　　　スピードダイヤルという表示の左上の分割アイコンな表示
２．ツールバーをカスタマイズを選択

１．コマンドチェインを選択
２．先ほど追加した名前で ( 拡張機能を開く ) ボタンがある
３．２．を追加したい場所へドラッグして離す
５．必ず完了を押して閉じます

パネルに追加した場合の画像です
１．ボタンを押す
２．拡張機能画面が新しいタブで開きます

【目次へ戻る】

不要な拡張機能アイコンをロックダウン ( プルダウン ) 表示

Vivaldi のウィンドウを画面の半分程度にしていて
拡張機能が多いとアイコンが隠れてしまい
ウィンドウを大きくしないと押せない状態になるので
あまり使用しないアイコンを隠しておき
非表示の拡張機能の表示ボタンでプルダウン形式で展開。

設定画面を開きます。

１．アドレスバーを選択
２．下へスクロールして以下にチェックをする
　　非表示にした拡張機能をドロップダウンで表示する

全ての拡張機能を隠す場合は２．の
全ての拡張機能をトグルするにチェック

アイコンを隠してあれば
１．このアイコンが自動で出るので押す
２．１．を押すとこの様にドロップダウン ( プルダウン ) 表示に

アイコンを隠すはどうやる？は
アイコン上で右クリックしてボタンを隠すを選択。
削除ではありませんのでご注意ください。
隠したアイコンを戻す場合はドロップダウン ( プルダウン ) より
アイコンを選択しボタンを表示するで戻ります。

【目次へ戻る】

拡張機能アイコンを任意の場所へ移動

上でアイコンをドロップダウン ( プルダウン ) しましたが
それでも拡張機能のアイコンが多すぎて押せない
他へ移動したいの場合はこちらです。

以下は CSS で設定するので以下の設定をしている前提です。
自分で用意した CSS を指定する

置いた CSS をメモ帳で開き以下のどれかを貼り付けます。
他の CSS があり一番下へ貼り付けたら動作しなかったので
動かなかったら上の方に貼り付けてください。

以下の CSS は観覧しているページの
右上で横表示、右上で縦表示、左上で縦表示の例です。
中身はほぼ一緒ですが、指定している座標が違います。
ブックマーク／パネルを表示している／していないで
余分な余白は変化しますので調節してください。

-----

以下は右上で横表示の例。
以下の画像のようになります。

/* 拡張機能アイコンを右上で横表示 ここから */

.address-top .toolbar-extensions {position: absolute; top: 68px; left: unset !important; right: 20px !important; box-shadow: 4px 0 var(--colorAccentBg); display: flex; flex-flow: row wrap; max-width: 100%; border-radius: 0 0 0 var(--radius); z-index: 0;}
.address-top #header:not(:hover) ~ #main .UrlBar:not(:focus-within):not(:hover) .toolbar-extensions:not(:focus-within):not(:hover) {visibility: hidden; transition: all 0.5s ease 0s !important;}
.toolbar-extensions:not(:focus-within):not(:hover) {box-shadow: none; opacity: 0.4; background: transparent;}
.toolbar-extensions .ExtensionIcon--Hidden {order:1; background-color: transparent;}
.toolbar-extensions .ExtensionIcon--Hidden:hover {border-radius: 50%; background-color: var(--colorAccentBgDark); transition: border-radius .2s !important;}
.toolbar-extensions > .button-toolbar:not(.ExtensionIcon) {order:99;}
.toolbar-extensions::after {display:none;}

.toolbar-extensions:hover {
box-shadow: none;
opacity: 1; /* ホバー時に完全に透明度を100%にする */
background: transparent;
}

/* 拡張機能アイコンを右上で横表示 ここまで */

-----

以下は右上で縦表示の例。
以下の画像のようになります。

/* 拡張機能アイコンを右上で縦表示 ここから */

.address-top .toolbar-extensions {
  position: absolute;
  top: 102px;
  left: unset !important;
  right: 20px !important;
  box-shadow: 4px 0 var(--colorAccentBg);
  display: flex;
  flex-direction: column; /* 縦表示に変更 */
  max-width: 100%;
  border-radius: 0 0 0 var(--radius);
  z-index: 0;
}

.address-top #header:not(:hover) ~ #main .UrlBar:not(:focus-within):not(:hover) .toolbar-extensions:not(:focus-within):not(:hover) {
  visibility: hidden;
  transition: all 0.5s ease 0s !important;
}

.toolbar-extensions:not(:focus-within):not(:hover) {
  box-shadow: none;
  opacity: 0.4;
  background: transparent;
}

.toolbar-extensions .ExtensionIcon--Hidden {
  background-color: transparent;
}

.toolbar-extensions .ExtensionIcon--Hidden:hover {
  border-radius: 50%;
  background-color: var(--colorAccentBgDark);
  transition: border-radius .2s !important;
}

.toolbar-extensions::after {
  display: none;
}

/* 拡張機能アイコンを右上で縦表示 ここまで */

-----

以下は左上で縦表示の例。
以下の画像のようになります。

/* 拡張機能アイコンを左上で縦表示 ここから */

.address-top .toolbar-extensions {
  position: absolute;
  top: 68px;
  left: 35px !important;
  right: unset !important;
  box-shadow: 4px 0 var(--colorAccentBg);
  display: flex;
  flex-direction: column; /* 縦表示に変更 */
  max-width: 100%;
  border-radius: 0 0 0 var(--radius);
  z-index: 0;
}

.address-top #header:not(:hover) ~ #main .UrlBar:not(:focus-within):not(:hover) .toolbar-extensions:not(:focus-within):not(:hover) {
  visibility: hidden;
  transition: all 0.5s ease 0s !important;
}

.toolbar-extensions:not(:focus-within):not(:hover) {
  box-shadow: none;
  opacity: 0.4;
  background: transparent;
}

.toolbar-extensions .ExtensionIcon--Hidden {
  background-color: transparent;
}

.toolbar-extensions .ExtensionIcon--Hidden:hover {
  border-radius: 50%;
  background-color: var(--colorAccentBgDark);
  transition: border-radius .2s !important;
}

.toolbar-extensions::after {
  display: none;
}

/* 拡張機能アイコンを左上で縦表示 ここまで */

-----

設定と画像の説明：

透明度は以下。
opacity: 0.4;

0.4 で半透明／ 1 で常に表示
0 でマウスカーソルが乗っていない場合は透明
オススメは半透明の 0.4 にて。

画像の ** px はこれだけ余白を設定しているの数値で
拡張機能アイコンを表示する位置になります。
画像と設定で同じ数値があると思うので移動する場合は
そこの数値だけ書き換えてください。

書き換えの確認は CSS を書き換えて、ブラウザを起動するです。
起動していて CSS を書き換えて反映しないは通常。
複数起動している場合は確認していないので全部閉じてください。

-----

１番目の CSS は以下で記載されている物を少し改良させて頂きました。
Thanks!!

How to move hidden extension buttons into another row?
Vivaldi Forum

２番目と３番目の縦 CSS は１番目を以下の AI 、
Bard にて改良箇所を聞きながら調節したものです。

Bard

質問の方法、プロンプトとしましては、この類で出るかと思います。

以下の CSS はボタンの並びが横ですが縦に配置したいです。
どう改良したらいいですか？
実例と説明にてお願いします。

[ ここに一番上の CSS を貼り付ける ]

【目次へ戻る】

コマンドチェインのアイコンを変更

コマンドチェインのアイコンが全部同じなので
変更します、v6 より可能らしいのでそれ以前ではできない？

Vivaldi の設定を開きます。

１．テーマを選択
２．設定するテーマをダブルクリック
　　テーマごとに変更するので設定したテーマ以外は反映されない

１．アイコンボタンがあるので押します

下へスクロールすると現在使用中のテーマボタンがあるので
１．ここから変更したいコマンドチェインを選択
２．この部分をクリックするとアイコンを選択可能
３．元に戻したい場合はカスタム画像を除去を押す

アイコンは自前で用意しなくてはなりませんが
とりあえず Open の O アイコンを用意してみる。
保存ボタンなどはないので設定したらそれで終わり。

１．アイコンが反映されているかの確認
　　今回は目立つように色を灰色にしましたが同じ色で作れば。

【目次へ戻る】

コマンドチェインで使うアイコンを作成

コマンドチェインで使うアイコンは
自前で用意しなくてはならないので面倒という。

仕方がないので適当に BMP 画像を作る
Autoit スクリプトを作ってみました。

Moji_Ico v1.02 ( 2023/11/25 )
簡単にアイコンBMPを作成する Autoit スクリプト
MD5：9ACB27B11BB657F6DD2FEB308541882F

中の Moji_Ico.exe を実行すると以下のウィンドウが出るので

１．見本を押すとデスクトップ左上に原寸大のウィンドウが出て
　　文字が出ます、そのままのアイコンを作成する見本です
２．作成でアイコンを作成します、A ～ Z、a ～ z、0 ～ 9 を作るので
　　数秒時間がかかります
３．作ったアイコンは開くを押すと保存したフォルダが開きます

指定の文字だけ作成したいは
文字を指定に１文字だけ入力して見本で確認。
位置がずれていたら位置 X , Y で調節、X が横、Y が縦移動です。
作成で作成されます。
作成は同じ文字であると全て上書きされますので注意。

４．v1.02 より出力ファイル名を指定できるようになりました。
　231125- と入れれば 231125-***.bmp というファイル名で出力されます。
　後ろに追加は ***-231125.bmp となります。

設定の保存は左下の保存から行えます、読み込みも同様です。

以下は動画です、使用してどう作成されるか？にて。

Moji_Ico.exe / Moji_Ico.au3 v1.00

00:00:00 Moji_Ico.exe を起動します
00:00:16 設定項目があるので、Vivaldi のアイコンなら
　　　　　アイコンサイズは弄らないでください
00:00:23 見本ボタンを押すとデスクトップ左上に出ます
00:00:33 作成ボタンでアイコンを作成
00:00:34 アイコンが作成されている間は何もしないでください
　　　　　長くて数秒です
00:00:41 作成されたアイコンは開くボタンで観覧できます
00:00:44 BMP形式なのでアプリで開いたり編集可能
00:00:52 文字色を変更します
00:00:54 色の設定ダイアログが表示されるので選択
00:01:00 背景色を変更します、同じ作業をする
00:01:00 見本ボタンで変更した色を観覧
　　　　　ボタンが押すのが面倒なら F5キーで見本です
00:01:10 見本が左上に表示されます
00:01:16 作成ボタンで再度作成、ファイルは上書きされます
00:01:35 特定の文字でアイコンを作成できます
　　　　　文字を指定に朝と入力
00:01:43 見本ボタンで確認、位置がずれています
00:01:47 位置の数値を調節します
00:01:50 見本ボタンで確認、ＯＫなら次へ
00:01:54 作成ボタンで作成
00:01:58 朝の文字でアイコンが作成されました
00:02:10 メモボタンを選択するとメモが１つだけ作成されます
00:02:16 設定の保存機能はないのでメモはここに書いておくと便利

Moji_Ico.exe は Autoit スクリプトで作っておりますが
よくわからない人が公開している実行形式など使えるか！は
理解できますので、ソースフォルダに Moji_Ico.au3 があります。

これは実行形式にしなくても動作可能であり
メモ帳を開き中身を読めます、Autoit スクリプトを読めれば
何をしているかはわかるはずです。

ソースのまま Moji_Ico.au3 を動作をさせるには
Autoit のファイル群が必要です。
私の記事でよろしければ以下を。
拡張子 au3 を関連付けすれば動きます。

Autoit3 Windowsの操作を自動化使用方法／日本語化 ( HELPファイル )

【目次へ戻る】

コマンドチェインでページを翻訳

Vivaldi は自動でもページを翻訳できますが
自分でボタンを押したら翻訳したいという場合に
コマンドチェインとして実行する事が可能。

設定を開きます、以下はページ全体の翻訳をするです。

１．クイックコマンドを選択
２．追加する場合は＋を選択
　　消す場合は３．の一覧の消したい部分を選択し－を選択
３．＋を押して作成されたものを選択
４．任意な名前を付ける
５．ページ翻訳とある場所が入力欄なので
　　「翻訳」とだけ入力し、ページ翻訳を選択

保存ボタンはありませんので設定したら終わりです。

以下は選択したテキストのみ翻訳をするです。

１．追加する場合は＋を選択
　　消す場合は２．の一覧の消したい部分を選択し－を選択
２．＋を押して作成されたものを選択
３．任意な名前を付ける
４．選択したテキスト～とある場所が入力欄なので
　　「翻訳」とだけ入力し、選択したテキストを翻訳を選択

コマンドチェインは F2キーで呼び出したり
拡張機能を呼び出すボタンの設置 で設置したりです。

Vivaldi なページを開いて部分翻訳をした場合。

Vivaldi なページを開いてページ全体翻訳をした場合。

ただボタンや F2 で押していると利便性が損なわれるので
ショートカットキーで押す方が自然？なので
コマンドチェインにキーボードショートカットを割り当てる で
呼び出せるようにします。

【目次へ戻る】

コマンドチェインでクリップボードの内容で新しいタブを開く

上の設定はコマンドチェインで翻訳ですが
こちらはコマンドチェイン経由で新しいタブを開いてから
クリップボードに入っている文字で検索したり
リンクへ飛ぶ方法です。

以下のアドレス欄から検索するを設定していないと
検索はできませんのでご注意ください。
アドレス欄／URL欄から検索する

方法は登録内容が違うだけで方法は同じです。
設定画面を開きます、クイックコマンドにて。

１．追加する場合は＋を選択
　　消す場合は２．の一覧の消したい部分を選択し－を選択
２．＋を押して作成されたものを選択
３．任意な名前を付ける
４．新しいタブとある場所が入力欄なので
　　「新しい」とだけ入力し、新しいタブを選択
５．右上の－＋ボタンがあるので＋を押します
　　２個追加するので２回押してください
　　押しすぎたり消したい場合は－で消えます
４．上と同じく「遅延」と入力し、遅延を選択
　　「貼り付け」と入力し貼り付けて移動を選択

順序が大事です。
新しいタブ →　遅延 ( 1000 ) → 貼り付けて移動の順にします。

この設定を実行した場合に
新しいタブを開く → １秒待機 ( 遅延 1000 ) →
アドレスバーに貼り付けて移動をする命令なので
一番上と一番下が入れ替わっていれば
現在のタブでページ移動し、新しいタブが開いて意味はなく
１秒待機を入れ忘れるとタブが開いた直後に
貼り付け作業をしてしまうのでページへ飛びません。

一般で言うドアを開けるのに
鍵を差し込む →　鍵を回す → 鍵を抜く → ドアノブを引っ張るであり
ドアノブを引っ張る → 鍵を抜く → 鍵を回す → 鍵を差し込むを
する人はほぼいないかと存じます。

【目次へ戻る】

コマンドチェインにキーボードショートカットを割り当てる

上で作成しましたコマンドチェインを
キーボードショートカットで呼び出します。

設定画面にて

１．キーボードを選択
２．画面を下へスクロールして ( 最下部です )
　　チェインを選択し展開させます
３．作成したコマンドチェインが格納されているので
　　青枠部分をクリックして登録するキーを押してください
　　取り消したい場合は青枠の右にある × ボタンか
　　消すショートカットキーをマウスで選択してから DELキー

問題は、すでに多くのショートカットキーが割り当てられている事です。
CTRL＋W も使えませんでした、CTRL＋Q の隣がいいのに。

１．使われていると警告が表示され登録できません

その場合は、使っていないキーなら削除可能です。
上で CTRL＋W はタブを閉じるに割り当てられていますと出たので

１．すぐ上にスクロールしてタブを選択し展開
２．タブを閉じるを探して消したいキーを探し選択すると
　　この様に青くなるので、その状態で DELキーを押すと消えます

消えたらコマンドチェインへ戻りまして
キーを登録して終了です、保存するボタンなどはありませんので
設定直後から使えます。

※消す場合は自分が使用しているキーかを
　確認してから消してください。
　後でキーを押しても動かない？という状態になります。
　自分が使わなくても外部のスクリプトで使う類も想定されます。
　もし消すなら消したキーをメモし Vivaldi フォルダへ置いておけば安心。

【目次へ戻る】

コマンドチェインで html を読み込み表示

外部のマウスジェスチャー、MouseGestureL.ahk などで
マウス操作で任意の .html を Vivaldi へ読み込ませ表示させるとの
設定をしている場合にて
複数のユーザーを使用している場合は別々の .html を読み込めない状況は困る。

マウスジェスチャーで同じジェスチャーをしたら
Vivaldi ( ユーザー１ ) は A.html
Vivaldi ( ユーザー２ ) は B.html を読み込まないと困るの場合にて。

コマンドチェインで .html を表示する行動を設定し
それを Vivaldi のショートカットキーへ登録し
そのショートカットキーを MouseGestureL.ahk で押せば
読み込むファイルの変更は出来ます、言葉にすると長くなりますが。
ユーザー１なら A.html、ユーザー２なら B.html との類で設定。
同じユーザーで両方設定してもこの例では意味はありません。

具体的な方法です。

１．設定よりクイックコマンドを選択
２．＋を押して新しいコマンドを作成
３．作成したコマンドを選択
４．任意の名前を入力
５．新しいタブと入力し新しいタブでリンクを開くを選択
　　コマンドパラメータに開くファイルを設定

パソコン内の .html な類を開く場合は D:\231110.html ではなく
file:///d:\231110.html の様になります。

わからない場合は、Vivaldi の本体をアクティブ、最前列にして
( Vivaldi の設定画面をアクティブ、最前列ではありません )

CTRL＋Oキー ( オーです、ゼロではありません ) の同時押しをすると
ファイル選択ダイアログが出ますので選択して
URL 欄に file:/// ～となるのでそれです。

これが終了したら
コマンドチェインにキーボードショートカットを割り当てる にて
上のコマンドにショートカットを割り当て呼び出せるようにし

場合によりそのショートカットキーを
マウスジェスチャーなどで呼び出せるようにします。

【目次へ戻る】

X ( 旧：Twitter ) シャドウバン確認検索／日本語のみで検索

検索エンジンの Yahoo を登録する／検索エンジンの指定 の
応用で X ( 旧：Twitter ) にての検索を少々便利に。

以下ではこの２つを設定する方法です。
シャドウバン検索 ( from:ここにユーザー名 )
特定言語のみ検索 ( lang:ja )

設定画面にて

１．検索を選択
２．サイトを追加する場合は＋を押します
　　－は消えますので注意、消えた場合は下の初期状態に戻すにて
３．作成した物が一番下に出るのでマウスで選択
４．検索サイトの名前とニックネーム、任意の名前で
５．URL はシャドウバン検索／特定言語のみ検索で違います
　　どちらか１つをコピペします
　　https の前のスペース ( 空白 ) は含めませんので注意

　　シャドウバン検索 ( from: *** ) なら
　　https://twitter.com/search?q=%20from%3A%s&src=typed_query

　　特定言語のみ検索 ( lang:ja ) なら
　　https://twitter.com/search?q=lang%3Aja%20%s&src=typed_query&f=top

※特定言語のみ検索の方は、検索の先頭に lang:ja が入るようになっています。
　他者様のページでは検索文字の後方に挿入ですが
　テストしてみて前方でも支障がないので前方に入れてあります。
　後方に入れたいの場合は、以下で可能です。
　書き込んだ文字は %s 、半角スペースは %20 で位置を調節するだけ
　https://twitter.com/search?q=%s%20lang%3Aja&src=typed_query&f=top

保存ボタンはありませんので設定したら終わりです。
使い方としましては

１．検索アイコンを選択
２．今作成した設定を選択

後は通常通り１．の右の入力欄に文字を入れて検索します。
シャドウバン検索 ( from: *** ) の場合は検索したいユーザーを入れます。
私のアカウントであれば
@kimama_91 もしくは kimama_91 でＯＫ。

【目次へ戻る】

ブックマークを表示する

ブックマークを多用する人は常に表示が可能です。
設定より

１．ブックマークを選択
２．ブックマークバー → ブックマークバーを表示するを選択
　　任意で赤枠の部分を変更

【目次へ戻る】

開いている記事のタイトルとURLをクリップボードへ

開いているタブのページを
ワンクリックで取得したいとの場合がありますが可能です。
javascript をブックマークに登録して呼び出すが一番簡単。

以下を参考に改良いたしました、Thanks!!
Copy Page Title | Vivaldi Forum

ここに貼り付けると記号が変わったりして面倒なので
テキストとして書いておきますのでダウンロードし
中の文字列を使用します。

Vivaldi_javascript_bookmark_v100.txt
MD5：053274CA7352CE1FEDC819B66EBE2510

最初に以下でブックマークを出しておくと便利です。
出さなくても良いですが頻繁に使うならの意味合い。
ブックマークを表示する

-----

注意としてフォルダに入っている物は
バグなのかはわかりませんが書き換えても保存されないので
１．でいうブックマークバー上に作り追加したり編集します。
画像でいう Bookmarks のフォルダの中は駄目の意味合い。
作ったら移動しても大丈夫です。

ブックマークが多すぎて＞＞の様に隠れている場所でも駄目です。
この場合はマウスで左に移動して編集して元へ戻すなど。

-----

１．ブックマークのバー上で何もない箇所を右クリックし
２．新しいブックマークを選択

１．任意の名前
２．上のダウンロードしたテキストファイルで
　　好きな物を貼り付ける
　　複数行になっていますがそのまま貼り付けて平気です
　　１行に直すなどの修正は不要、改行があり空いていても大丈夫
　　丸ごとコピペしてＯＫの表現です
　　大抵は javascript:(function(){ から
　　})(); までを貼り付けます。
　　説明や区切りの ----- などは含めないでください。
３．保存で保存されます
　　上に書きましたがフォルダの中に入っているブックマークは
　　バグなのかは不明ですが何度やっても保存できないので注意

使い方。
任意のページを開いてください。

１．先ほど作ったブックマークを選択します
２．コピーしました！と出たら
　　クリップボードへコピーされています

「 SNS などでタイトルと URL を貼り付ける場合
　タイトル名 → 改行 → URL で出力」をセットした場合は
以下になっているはずです、メモ帳などへ貼り付けて使用など。

2023/09 Vivaldi v6.2 で設定した事のまとめ／余分な機能の停止など | 気ままの簡易レビュー
https://kimama9.blog.fc2.com/blog-entry-1112.html

【目次へ戻る】

Vivaldi アップデートで検索サイトが Bing に

Vivaldi v6.2.3105.48 → v6.4.3160.44 にアップデートしたら
検索サイトが Bing に戻ってしまったので
使用している検索サイトへ戻す方法です。

この記事でいう Yahoo に設定していて Bing へ戻ったです。
検索エンジンの Yahoo を登録する／検索エンジンの指定

設定より

１．検索を選択
２．最後に選択した検索エンジンを保持するにチェック

Vivaldi ブラウザの本体にて

１．虫眼鏡の部分を選択
２．使用したい検索エンジンを選択
　　その後、１．の右の入力欄にて何でもいいので検索をし
　　指定した検索サイトで検索をすれば以降は Bing から変更されます

【目次へ戻る】

パスワードを簡単に編集／追加／エクスポート

Vivaldi に登録したパスワードは
パスワードマネージャーという画面で簡単に編集できます。

URL 欄に以下を貼り付けて Enter キー。
vivaldi://password-manager/passwords

後は画面の表示に従い、色々可能です。
画面はパスワードな類が表示されていますので割愛。

コマンドチェインへ登録も出来ますので
設定しておけば画面がすぐ呼び出せます。

１．クイックコマンドを選択
２．追加をするので＋を押します
３．新しく作成された物を選択
４．任意の名前、ここではパスワードマネージャー
５．タブでと入力し、新しいタブでリンクを開くを選択
　　コマンドパラメータに以下を入力
　　vivaldi://password-manager/passwords

保存などはないので設定したら終わりです。
チェインのテストを押すことで
パスワードマネージャーが別タブで開きテストが可能。

注意として、パスワードをエクスポート ( 出力 ) したファイルは
パスワードが丸見え状態なので管理を厳重にすること。

【目次へ戻る】

上からツールバー、ブックマークバー、タブの順にする

自分で用意した CSS を指定する でのカスタムCSS にて
ブラウザの外見を上から
ツールバー、ブックマークバー、タブの順にする事も可能な模様。
この様な外見になります、Vivaldi v6.4.3160.44 - 64bit にて確認。

有志の方が CSS を公開しているので
カスタムCSS のファイルに書き込むだけ。

Tabs Below Address Bar and Bookmark Bar
Vivaldi Forum

サイトの太字になっている CSS より下、 UPDATES より上の間にある
文字列をカスタムCSS へコピペし Vivaldi を再起動するだけの簡単仕様。
気をつけることは、バージョンにより動かなくなる場合があるを
理解しておくことです。

あとは色の指定により背景色と文字色が近くなり見づらいので
要調節ぐらいでしょうか。

テーマを新しく作る にての
紺色テーマを使用している場合は、文字が見にくくなるので
以下のように、紺色はどうしても
文字が真っ白 or 真っ黒になるので灰色で設定など。

灰色テーマ2
背景 #646464　前景 #00001　ハイライト #697883　アクセント #aaaaaa

【目次へ戻る】

コマンドチェインで２つのリンクを開き２画面に

コマンドチェインで特定のサイトを２つ開き左右２画面にする事も可能。
以下は v6.2.3105.48 では一部の設定がないので
v6.4.3160.44 以降で設定してください。

設定にて

１．クイックコマンドを選択
２．追加するので＋を選択
３．作成されたものを選択
４．任意の名前を入力
５．現在のタブでリンクを開く場合は
　　現在のと入力し、現在のタブでリンクを開くを選択
　　新しいタブを開く場合は
　　新しいタブと入力し、新しいタブでリンクを開くを選択
　　開く URL を入力します
　　例：https://chat.openai.com/
６．設定を追加するので右上の＋を押します
　　－のボタンが接近しているので押し間違えないように
７．新しいタブと入力し、新しいタブでリンクを開くを選択
　　開く URL を入力します
　　例：https://bard.google.com/chat?hl=ja
８．遅延と入力し 1000 とします、一時待機の時間です
９．直前と入力し直前のタブを選択を選択
10．遅延と入力し 500 とします、一時待機の時間です
11．タイルと入力して縦にタイルを選択
　　横の２画面にしたい場合は横にタイルを選択

設定したら以下で今作成したコマンドチェインを
ここを参考にパネル／拡張機能アイコン部分へ登録して呼び出します。
拡張機能を呼び出すボタンの設置

１．今作成したコマンドチェインを選択
　　呼び出されて２画面になります

【目次へ戻る】

タブをタイル表示する ( 手動で２画面に )

タブを２画面にするは手動でも可能です。
２画面にしたい URL を２つ開いてください。

１．Shiftキー、もしくは CTRLキーを押しながら
　　２つのタブを選択、選択したらキーは離してよい
　　画面のように白枠点線になるので目安に

１．白枠点線になっているタブの上で右クリック
２．２個のタブをタイル表示するを選択

２画面になるはずです、元へ戻す場合は。

１．２画面のタブの上で右クリック
２．このタブをタイル表示から取り除くを選択

【目次へ戻る】

ワークスペースでタブを切り替える

Vivaldi にはワークスペースというタブをグループの様にし
切り替える機能もあります。

Ａのワークスペースは仕事用のタブ
Ｂには普通の調べ物などタブを別々に出来るので
タブを多く開いていて？？となる人への機能。

１．デフォルトでは ( 設定で消していない限りは )
　　左上にあるワークスペースを選択
２．新しいワークスペースを選択

１．現在のタブを全部別ワークスペースへ送るなら
　　下の *個のタブを含む新しいワークスペースを選択
　　それ以外は新しいワークスペースを選択

１．名前を任意に書き換え、面倒ならそのままでもよし
２．作成を選択

１．作成した分だけ選択箇所が増えるので選択すれば
　　タブのグループが切り替わります

通常の場合ではあまり役に立ちませんが
私のようにブログを書いていて情報を検索したいや
息抜きに X やタイッツーを観覧したいでも
切り替えればスッキリしているので
違うサイトへ誤爆の可能性も低くなり安心。

【目次へ戻る】

設定済みのデータでユーザーを複製する

ブラウザでユーザーを切り替え別の人が使うとの話もありますが
如何せん設定が面倒、１つ設定しそれを複製できれば楽なのに。
可能です。

以下はポータブルな設定なので通常でインストールした場合は
不明なのでバックアップなどをしてから行って下さい。
責任はとれません。
なお、パスワードやクッキーな類が維持されるかの類も
試していないので引き継げるのか削除されるのかも不明です。

方法は簡単です。

１．\Vivaldi\User Data を開き
２．Default フォルダを複製し複製したフォルダを
　　Default2 の名前にします、名前は任意ですが
　　英数字のみで、半角スペースはない方がトラブルは回避可能

１．\Vivaldi\Application フォルダにて
　　vivaldi.exe というファイルがあるので右クリックして
　　ショートカットを作成、作成位置はどこへでも

１．作成したショートカットを右クリックし
　　プロパティを選択

１．ショートカットタブを選択します
２．リンク先の箇所の～\vivaldi.exe とある後ろに
　　--profile-directory="Default2" と追加する
　　vivaldi.exe と --profile-directory="Default2" の間には
　　必ず半角スペースが必要、ないと起動エラー
３．ＯＫで閉じます、キャンセルは駄目

これは先ほど複製したフォルダの名前を読み込んで起動するよの意味。
フォルダが Test なら --profile-directory="Test" とする。

同じショートカットを作り以下とする。
これでユーザー１とユーザー２のリンクのできあがり。
--profile-directory="Default"

両方起動するとこの様に。
複製したのでテーマ、外見が同じになり判別が難しいので
テーマを新しく作る にてどちらかの色を変えておくがオススメ。

ユーザー名を複製して作った為、Vivaldi.exe を起動すると
( ショートカットからではなく～\Vivaldi\Application\vivaldi.exe を直接起動 )
ユーザー選択画面で同じ名前が並ぶので修正します。

１．修正したいユーザーの右上に … があるので選択

１．編集を選択

１．Vivaldi プロファイルの名前を設定で任意の名前に
　　任意で下のテーマカラーを選択しておくのもいいかと

-----

おまけ
Vivaldi.exe の後ろに付加して色々

プライベートウィンドウで起動
--incognito

キャッシュ位置を指定して起動 ( R:\Vivaldi に指定する )
複数のユーザーの場合は同じ位置にキャッシュ指定しない方がいい
-disk-cache-dir="R:\Vivaldi"

この様に全部繋げて使用してもＯＫ
vivaldi.exe --profile-directory="Default2" --incognito -disk-cache-dir="R:\Vivaldi"

-----

とまあ、こんな感じで Vivaldi 乗り換え記念？の
記事でした、今までの記事をまとめた内容になりましたが
2023/09 時点で Vivaldi.6.2.3105.45.x64 で
全て動作を確認したものにて。

はい、疲れた ( ここまで観覧して頂きました観覧者様も同じ )
それでは皆様の Vivaldi が快適に使えますようにと
お祈りいたしまして、これにて終了です。

以上。