【Bitwardenパスワード生成ツール】邪魔な要素を非表示にするCSS

2025年6月9日Webサービス

この記事では、「Bitwardenビットウォーデン」が提供している「パスワード生成ツール」サイト上の不要な項目を非表示にするCSSを書きます。

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebotスタイルボット」や「Stylusスタイラス」を利用します。

「Bitwarden」が提供している強力なパスワードジェネレーター「パスワード生成ツール」はデフォルトだと、余計な要素がたっっっっくさんあります。

上部のヘッダー、メニュー、バナー画像、有料版への案内ポップアップ…などなどです。

PCブラウザ版「Bitwardenパスワード生成ツール」上部にある余計な要素画像

【Bitwarden】信頼性ある無料のパスワード生成ツール

この記事では、パスワードマネージャーとして有名な「Bitwarden」が提供している無料の「パスワード生 ...

https://www.naporitansushi.com/bitwarden-password-generator/

これらのせいで、肝心かんじんのパスワード生成画面を表示させるにはページを下にスクロールする必要があります。手間です。

CSSを使うことで邪魔な要素をまとめて非表示にできます。パスワード作成画面のみ表示できます。自身の環境上で他人には影響しません。いつでも元に戻せます。

本記事はChrome拡張機能・Firefoxアドオンを利用できるPCブラウザ限定です。

拡張機能を利用できるブラウザアプリ（例：Kiwi Browserは2025年1月で開発終了なのでMicrosoft Edge CanaryやFirefox）などをインストールしてCSSを書き込み、ブラウザ版から利用する場合はもしかしたら使えるかもしれません。

1. 前提
2. 「Bitwardenパスワード生成ツール」の不要な部分を消すCSS
3. 感想

前提

「Stylebot」などのCSSを適用できる拡張機能を既に導入している前提です。

【Stylebot】サイトにCSSを適用できる拡張機能の使い方

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」について書き ...

https://www.naporitansushi.com/stylebot/

「Bitwardenパスワード生成ツール」の不要な部分を消すCSS

スタイルシートを開く

「Bitwarden」にアクセスします。インストールした「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。

右側に白紙のサイドバーが表示されます。

もし初めて「Stylebot」を起動した場合は「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると白紙のスタイルシート画面を開けます。

CSSを書き込む

以下のコードを書き込みます。

CSS

/*【Bitwardenパスワード生成ツール】ヘッダー*/
div:has(+header) {
    display: none !important;
}

/*【Bitwardenパスワード生成ツール】ヘッダーメニュー*/
[data-testid="bw-desktop-header"] {
    display: none !important;
}

/*【Bitwardenパスワード生成ツール】ヘッダー画像*/
section#password-generator-hero {
    display: none !important;
}

/*【Bitwardenパスワード生成ツール】あなたのビジネスとともにスケールする信頼性のあるパスワード管理*/
section#gm-5-star-user-ratings-validation {
    display: none !important;
}

/*【Bitwardenパスワード生成ツール】宣伝バナー画像*/
section:has(a[href="/ja-jp/pick-your-plan/"]) {
    display: none !important;
}

/*【Bitwardenパスワード生成ツール】信頼できるパスワードマネージャーを利用しましょう*/
section#getting-started-with-bitwarden-in-three-easy-steps {
    display: none !important;
}

/*【Bitwardenパスワード生成ツール】フッター*/
footer {
    display: none !important;
}

/*【Bitwardenパスワード生成ツール】強力なパスワードを生成する原則*/
section#generator-features {
    display: none !important;
}