今回はPC版GoogleChromeホーム画面の『カスタマイズ』ボタンから背景や色、ショートカットを設定する方法を紹介/解説しています。
●WebブラウザはChromeを使っているけど、カスタマイズボタンって何が出来るの!?
●Chromeの背景の設定方法を知りたい。
●Chromeホーム画面のショートカットの設定を知りたい。
GoogleChromeを使用している方で、ホーム画面右下の[カスタマイズ]というボタンが気になった方も多いと思います。
ただ、「気にはなっても特に設定していない」という方が大半のようです。
本記事では、[カスタマイズ]ボタンから設定することが出来る内容と、その設定方法や手順、サンプルなどを画像で分かりやすくお伝えしています。
●背景
ホーム画面に背景画像を設定できる。
●色とテーマ
Chromeの画面全体の色を設定できる。
●ショートカットボタン
ホーム画面にWebサイトのリンク(ショートカット)を最大10個まで設定できる。
スマホでは、Google検索ページをChromeのホーム画面にしていても[カスタマイズ]ボタンは表示されません。
PC版Chromeのみの機能ですのでご了承ください。
なお当ブログでは、Androidスマホの表示関連やChromeに関する記事も執筆しています。
ご興味がありましたら、下記も読んでみてください。
~Androidスマホの記事をピックアップ~
⇒⇒⇒[Android] Google検索バーの表示(色や形)を変更する方法
⇒⇒⇒Androidスマホでダークテーマを設定する方法・画面の明るさを調整する方法
⇒⇒⇒[Android] 開きすぎたサイトを一括整理!Chromeでタブのグループ化を活用しよう!
それでは、各設定について詳しく解説していきます。
スポンサーリンク
■GoogleChromeで『カスタマイズボタン』を表示する
GoogleChromeのホーム画面にカスタマイズボタンを表示するためには、以下の条件を満たしている必要があります。
◆指定の検索エンジンでGoogleを選択していること
GoogleChromeでは、ホーム画面の検索エンジンを指定することが出来ます。
つまり、ブラウザはChromeでも、検索エンジンにYahooやBingを指定することも出来るということです。
ただし、Chromeでホーム画面に[カスタマイズ]ボタンを表示するためには、検索エンジンが必ずGoogleになっている必要があります。
その確認方法と設定方法を説明いたします。
まず、GoogleChromeを起動して、Googleにログインして下さい。
《画像1》
①・・・ホーム画面が表示されたら、右上の[設定アイコン]をクリックします。
設定関連のリストメニューが表示されます。
《画像2》
②・・・リストメニューの中から、[設定(S)]をクリック。
Chromeの設定ページが表示されます。
《画像3》
設定ページの少し下の方までスクロールして、[検索エンジン]の項目を表示しましょう。
③・・・[アドレスバーで使用する検索エンジン]で、[Google]を選択。 ⇒ 新しいタブを開く。
以降はChromeを起動すると、ホーム画面にGoogleの検索エンジンが表示されます。
◆GoogleChromeのバージョンが78以降であること
カスタマイズボタンはGoogleChromeのバージョン78から搭載された機能です。
78より古いバージョンのChromeを使われている場合、カスタマイズボタンは表示されません。
Chromeを最新版にアップデートしましょう。
Chromeのバージョンの確認方法と、アップデート方法。
《画像4》
①・・・Chromeの設定ページにて、左上のボタンをクリック。
サイドメニューが表示されます。
《画像5》
②・・・サイドメニューより、[Chromeについて]をクリック。
《画像6》
③・・・Chromeが最新版であれば、《画像6》のように[GoogleChromeは最新版]と表示されます。
[GoogleChromeは最新版]と表示されていれば、問題なし。次の項目へ進みましょう。
Chromeのバージョンが最新版で無い場合は、《画像6》のページを開くと、自動でアップデートの確認⇒アップデートが開始 されます。
アップデート後は[再起動]ボタンが表示されますので、クリックしてChromeを再起動しましょう。
■GoogleChromeホーム画面:カスタマイズボタンから[背景]を設定する
それでは、GoogleChromeホーム画面のカスタマイズボタンから、ホーム画面の背景を設定していきます。
◆背景の設定手順
《画像7》
Chromeを起動します。(Google検索のホーム画面が表示される。)
①・・・ホーム画面右下の[カスタマイズ]ボタンをクリック。
カスタマイズ画面が表示されます。
《画像8》
②・・・サイドメニューより[背景]を選択。(カスタマイズ画面を開くと、すでに選択されている状態です。)
③・・・[風景]のカテゴリをクリック。
※背景のカテゴリは、まれに新しいカテゴリが追加されることもあります。その場合、《画像8》の[風景]カテゴリの位置が変わっていることがあるので、ご了承ください。
《画像9》
風景カテゴリの画像が表示されます。
④・・・今回は、左から2番目『トンネル状の岩の画像』をクリックして選択。
《画像10》
⑤・・・画像が選択状態になったら、右下の[完了]をクリック。
《画像11》
⑥・・・⑤で選択した背景画像がホーム画面に設定されました。
以上。
ホーム画面の背景の設定手順を説明しましたが、とても手軽に背景を変えることが出来ますよね。
今回は、風景カテゴリの『トンネル状の岩の画像』を背景に設定しましたが、他にも沢山の背景画像があります。
次項では、おすすめのカテゴリと、背景のサンプル画像を紹介しています。
◆背景は、任意のカテゴリから選択できる(背景サンプル)
選択できるカテゴリは下記の10つ。(初期設定の[背景なし]含む) ※2021年2月28日現在
【背景なし/風景/テクスチャ/暮らし/地球/アート/都市景観/幾何学模様/単色/海の景色】
この中から、おすすめのカテゴリを5つ紹介しましょう。
また、各カテゴリのおすすめ背景画像もピックアップしてみました。
【風景】
風景の画像といえば『無難』というイメージがあります。
ですが、ここで選択できる風景画像は素晴らしいものが多いです。
~風景カテゴリのおすすめ4選~ | |
【青い岩天井が幻想的な洞窟内の風景】 | 【赤と青のオシャレ感あふれる岩場の風景】 |
【メルヘンな赤い花畑】 | 【不思議な地形をした緑一色の森】 |
【テクスチャ】
機械的なイメージの強いテクスチャですが、意外と面白い画像があります。
~テクスチャカテゴリのおすすめ4選~ | |
【土星を連想させる、オレンジを基調としたテクスチャ】 | 【青とピンクのバネのようなテクスチャ】 |
【黄色を基調としたテクスチャ】 | 【光沢感あるモノクロのテクスチャ】 |
【暮らし】
カテゴリ名から、アットホームな画像を想像しますが、意外とスタイリッシュなものが多いです。
~暮らしカテゴリのおすすめ4選~ | |
【赤と青の淡いライト】 | 【青紫の花びら】 |
【赤カーテンの部屋が印象的なビルの窓】 | 【在り来たりな中に良さを感じる自転車】 |
【アート】
アートカテゴリは、その画像の世界観が伝わってくる独特なものが多いです。
カスタマイズ画面から設定できる[色とテーマ]と組み合わせると、エモーショナルなホーム画面が出来上がります。
[背景]と[色とテーマ]の組み合わせについては、記事の後半で解説しています。
~アートカテゴリのおすすめ4選~ | |
【かわいらしい葉っぱの画像】 | 【ジブリ感あふれる、風船で飛ぶ家】 |
【幻想的な丘と月】 | 【線と塗りつぶしで描かれた貝殻】 |
【都市景観】
都市景観もカテゴリ名から、無難なイメージがします。
しかし、他には無いような夜景やレトロな画像が揃っていて、意外におすすめです。
~都市景観カテゴリのおすすめ4選~ | |
【マンションの谷間から見える夜空】 | 【神秘的な夜景】 |
【レトロなストリート】 | 【高層ビルの谷間から見える青紫の空】 |
おすすめの背景のカテゴリを紹介してきましたが、なかなかクオリティ高いと思いませんか!?
僕はこのブログを運営している関係で、素材サイトで画像を吟味することが多いですが、このクオリティの画像はなかなか目にしませんね。
おすすめに上げているもの以外にも、良い画像が沢山ありますよ。
◆毎日更新するボタン
背景の各カテゴリの画面には、[毎日更新する]ボタンが表示されます。
このボタンをONにすると、背景画像が毎日自動で切り替わります。(対象のカテゴリから自動選択される)
《画像12》
背景の各カテゴリの画面を表示。
①・・・[毎日更新する]ボタンをクリックしてONにします。
(《画像12》の例では、風景カテゴリで[毎日更新する]をONにしました。)
②・・・右下の[完了]をクリック。
《画像13》
③・・・背景画像が対象のカテゴリから自動で選択されました。
翌日には自動で別の画像に切り替わります。
ホーム画面の背景が毎日切り替わるので、飽きずに新鮮さを維持できます。
さらに、切り替えの手間もかからない、とても便利な設定ですよ。
◆アップロードした画像を背景にする
さて、『デバイスからアップロード』という表示が気になった方もいるかもしれません。
こちらは、パソコン上の画像をアップロードして、そのまま背景に設定できる機能になります。
以下、アップロード手順。
《画像14》
①・・・[デバイスからアップロード]をクリック。
(Windowsの場合は、エクスプローラが開きます。)
《画像15》
②・・・パソコン上の画像をクリックして選択します。
③・・・エクスプローラ右下の[開く]をクリック。
《画像16》
④・・・選択した画像が背景に設定されました。
解像度が低すぎると、こんなふうに粗くなっちゃいます(笑)
ある程度、大きさがある画像だと以下のように問題なく表示されますよ。
お気に入りの画像を背景に設定したい方は、是非『デバイスからアップロード』を試してみて下さい。
■[色とテーマ]の設定① 既存のパレットから選択する
[色とテーマ]では、Googleのホーム画面と、Chromeのメニューバー(アドレスバーやタブなど)部分の色を設定できます。
また、[背景]の画像はホーム画面のみ表示されますが、[色とテーマ]は他のWebサイトを開いている時でも有効です。
◆色とテーマの範囲
色とテーマは、Chromeのホーム画面の背景 + メインメニュー部分(タブやアドレスバー)に塗りつぶし色を設定することが出来ます。
《画像17》
画像で範囲を示してみましたが、色とテーマは、実際に設定してみないと分かりにくいかもです。
次項で手順を解説していますので、さっそく設定してみましょう。
◆色とテーマの設定 基本的な設定手順
《画像18》
①・・・GoogleChromeを起動して、ホーム画面右下の[カスタマイズ]をクリック。
《画像19》
②・・・サイドメニューの[色とテーマ]を選択する。
カラフルなパレットボタンがズラっと表示されます。
《画像20》
③・・・今回は、[黒]のパレットをクリック。
(初期設定では、左上から2番目の[既存]パレットが選択されています。)
④・・・右下の[完了]をクリック。
色とテーマが設定されました。
流行りのダークテーマっぽいホーム画面になりましたね。
このように、色とテーマの設定では、選択したパレットの2色でホーム画面とメインメニュー部分が塗りつぶされます。
なお、メインメニュー部分の塗りつぶしは、他のWebサイトを開いた際も有効です。
《画像22》
当ブログのトップページを表示してみました。
⑤・・・ホーム画面から他のサイトに移動しても、メインメニューの塗りつぶし色はそのまま有効です。
以上。色とテーマの設定手順でした。
次項では、サンプルを6種類紹介しています。
◆色とテーマの設定 サンプル
~色とテーマの設定 サンプル~ | |
①黄色と白 | ②ピンクと白 |
③明るい緑 | ④明るい青 |
⑤暗いピンクを赤 | ⑥暗い紫 |
6種類ほどサンプルを上げてみました。
選択したパレットは下記を参照。
他にも良い色合いのパレットがありますので、いろいろ試してみて下さい。
■[色とテーマ]の設定② 自分で配色を選択する
色とテーマでは、既存のパレットを選択する以外に、自分で配色を選択することも出来ます。
まず、設定手順を紹介。
◆自分で配色を選択する手順
《画像23》
サイドメニューの[色とテーマ]を開いた状態から。
①・・・左上のスポイトアイコンのパレットをクリック。
《画像24》
②・・・中央にカラーピッカーが表示されました。
(※カラーピッカーのついては、次項で詳しく解説しています。)
《画像25》
③・・・グラデーション部分の任意の場所をクリックします。
(《画像25》と同じ色になっていなくてもOK)
《画像26》
④・・・続いて、カラーピッカーの外の空白部分をクリックします。
(空白であれば、どこでもOK)
空白部分をクリックすると、配色が確定します。
《画像27》
《画像28》
ホーム画面で確認してみると、こんな感じになりました。
次項では、カラーピッカーの使い方を詳しく解説しています。
◆カラーピッカーの使い方
前項では、簡単に手順の説明をしましたが、カラーピッカーについては知らない人は知らないかもです。
なので、カラーピッカーについて、もう少し詳しく使い方などを解説していきます。
画像変種ソフトなどでよく使われる補助ツールです。
主に、クリック操作で使用者の好みの色を選べる便利なツール。
別名でカラーパレットとも呼ばれています。
カラーピッカーの機能を一つずつ解説していきます。
《画像29》
①明るさ調節
選択している色をベースに、白と黒の比率(明るさ)や、選択色の濃さを設定することが出来ます。
といっても、グラデーション部分をクリック選択するだけなので、非常に簡単。
なお、クリック選択した結果は、③で確認することが出来ます。
②色の選択
ベースになる色をクリック選択することが出来ます。
(白黒以外のカラー色はここで選択します。)
赤をベース、青をベースなど、カラフルなバーの任意の場所をクリックして下さい。
③現在の色
現在選択中の色を確認できます。こちらは、③以外の全ての設定の選択結果が表示されます。
④スポイト
スポイトをクリック後、任意の場所をクリックすると、その場所の色を抽出することが出来ます。
⑤カラーコード
色を表現するために用いられる、文字の符号のことです。
[色とテーマ]のカラーピッカーで選択できるのは、以下の3種類です。
~RGB~
3原色(赤・緑・青)で色を表現する。
R:0~255
G:0~255
B:0~255
~HSL~
色相・彩度・輝度で色を表現する。
H:0~359
S:0%~100%
L:0%~100%
~HEX~
16進数で色を表現する。
#000000~#FFFFFF
カラーコードは、Web制作経験がある人はご存じだと思います。
以上。[色とテーマ]のカラーピッカーの使い方の解説してきました。
でも、ごめんなさい。
カラーピッカーの使い方について、全部覚える必要はまったくありません。
①~③だけ使えれば十分だと思います。
もっと細かく色を指定したいという人のみ、④、⑤も使うと良いでしょう。
■背景/色とテーマ の組み合わせ サンプル紹介
これまで解説してきた[背景]や[色とテーマ]を組み合わせて設定したサンプルを紹介。
基本的に、[背景]と[色とテーマ]どちらを先に設定しても問題ありません。
両方とも設定することで、組み合わせることが出来ます。
~[背景]と[色とテーマ]組み合わせサンプル~ (※[色とテーマ]は既存のパレットから選択しています。) | |
![]() | ![]() |
![]() | ![]() |
サンプルを4種類紹介しました。
[背景]と[色とテーマ]の2つの設定を組み合わせると、上記のような斬新なホーム画面を作ることが出来ます。
■GoogleChromeホーム画面にWebサイトの『ショートカット』を設定する
ショートカットの設定は、今までのデザイン要素の設定とは少し異なります。
一言で言うと、「ホーム画面にWebサイトのショートカットを表示できる」というものです。
表示設定の2種類と、非表示設定から選択することが出来ます。
◆カスタムショートカット(指定したWebサイトのショートカットを表示)
まず、使用者が指定したWebサイトのショートカットを表示する設定『カスタムショートカット』の設定方法を紹介します。
《画像30》
カスタマイズ画面にて、
①・・・サイドメニューの[ショートカット]をクリックして選択。
②・・・表示された中から、[カスタムショートカット]をクリック。
[カスタムショートカット]が選択状態になりました。
《画像31》
③・・・右下の[完了]をクリック。
[完了]をクリックすると、自動的にホーム画面に戻ります。
《画像32》
④・・・ホーム画面の[ + ショートカット]をクリック。
[ショートカットの追加]の入力欄が表示されます。
《画像33》
[ショートカットの追加]の入力欄にて、
⑤・・・ショートカット名(任意)と、WebサイトのURLを入力します。
⑥・・・⑤を入力したら、[完了]をクリック。
《画像34》
⑦・・・⑤で入力した、URLのショートカットがホーム画面に表示されました。
⑧・・・左下に「ショートカットを追加しました」とメッセージが表示されます。
このメッセージは、何もしなくても勝手に消えるので、そのままでOK。
同じ手順で、最大10個のショートカットを作成することが出来ます。
ブックマークの中から、さらに厳選したサイトを設定すると良いでしょう。
◆よくアクセスするサイト(アクセス履歴でアクセスの多いWebサイトのショートカットを表示)
続いて、『よくアクセスするサイト』の設定方法を紹介。
こちらは、アクセス履歴に応じて、表示されるショートカットが変わります。
《画像35》
カスタマイズ画面にて、
①・・・サイドメニューの[ショートカット]を選択。
②・・・表示された中から、[よくアクセスするサイト]をクリック。
[よくアクセスするサイト]が選択状態になりました。
《画像36》
③・・・右下の[完了]をクリック。
[完了]をクリックすると、自動的にホーム画面に戻ります。
《画像37》
④・・・ホーム画面にアクセスした回数が多いWebサイトのショートカットが表示されました。
ただし、もう必要なくなった情報ページとかも表示され続けることあるので、個人的にはおすすめしません。
◆ショートカットを非表示にする
《画像38》
カスタマイズ画面にて、
①・・・サイドメニューの[ショートカット]を選択。
②・・・表示された中から、下部の[ショートカットを非表示にする]のボタンをクリックして、ONの状態にします。
[ショートカットを非表示にする]が選択状態になりました。
③・・・右下の[完了]をクリック。
《画像39》
④・・・ショートカットが非表示になりました。
ブックマーク派の方は、ショートカットを非表示にしても良いかもです。
■まとめ:Googleさんにお任せ設定
最後に、細かく設定するのは、面倒だ・・という方へ。
背景の[毎日更新]するボタンの設定と、ショートカットの[よくアクセスするサイト]の設定だけ行いましょう。
この2つの設定にしておくと、背景は毎日、ショートカットもアクセス履歴に応じて自動で切り替わっていきます。
名付けて、Googleさんにお任せ設定!
面倒だから、後はGoogleさんに任せてしまいましょう。
今回紹介したカスタマイズボタンからの設定は、簡単なものばかりなので是非いろいろ試してみて下さいね。
当ブログでは、冒頭で紹介したAndroidスマホの記事以外に、
PC版のChromeや他のGoogleサービスに関するの記事も執筆しています。
宜しければ、下記よりお読みください。
~PC版Googleサービス関連の記事 ピックアップ~
⇒⇒⇒[GoogleChrome]テーマの変更方法/元のテーマに戻す方法
⇒⇒⇒[Chrome]ブックマークファイルのエクスポートとインポート
⇒⇒⇒Youtubeのダークテーマ(黒い背景)の設定方法[PCとAndroid]
~GoogleChromeの拡張機能~
⇒⇒⇒Chromeの拡張機能[CustomCursor]の使い方
⇒⇒⇒おすすめのChrome拡張機能【FireShot】使いやすさ抜群!
それでは、また!
スポンサーリンク