[Chrome]Googleホーム画面のカスタマイズ 背景や色を設定する方法

今回は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》

Chromeホーム画面:右上の[設定アイコン]をクリック

 

・・・ホーム画面が表示されたら、右上の[設定アイコン]をクリックします。

設定関連のリストメニューが表示されます。

 

《画像2》

設定のリストメニューが表示されたら、[設定(S)]をクリック

 

・・・リストメニューの中から、[設定(S)]をクリック。

Chromeの設定ページが表示されます。

 

《画像3》

アドレスバーで使用する検索エンジンの項目で、[Google]を選択する

 

設定ページの少し下の方までスクロールして、[検索エンジン]の項目を表示しましょう。

・・・[アドレスバーで使用する検索エンジン]で、[Google]を選択。 ⇒ 新しいタブを開く。

 

以降はChromeを起動すると、ホーム画面にGoogleの検索エンジンが表示されます。

 

◆GoogleChromeのバージョンが78以降であること


カスタマイズボタンはGoogleChromeのバージョン78から搭載された機能です。

78より古いバージョンのChromeを使われている場合、カスタマイズボタンは表示されません。

Chromeを最新版にアップデートしましょう。

 

Chromeのバージョンの確認方法と、アップデート方法。

 

《画像4》

Chromeの設定ページにて、右上の三本線ボタンをクリック

 

・・・Chromeの設定ページにて、左上のボタンをクリック。

サイドメニューが表示されます。

 

《画像5》

左側に表示されたサイドメニューより[Chromeについて]をクリック

 

・・・サイドメニューより、[Chromeについて]をクリック。

 

《画像6》

使用中のChromeが最新版であれば、[GoogleChromeは最新版です]と表示される

 

・・・Chromeが最新版であれば、《画像6》のように[GoogleChromeは最新版]と表示されます。

[GoogleChromeは最新版]と表示されていれば、問題なし。次の項目へ進みましょう。

 

~Chromeが最新版で無い場合~

Chromeのバージョンが最新版で無い場合は、《画像6》のページを開くと、自動でアップデートの確認⇒アップデートが開始 されます。
アップデート後は[再起動]ボタンが表示されますので、クリックしてChromeを再起動しましょう。
 

■GoogleChromeホーム画面:カスタマイズボタンから[背景]を設定する


それでは、GoogleChromeホーム画面のカスタマイズボタンから、ホーム画面の背景を設定していきます。

◆背景の設定手順

 

《画像7》

Chromeホーム画面右下の[カスタマイズ]をクリック

 

Chromeを起動します。(Google検索のホーム画面が表示される。)

・・・ホーム画面右下の[カスタマイズ]ボタンをクリック。

カスタマイズ画面が表示されます。

《画像8》

Chromeホーム画面に背景画像を設定する:[背景]を選択して、次に[風景]をクリック

 

・・・サイドメニューより[背景]を選択。(カスタマイズ画面を開くと、すでに選択されている状態です。)

・・・[風景]のカテゴリをクリック。
※背景のカテゴリは、まれに新しいカテゴリが追加されることもあります。その場合、《画像8》の[風景]カテゴリの位置が変わっていることがあるので、ご了承ください。

 

《画像9》

風景の画像の中から、トンネル状の岩の画像を選択

 

風景カテゴリの画像が表示されます。

・・・今回は、左から2番目『トンネル状の岩の画像』をクリックして選択。

 

《画像10》

トンネル状の岩の画像にチェックが付き選択状態になったら、右下の[完了]をクリック

 

・・・画像が選択状態になったら、右下の[完了]をクリック。

 

《画像11》

トンネル状の岩の画像がChromeホーム画面の背景画像に設定されました

 

・・・⑤で選択した背景画像がホーム画面に設定されました。

 

以上。

ホーム画面の背景の設定手順を説明しましたが、とても手軽に背景を変えることが出来ますよね。


今回は、風景カテゴリの『トンネル状の岩の画像』を背景に設定しましたが、他にも沢山の背景画像があります。

次項では、おすすめのカテゴリと、背景のサンプル画像を紹介しています。

◆背景は、任意のカテゴリから選択できる(背景サンプル)


選択できるカテゴリは下記の10つ。(初期設定の[背景なし]含む) ※2021年2月28
日現在

 

【背景なし/風景/テクスチャ/暮らし/地球/アート/都市景観/幾何学模様/単色/海の景色】

ホーム画面の背景に設定できる画像のカテゴリは背景なし/風景/テクスチャ/暮らし/地球など

 

この中から、おすすめのカテゴリを5つ紹介しましょう。

また、各カテゴリのおすすめ背景画像もピックアップしてみました。

 

 

【風景】

風景の画像といえば『無難』というイメージがあります。

ですが、ここで選択できる風景画像は素晴らしいものが多いです。

 

~風景カテゴリのおすすめ4選~

背景画像:青い岩天井が幻想的な洞窟内の風景

【青い岩天井が幻想的な洞窟内の風景】

背景画像:赤と青のオシャレ感あふれる岩場の風景

【赤と青のオシャレ感あふれる岩場の風景】

背景画像:メルヘンな赤い花畑

【メルヘンな赤い花畑】

背景画像:不思議な地形をした緑一色の森

【不思議な地形をした緑一色の森】

 

【テクスチャ】

機械的なイメージの強いテクスチャですが、意外と面白い画像があります。

~テクスチャカテゴリのおすすめ4選~

背景画像:土星を連想させるオレンジを基調としたテクスチャ

【土星を連想させる、オレンジを基調としたテクスチャ】

背景画像:青とピンクのバネのようなテクスチャ

【青とピンクのバネのようなテクスチャ】

背景画像:黄色を基調としたテクスチャ

【黄色を基調としたテクスチャ】

背景画像:光沢感あるモノクロのテクスチャ

【光沢感あるモノクロのテクスチャ】

 

【暮らし】

カテゴリ名から、アットホームな画像を想像しますが、意外とスタイリッシュなものが多いです。

 

~暮らしカテゴリのおすすめ4選~

背景画像:赤と青の淡いライト

【赤と青の淡いライト】

背景画像:青紫の花びら

【青紫の花びら】

背景画像:赤カーテンの部屋が印象的なビルの窓

【赤カーテンの部屋が印象的なビルの窓】

背景画像:在り来たりな中に良さを感じる自転車

【在り来たりな中に良さを感じる自転車】

 

【アート】

 
Nada
1番おすすめの背景カテゴリ。
アートカテゴリは、その画像の世界観が伝わってくる独特なものが多いです。


カスタマイズ画面から設定できる[色とテーマ]と組み合わせると、エモーショナルなホーム画面が出来上がります。

[背景]と[色とテーマ]の組み合わせについては、記事の後半で解説しています。

 

~アートカテゴリのおすすめ4選~

背景画像:かわいらしい葉っぱの画像

【かわいらしい葉っぱの画像】

背景画像:ジブリ感あふれる、風船で飛ぶ家

【ジブリ感あふれる、風船で飛ぶ家】

背景画像:幻想的な丘と月

【幻想的な丘と月】

背景画像:線と塗りつぶしで描かれた貝殻

【線と塗りつぶしで描かれた貝殻】

 

【都市景観】

都市景観もカテゴリ名から、無難なイメージがします。

しかし、他には無いような夜景やレトロな画像が揃っていて、意外におすすめです。

 

~都市景観カテゴリのおすすめ4選~

マンションの谷間から見える夜空

【マンションの谷間から見える夜空】

神秘的な夜景

【神秘的な夜景】

レトロなストリート

【レトロなストリート】

高層ビルの谷間から見える青紫の空

【高層ビルの谷間から見える青紫の空】

 

おすすめの背景のカテゴリを紹介してきましたが、なかなかクオリティ高いと思いませんか!?

僕はこのブログを運営している関係で、素材サイトで画像を吟味することが多いですが、このクオリティの画像はなかなか目にしませんね。

おすすめに上げているもの以外にも、良い画像が沢山ありますよ。

◆毎日更新するボタン


背景の各カテゴリの画面には、[毎日更新する]ボタンが表示されます。

このボタンをONにすると、背景画像が毎日自動で切り替わります。(対象のカテゴリから自動選択される)

 

《画像12》

カスタマイズ画面の[背景]選択で、右上の[毎日更新する]をONにして[完了]をクリック

 

背景の各カテゴリの画面を表示。

・・・[毎日更新する]ボタンをクリックしてONにします。
(《画像12》の例では、風景カテゴリで[毎日更新する]をONにしました。)

・・・右下の[完了]をクリック。

 

《画像13》

Chromeホーム画面の背景画像が自動で設定され、毎日背景画像が切り替わる

 

・・・背景画像が対象のカテゴリから自動で選択されました。

翌日には自動で別の画像に切り替わります。

 

ホーム画面の背景が毎日切り替わるので、飽きずに新鮮さを維持できます。

さらに、切り替えの手間もかからない、とても便利な設定ですよ。

◆アップロードした画像を背景にする


さて、『デバイスからアップロード』という表示が気になった方もいるかもしれません。

こちらは、パソコン上の画像をアップロードして、そのまま背景に設定できる機能になります。

 

以下、アップロード手順。

《画像14》

カスタマイズ画面の[背景]選択で、[デバイスからアップロード]をクリック

 

・・・[デバイスからアップロード]をクリック。
(Windowsの場合は、エクスプローラが開きます。)

 

《画像15》

Windowsの場合はエクスプローラ画面でアップロードするファイルを選択します

 

・・・パソコン上の画像をクリックして選択します。

・・・エクスプローラ右下の[開く]をクリック。

 

《画像16》

アップロードした画像がChromeホーム画面の背景に設定されました

 

・・・選択した画像が背景に設定されました。

 

 
Nada
僕のアバター画像を背景にしてみました。
解像度が低すぎると、こんなふうに粗くなっちゃいます(笑)

ある程度、大きさがある画像だと以下のように問題なく表示されますよ。

アップロード画像の例:頭よさげな人の背景

頭よさげな人の背景

アップロード画像の例:カラフルな花びら

カラフルな花びら


お気に入りの画像を背景に設定したい方は、是非『デバイスからアップロード』を試してみて下さい。

 

■[色とテーマ]の設定① 既存のパレットから選択する

 

[色とテーマ]では、Googleのホーム画面と、Chromeのメニューバー(アドレスバーやタブなど)部分の色を設定できます。

また、[背景]の画像はホーム画面のみ表示されますが、[色とテーマ]は他のWebサイトを開いている時でも有効です。

◆色とテーマの範囲


色とテーマは、Chromeのホーム画面の背景 + メインメニュー部分(タブやアドレスバー)に塗りつぶし色を設定することが出来ます。

 

《画像17》

色とテーマの設定はChromeのホーム画面と、上部のメニュー部分にも設定できる


画像で範囲を示してみましたが、色とテーマは、実際に設定してみないと分かりにくいかもです。

次項で手順を解説していますので、さっそく設定してみましょう。

◆色とテーマの設定 基本的な設定手順

 

《画像18》

Chromeのホーム画面で右下の[カスタマイズ]ボタンをクリック

 

・・・GoogleChromeを起動して、ホーム画面右下の[カスタマイズ]をクリック。

 

《画像19》

Chromeをカスタマイズ:サイドメニューの[色とテーマ]をクリック

・・・サイドメニューの[色とテーマ]を選択する。

カラフルなパレットボタンがズラっと表示されます。

 

 

《画像20》

[黒]のパレットを選択して[完了]をクリック

・・・今回は、[黒]のパレットをクリック。
(初期設定では、左上から2番目の[既存]パレットが選択されています。)

・・・右下の[完了]をクリック。

色とテーマが設定されました。

 

 

《画像21》
Chromeをカスタマイズ:色とテーマ[黒]

 

流行りのダークテーマっぽいホーム画面になりましたね。

このように、色とテーマの設定では、選択したパレットの2色でホーム画面とメインメニュー部分が塗りつぶされます。

なお、メインメニュー部分の塗りつぶしは、他のWebサイトを開いた際も有効です。

 

 

《画像22》

メインメニューの塗りつぶし色はサイトが変わっても有効

当ブログのトップページを表示してみました。

・・・ホーム画面から他のサイトに移動しても、メインメニューの塗りつぶし色はそのまま有効です。


以上。色とテーマの設定手順でした。

次項では、サンプルを6種類紹介しています。

◆色とテーマの設定 サンプル

 

~色とテーマの設定 サンプル~

Chromeをカスタマイズ:色とテーマ[黄色と白]

黄色と白

Chromeをカスタマイズ:色とテーマ[ピンクと白]

ピンクと白

Chromeをカスタマイズ:色とテーマ[黄色と白]

明るい緑

Chromeをカスタマイズ:色とテーマ[黄色と白]

明るい青

Chromeをカスタマイズ:色とテーマ[黄色と白]

暗いピンクを赤

Chromeをカスタマイズ:色とテーマ[黄色と白]

暗い紫

 

6種類ほどサンプルを上げてみました。

選択したパレットは下記を参照。

~色とテーマの設定 サンプル~選択したパレット

 

他にも良い色合いのパレットがありますので、いろいろ試してみて下さい。

■[色とテーマ]の設定② 自分で配色を選択する


色とテーマでは、既存のパレットを選択する以外に、自分で配色を選択することも出来ます。

まず、設定手順を紹介。

◆自分で配色を選択する手順

 

《画像23》

色とテーマ:左上[カスタム色]パレットをクリック

サイドメニューの[色とテーマ]を開いた状態から。

・・・左上のスポイトアイコンのパレットをクリック。

 

 

《画像24》

カラーピッカーが表示された

・・・中央にカラーピッカーが表示されました。
(※カラーピッカーのついては、次項で詳しく解説しています。)

 

 

《画像25》

カラーピッカーのグラデーションで、任意の箇所をクリック

・・・グラデーション部分の任意の場所をクリックします。
(《画像25》と同じ色になっていなくてもOK)

 

 

《画像26》

カラーピッカーの外の空白部分をクリックすると配色が確定する

・・・続いて、カラーピッカーの外の空白部分をクリックします。
(空白であれば、どこでもOK)

空白部分をクリックすると、配色が確定します。

 

 

《画像27》

色とテーマ:任意の配色が確定して[カスタム色]のパレットが選択状態になった・・・配色が確定し、選択されました。

 

 

《画像28》

Googleのホーム画面:Chromeをカスタマイズの色とテーマ、任意の配色の選択結果

ホーム画面で確認してみると、こんな感じになりました。

次項では、カラーピッカーの使い方を詳しく解説しています。

◆カラーピッカーの使い方


前項では、簡単に手順の説明をしましたが、カラーピッカーについては知らない人は知らないかもです。

なので、カラーピッカーについて、もう少し詳しく使い方などを解説していきます。

 

~カラーピッカーとは!?~

画像変種ソフトなどでよく使われる補助ツールです。
主に、クリック操作で使用者の好みの色を選べる便利なツール。
別名でカラーパレットとも呼ばれています。


カラーピッカーの機能を一つずつ解説していきます。

 

《画像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個のショートカットを作成することが出来ます。

 

 
Nada
ホーム画面のショートカット設定では、この『カスタムショートカット』が一番おすすめ。
ブックマークの中から、さらに厳選したサイトを設定すると良いでしょう。

 

◆よくアクセスするサイト(アクセス履歴でアクセスの多いWebサイトのショートカットを表示)


続いて、『よくアクセスするサイト』の設定方法を紹介。

こちらは、アクセス履歴に応じて、表示されるショートカットが変わります。

 

《画像35》

 

カスタマイズ画面にて、

・・・サイドメニューの[ショートカット]を選択。

・・・表示された中から、[よくアクセスするサイト]をクリック。

[よくアクセスするサイト]が選択状態になりました。

 

《画像36》

 

・・・右下の[完了]をクリック。

[完了]をクリックすると、自動的にホーム画面に戻ります。

 

《画像37》

 

・・・ホーム画面にアクセスした回数が多いWebサイトのショートカットが表示されました。

 

 
Nada
一つ一つURLを設定するのが面倒な人はこちら。
ただし、もう必要なくなった情報ページとかも表示され続けることあるので、個人的にはおすすめしません。

 

◆ショートカットを非表示にする

 

《画像38》

 

カスタマイズ画面にて、

・・・サイドメニューの[ショートカット]を選択。

・・・表示された中から、下部の[ショートカットを非表示にする]のボタンをクリックして、ONの状態にします。

[ショートカットを非表示にする]が選択状態になりました。

・・・右下の[完了]をクリック。

 

《画像39》

 

・・・ショートカットが非表示になりました。

 

 
Nada
非表示設定については、完全に使用者の好みですね。
ブックマーク派の方は、ショートカットを非表示にしても良いかもです。

 

■まとめ:Googleさんにお任せ設定


最後に、細かく設定するのは、面倒だ・・という方へ。

背景の[毎日更新]するボタンの設定と、ショートカットの[よくアクセスするサイト]の設定だけ行いましょう。

この2つの設定にしておくと、背景は毎日、ショートカットもアクセス履歴に応じて自動で切り替わっていきます。

名付けて、Googleさんにお任せ設定!

面倒だから、後はGoogleさんに任せてしまいましょう。

 

今回紹介したカスタマイズボタンからの設定は、簡単なものばかりなので是非いろいろ試してみて下さいね。

 

 

当ブログでは、冒頭で紹介したAndroidスマホの記事以外に、

PC版のChromeや他のGoogleサービスに関するの記事も執筆しています。

宜しければ、下記よりお読みください。

 

~PC版Googleサービス関連の記事 ピックアップ~

⇒⇒⇒[GoogleChrome]テーマの変更方法/元のテーマに戻す方法

⇒⇒⇒[Chrome]ブックマークファイルのエクスポートとインポート

⇒⇒⇒Youtubeのダークテーマ(黒い背景)の設定方法[PCとAndroid]


~GoogleChromeの拡張機能~

⇒⇒⇒GoogleKeepのWebクリップが便利すぎる

⇒⇒⇒Chromeの拡張機能[CustomCursor]の使い方

⇒⇒⇒おすすめのChrome拡張機能【FireShot】使いやすさ抜群!

 

 

 

それでは、また!

スポンサーリンク