【ConoHa】管理画面右上にあるメールアドレスを非表示にするCSS
この記事では、PCウェブサイト版「ConoHa WING（コノハ・ウィング）」のログインページ右上にあるアカウント名（メールアドレス）を非表示にするCSSを書きます。
ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボット）」を利用します。
僕は、ブログを公開するためにレンタルサーバー「ConoHa WING（コノハ・ウィング）」を利用しています。本サービスのコントロールパネルの右上には、現在ログインしているアカウント名（メールアドレス）が表示されています。
たまになんですが、この管理画面上の画像（スクリーンショット）を、ブログで利用したい時があります。そのたびに、ぼかしやモザイクをかけるのが、めんどくさくなりました。
CSSを使うことで、最初からなかったかのように消せます。自身の環境上で、他人には影響しません。いつでも元に戻せます。本記事は、Chrome拡張機能・Firefoxアドオンを利用できるPCブラウザ限定です。スマホではできません。
同じく「Amazon
」でログインしている場合に表示される、ヘッダーの個人情報（郵便番号、ユーザー名）を非表示にする記事も書いています。
https://www.naporitansushi.com/am-privacy-hide/インストール方法
Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。
https://chrome.google.com/webstore/detail/stylebot/oiaejidbm...「Chromeに追加」をクリックしてインストールします。
右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
「ConoHa」の管理画面右上にあるアカウント名を隠すCSS
「ConoHa WING」のコントロールパネルにアクセスします。メールアドレスとパスワードを入力してログインします。ログインできたら、インストールした「Stylebot」拡張機能アイコンをクリック→「Stylebotを開く」をクリックします。
右側に白紙のサイドバーが表示されます。もし初めてStylebotを起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると、白紙のスタイルシート画面を開けます。こちらに以下のコードを書き込みます。
/*右上のアカウント名（メールアドレス）非表示*/
li span#email_header {
visibility: collapse !important;
}「visibility: collapse」が非表示にするという意味です。「display: none !important;」でもいいと思います。僕の好みです。
本記事のCSSは、僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、サイト側の仕様変更でいつの間にか使えなくなる可能性もあります。
もし書き込んでも反映されない場合、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で、修正したいと思います。
下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。
再度拡張機能ボタンを押して、登録したサイト（例：manage.conoha.jp）がオンになっていることを確認します。オンになっている間は有効になっているということです。
右上のアカウント名が非表示になります。人のアイコンだけになります。
アカウント名（メールアドレス）部分を隠している形なので、クリック範囲は変わりません。クリックすると、これまで通りアカウント設定などのポップアップが開かれます。
一時的に無効化したい場合は、Stylebot→「manage.conoha.jp」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。
感想
以上、PCウェブサイト版「ConoHa WING（コノハ・ウィング）」のログインページ右上にあるアカウント名（メールアドレス）を非表示にするCSSでした。
他にも、ウェブサイトをダークモードにするChrome拡張機能「Dark Reader（ダーク・リーダー）」を使っている時に見にくくなる未読お知らせの背景色を変える記事も書いています。
