Google Bardで表示されるアイコンを変更する方法
Google Bard アカウント,Google Bard
![Google Bardで表示されるアイコンを変更する方法](https://1-notes.com/wp-content/uploads/2023/04/Google-Bard.png)
Googleの文章生成AI「Bard」で表示されるユーザーアイコンを変更する方法を紹介しています。
Googleアカウントからアイコンを変更する
Google Bardで表示されるユーザーアイコンはGoogleアカウントで設定しているユーザーアイコンが適用されています。
Googleアカウントで設定しているユーザーアイコンを変更するにはGoogle Bardを含むGoogleアプリケーション上の右上にあるユーザーアイコンから「Googleアカウントを管理」を選択します。
「Googleアカウントを管理」に移動したら上部に表示されているユーザーアイコンをタップまたはクリックします。
![ユーザーアイコンをタップまたはクリック](https://1-notes.com/wp-content/uploads/2023/05/ユーザーアイコンをタップまたはクリック.png)
![ユーザーアイコンをタップまたはクリック](https://1-notes.com/wp-content/uploads/2023/05/ユーザーアイコンをタップまたはクリック.png)
![プロフィール画像を追加する](https://1-notes.com/wp-content/uploads/2023/05/プロフィール画像を追加する.png)
![プロフィール画像を追加する](https://1-notes.com/wp-content/uploads/2023/05/プロフィール画像を追加する.png)
プロフィール写真を追加を選択すると、予め用意されたイラストから選択する「イラスト」「Googleフォト」、デバイス内の画像から選択する「パソコン内(PCの場合)」から画像を選択して決定します。
![プロフィール画像を追加する2](https://1-notes.com/wp-content/uploads/2023/05/プロフィール画像を追加する2.png)
![プロフィール画像を追加する2](https://1-notes.com/wp-content/uploads/2023/05/プロフィール画像を追加する2.png)
Googleアカウントのプロフィールアイコンはキャッシュを理由に、各アプリケーションで反映が遅れる事がありますが、Google Bardはスグに反映されました。
業務上など何らかのGoogleアカウントのプロフィールアイコンを変更せずに、Google Bardのアイコンのみを変更したい場合は以下の方法が考えられます。
- Google Bard専用にサブアカウントを作成する
- CSSやJavaScriptで上書きする
CSSでアイコンを変更する
結果的にJavaScriptの場合でも、リアルタイムで追加される要素を監視する処理を必要とするため、CSSでアイコンを上書きする方法が簡単だと思います。
ユーザーアイコンは「user-profile-picture」要素のクラス名「.user-icon」が付与されているimgタグにて表示されています。
「user-profile-picture」に「:after」要素を追加して要素の上から背景画像を上書きしています。
透過だったりはみ出る事を考慮して、元のアイコン画像は「opacity: 0」で透過しています。
とりあえずで書いただけですので改善点はあると思いますが、機能すると思います。
CSSでの上書きには拡張機能「User JavaScript and CSS」を利用しています。
User JavaScript and CSS – Chrome ウェブストア
![CSSでGoogle Bardのアイコンを上書きした結果](https://1-notes.com/wp-content/uploads/2023/05/CSSでGoogle-Bardのアイコンを上書きした結果.png)
![CSSでGoogle Bardのアイコンを上書きした結果](https://1-notes.com/wp-content/uploads/2023/05/CSSでGoogle-Bardのアイコンを上書きした結果.png)
user-profile-picture {
/* 子要素の "absolute" 位置設定をこの要素に対して行う */
position: relative;
}
user-profile-picture:after {
content: '';
background: url('アイコン画像のURL') no-repeat center center;
/* 背景画像を要素の全体に広げ、画像が要素を完全に覆うようにする */
background-size: cover;
position: absolute;
top: -15px;
/* は要素の幅と高さをそれぞれ32ピクセルに設定。 */
width: 32px;
height: 32px;
}
.user-icon {
/* 要素を完全に透明にします。レイアウト上の位置はそのまま保持 */
opacity: 0;
}
Google Bard アカウント,Google Bard
Posted by Yousuke.U
関連記事
![Thumbnail of related posts 106](https://1-notes.com/wp-content/uploads/2023/04/Google-Bard-100x100.png)
![Thumbnail of related posts 106](https://1-notes.com/wp-content/uploads/2023/04/Google-Bard-100x100.png)
Google BardはURLから内容を取得可能、実際にURLを送って検証してみた
Google BardはAIにURLを伝える事で、そのページの情報を取得可能とな ...
![Thumbnail of related posts 144](https://1-notes.com/wp-content/uploads/2023/04/Google-Bard-100x100.png)
![Thumbnail of related posts 144](https://1-notes.com/wp-content/uploads/2023/04/Google-Bard-100x100.png)
Google Bardのログインとは、Googleアカウントの作成方法
文章生成AI「Bard」はGoogleが提供するAIチャットツールですが、ログイ ...
![Thumbnail of related posts 098](https://1-notes.com/wp-content/uploads/2023/04/Google-Bard-100x100.png)
![Thumbnail of related posts 098](https://1-notes.com/wp-content/uploads/2023/04/Google-Bard-100x100.png)
Google Bardのアカウント停止処分について
Googleの文章生成AI「Bard」で利用規約に違反したユーザーに対してアカウ ...
![Thumbnail of related posts 157](https://1-notes.com/wp-content/uploads/2023/04/Google-Bard-100x100.png)
![Thumbnail of related posts 157](https://1-notes.com/wp-content/uploads/2023/04/Google-Bard-100x100.png)
Google Bardが長文指定時に、一度に返す事が可能な文字数上限について
Googleの文章生成AI「Bard」が一度に返す事が可能な文字数について調べて ...
![Thumbnail of related posts 139](https://1-notes.com/wp-content/uploads/2023/04/Google-Bard-100x100.png)
![Thumbnail of related posts 139](https://1-notes.com/wp-content/uploads/2023/04/Google-Bard-100x100.png)
Google Bardは会話履歴を残せない、アクティビティ履歴には注意
GoogleのAI「Bard」は会話の履歴を残す機能は現状実装されていません。 ...
![Thumbnail of related posts 148](https://1-notes.com/wp-content/uploads/2023/02/ai-and-web-information-match-pump-150x150.png)
![Thumbnail of related posts 148](https://1-notes.com/wp-content/uploads/2023/02/ai-and-web-information-match-pump-150x150.png)
Bard?Bingは良いけどGoolgle、お前はダメだ。時代はAIとWEBの情報マッチポンプへ
Google検索にAIチャット「Bard」が限定公開中です。 Microsoft ...
![Thumbnail of related posts 124](https://1-notes.com/wp-content/uploads/2023/04/Google-Bard-100x100.png)
![Thumbnail of related posts 124](https://1-notes.com/wp-content/uploads/2023/04/Google-Bard-100x100.png)
Google Bardで位置情報の設定、効果やリスクなど
Googleの文章生成AI「Bard」で位置情報の設定についてのアナウンスがあり ...
![Thumbnail of related posts 008](https://1-notes.com/wp-content/uploads/2023/02/lambda-api-will-be-available-soon-150x150.png)
![Thumbnail of related posts 008](https://1-notes.com/wp-content/uploads/2023/02/lambda-api-will-be-available-soon-150x150.png)
LaMDAのAPIも提供開始予定、ChatGPTとBardでAI同士の会話が作れるっ!?
GoogleがGoogle検索への搭載を公開したAIチャット Bard、その基盤 ...
![Thumbnail of related posts 133](https://1-notes.com/wp-content/uploads/2023/04/Google-Bard-100x100.png)
![Thumbnail of related posts 133](https://1-notes.com/wp-content/uploads/2023/04/Google-Bard-100x100.png)
Google Bardは危険な食材のレシピに対応できるのか
Googleの文章生成AI「Bard」にて料理のレシピについて調べる時、危険な食 ...
![Thumbnail of related posts 108](https://1-notes.com/wp-content/uploads/2023/04/Google-Bard-100x100.png)
![Thumbnail of related posts 108](https://1-notes.com/wp-content/uploads/2023/04/Google-Bard-100x100.png)
Google BardでCSSを最適化する
Googleの文章生成AI「Bard」の便利な使い道、面白い使い道として既存のC ...
![Thumbnail of related posts 060](https://1-notes.com/wp-content/uploads/2023/04/Google-Bard-100x100.png)
![Thumbnail of related posts 060](https://1-notes.com/wp-content/uploads/2023/04/Google-Bard-100x100.png)
Google Bardのアカウントを削除する方法
Googleの文章生成AI「Bard」で作成したアカウントを削除する手順を紹介し ...
![Thumbnail of related posts 116](https://1-notes.com/wp-content/uploads/2023/04/Google-Bard-100x100.png)
![Thumbnail of related posts 116](https://1-notes.com/wp-content/uploads/2023/04/Google-Bard-100x100.png)
Google BardのAPIが提供予定?Bardに聞いてみた
Googleが公開した言語型AI「Bard」はChatGPTや他のAI同様にAP ...
![Thumbnail of related posts 079](https://1-notes.com/wp-content/uploads/2023/04/Google-Bard-100x100.png)
![Thumbnail of related posts 079](https://1-notes.com/wp-content/uploads/2023/04/Google-Bard-100x100.png)
Google Bardの年齢制限は何故18歳に設定されているのか
Googleの文章生成AI「Bard」は何故年齢制限を18 歳以上のユーザーとし ...
![Thumbnail of related posts 168](https://1-notes.com/wp-content/uploads/2023/04/Google-Bard-100x100.png)
![Thumbnail of related posts 168](https://1-notes.com/wp-content/uploads/2023/04/Google-Bard-100x100.png)
Google Bardの画像検索を試してみました
2023年5月23日のアップデートにて、Googleの文章生成AI「Bard」で ...
![Thumbnail of related posts 062](https://1-notes.com/wp-content/uploads/2023/04/Google-Bard-100x100.png)
![Thumbnail of related posts 062](https://1-notes.com/wp-content/uploads/2023/04/Google-Bard-100x100.png)
Google Bardの有料プランは実装予定か
Googleの文章生成AI「Bard」が日本語に対応し、利用していると用途によっ ...
ディスカッション
コメント一覧
まだ、コメントがありません