Google Chromeでテーマを自作する方法について知りたい!テーマの自作方法を解説!

目次

この記事では、Google Chromeのテーマの自作についてご紹介していきたいと思います。

Google Chromeは多くの方が利用するブラウザです。Internet explorerやFirefoxと並んで利用率が高く、とても人気があるブラウザであるといえます。

検索がスムーズであったりアドオン機能が使えるなど便利なブラウザではありますが、ブラウザ自体の背景は白が基調であるため、長く利用していると背景のデザインにメリハリが欲しくなってきます。

そのような場合、Chromeのテーマ変更によって背景のデザインを変えることが可能です。

Google Chromeのテーマはどんな設定方法があるのか

Google Chromeのテーマを変えるにはあらかじめ用意されているテーマを用いる方法とテーマを自作する方法の2種類が存在します。

Google Chromeのテーマを自作する

通常であれば、用意されているテーマを活用する方法をご紹介するのが先だと思いますが、Chromeのテーマを自作することを目的に当記事を見ていただいてると思いますので、テーマを自作する方法から先に説明させていただきます。

Theme Beta

Google Chromeのテーマ作成のURLへ移動し、サイト内から作業をすることによってGoogle Chromeのテーマを自作することが可能です。

Theme Betaは以下のURLにアクセスすることでGoogle Chromeテーマの自作を行うことができます。

こちら:ThemeBeta

URLにアクセスするとTheme Betaの画面が表示されます。
画面には様々なデザインが表示されていると思います。このデザイン表示は時間が経つにつれて変わっていくようです。

それでは、早速Google Chromeの自作テーマを作成していきましょう。自作テーマを作成するためには、サイトのメニューのTheme Creatorをクリックすることによって、自作テーマの作成が開始されます。

Theme Creatorを選択していただくと、画像をアップロードする画面が表示されます。手順が1から4まで示されておりますので、その手順に従って作業を進めていくことで自作のテーマを作成することができます。ここではまずテーマのもととなる画像をアップロードします。

画像をアップロードしていただきますと、テーマの画像イメージが表示されると思いますが、位置がずれて表示されるために最初は画像の位置を調整するところから始めます。

今回は、サンプルとしてフリー画像である風景の写真をTheme Creatorで作成していきたいと思います。アップロードした場合、以下の通りサイズも小さいですし、位置についてもまったくあっていません。

Theme Creator1

このままではさすがにGoogle Chromeの自作テーマとして継続して使用していけないので、場所やサイズを合わせていくことによって続けて使っていけるGoogle Chromeの自作テーマを作成していきたいと思います。

まずは、場所について調節していきます。Theme Creatorの背景調整では、以下の調整項目が用意されています。

①center
②bottom
③no repeat
④normal size
⑤scale

①centerと初期表示されている項目では、場所の左右の位置を調節できます。現在の場所はcenterになっていますが、この値をleftにすることで画像を左に寄せることができます。一方、この値をrightにすると予想通り、画像の位置は右に移動します。

②こちらの初期表示はbottomとなっており、上下の画像位置を調整する項目となっています。現在はbottomになっているので画像の位置は下に表示されています。他の項目としてはtopがあるので、topを選択すると画像が上に表示されます。

③次はno repeatと表示されている箇所です。こちらは画像を繰り返すかどうかが選択できる設定値です。繰り返しを設定することにより同じ画像が何枚も背景としてはりつけられます。

④normal sizeと初期表示されている項目ではアップロードした画像をどの大きさで表示させるかを選択することができます。現在はnormal sizeなのでアップロードしたままのサイズが表示されている状態です。何個かのサイズが選べますので自身が設定したい大きさを選ぶとよさそうです。

⑤最後はscaleです。こちらの項目に値を設定することで画像の大きさを調整することができます。

上記のように画像の大きさを調整するのに様々な項目がありますが、今回サンプルとしてアップロードした画像はフルスクリーンで設定するのが一番合っていましたのでフルスクリーンで設定を行いました。

設定を行った結果は以下の通りです。

Theme Creator2
続いて、色の調整にうつります。
現在作業をおこなっているタブはBasicですが、Imagesに移動し、それぞれの項目について値を設定していきます。

ここのImagesでも設定項目は色々ありまして、

①NTP Background
②Frame
③Toolbar
④Tab Background
⑤Frame Overlay
⑥NTP AttributionFrame Overlay

等が用意されています。

①は背景の色を選択できる項目です。サンプルのように画像を背景として選んでいる場合は設定不要です。

②周りの縁の色を決めることができます。

③ツールバーのカラーを設定することが可能です。

④タブの背景色を決められます。他の⑤、⑥ともに同じように様々な設定を行うことができます。

私が設定したサンプルでは画像が基本であるため、このタブでの設定はフレームだけとしています。フレームだけですが、設定すると以下のようになります。

Theme Creator3

そこからは先ほどのMy Chrome テーマと同じように画像をアップロードします。画像をアップロードしたら、画像に対して色づけをしていきます。

画像の色づけはTheme BetaのGenelate Colorsによって行うことができ、ブックマークやタブの色を選択することができます。

次のタブであるColorsでは主に文字の色についてカスタマイズすることができます。項目としては以下のものが用意されています。

①Status Bar
②Tab Text
③Background Tab Text
④Bookmark Text
⑤NTP Text
⑥Control Buttons
⑦Buttons

①ステータスバーにおける背景の色を変更できます。

②ステータスバーの文字の色を設定します。

③タブの文字の色をきめることができます。

その他、④から⑦についても文字の色やボタンの色などを設定することができるなどオリジナリティあふれる自作テーマを作るアイテムがそろっています。

ここまでの設定を行うことでGoogle Chromeにおける自作テーマの作成は完了です。ここからさきは作成した自作テーマについて公開するか、自身でのみ作成するかを選ぶことになります。

画面のPack and Installを選ぶと自身の端末に保存することができます。一方、Save Onlineを選ぶと作成した自作テーマをオンラインで保存することができ、自分以外の人もテーマを利用することができるようになります。

Google Chromeの用意されたテーマを利用する

前述の通りGoogle Chromeのテーマを変えたい場合は、事前に用意されたものを使うことが可能です。
テーマを自作したいとは思っているものの、難しそうなのでとりあえずば用意されているものから利用しようと考えている方や気にいったテーマがあるので用意されているものを活用したいという方はこちらを利用することになると思います。

それでは、用意されているテーマを適用する手段について説明いたします。

まずはGoogleChromeを開いてください。その後、Chromeの画面右上にある設定ボタンをクリックしてください。

一覧が開きますので、設定ボタンを押してください。設定ボタンを選択すると、設定メニューがみえますので、デザインの項目を探してください。

デザインの項目内にテーマがありますので、テーマを選択してください。

テーマを選ぶことで様々な画像が表示されます。そこから自身が気に入ったデザインを選びます。

選びますとデザインの詳細が表示されますので、Chromeに追加を選択します。

この作業によって、自作ではありませんがGoogleChromeにテーマを設定することができます。

まとめ

この記事ではGoogle Chromeの自作テーマを作成する方法について記載させていただきました。

画像などがあれば、Theme Creatorを利用することによって簡単にオリジナリティあふれる自作テーマが作成できます。また、作成したテーマについて自分用としてだけでなく、他の方とも共有することができます。

Googleのページに飽きてきた場合、このような自作テーマを用いてみてはいかがでしょうか。

【編集部より】あなたの感想を教えてください

こちらの記事はいかがでしたか?もし同じ疑問を持っている知り合いがいた場合、あなたがこの記事を友人や家族に薦めたりシェアしたりする可能性は、どのくらいありますか? より良い記事を作るための参考とさせていただきますのでぜひご感想をお聞かせください。
薦めない薦める

この記事を書いた人

Written By
たなか かな
多くの方に役立てるよう頑張ります。
2018年よりお世話になります。 家電やソフトウェアについてそれなりに詳しいと思います。 情報を紹介するとともに自分も詳しくなろうと思います。

おすすめの記事

スポンサー

カテゴリ一覧