GoogleChromeのテーマを自作してみた

グーグル製のブラウザである”Google Chrome”。
私も愛用しています。
この”Chrome”なんですが、実はちょっとしたカスタマイズができるのです。
その名も「テーマ」。
お気に入りの画像などを”Chrome”のデザインとして取り込めてしまうのです。
今回はそのやり方を紹介します。
※ちなみに紹介の中で”Theme”という単語が出てきますが、これこそ「テーマ」と読むのです。ちょっと見慣れない文字列ですが、「テーマ」と読むと、読みやすくなるかもです。

ThemeBetaを使う

まずは、”Chrome”から”ThemeBeta”に移動します。
リンク：ThemeBeta（https://www.themebeta.com/）

ここで好みのテーマを作っていくことになります。

画面左上あたりにある”THEMA CREATOR”をクリックします。

次に”Enter Thene name”にテーマの名前を入れて、”image”をクリックしてください。
６つのエリアに区切られています。
ここでいろいろな画像や色を指定してゆきます。

それぞれの欄にマウスカーソルを置くと、プレビュー画面でその場所が赤く表示されるのでわかりやすいでしょう。

それでは一個ずつやっていきます。

NTP Background

メイン画像の設定です。今回はこのタヌキの画像を使います。
“NTP Background”の右にある”Choose Image”をクリックすると、ファイル選択画面が出てきますので、ご希望のファイルを選択してください。
この時の画像は１辺が１０００ピクセル以上あったほうがよいでしょう。

すると、下のようにプレビュー画面で確認ができます。

Frame

続いてフレームです。
ここは画像も選べますが、単色を選択することもできます。
今回は少し濃いめの茶色にしてみます。

“NTP Background”の右にある”Choose Image”の左に四角いボタンがあります。
クリックすると、色の選択画面が表れますので、希望の色を選択します。

ここにグラデーションなどをかけたい場合や、模様を入れたい場合は別途画像を用意してください。
今回は下のようになりました。

Toolbar

続いてツールバーです。
フレームに合わせて少し薄めの茶色にしてみます。

“Toolbar”の右にある”Choose Image”の左に四角いボタンから色を選択してください。
今回は下のようになりました。

Tab Background

タブバックグラウンドは、選択していないタブのことです。
さらに薄い茶色にしてみました。

Frame Overlay

フレームオーバーレイは、タブの裏側だと思っていただければいいかと思います。
画像を使用する場合は大きさに注意してください。
今回使用した画像はこちら。

サイズは横が６１１ピクセル、縦が４０ピクセルです。
どうも縦は４０～４５ピクセルがいいようです。

そして、こうなりました。

今回は紹介のため、適当に白バックにしてしまいましたが、フレームなどとデザインを合わすと、より見栄えが良くなると思います。

NTP Attribution

最後に画面右下に独立して画像を入れることができます。
もちろん入れなくてもいいですが、ブラウザの大きさを変えたときにも追従してくれるので、何かと楽しいです。

こんな感じになりますが、画像を透過処理したPNGファイルにすると、次のように透過して表示してくれます。

インストール

テーマファイルのダウンロード

デザインが終わったらインストールしましょう。
まずは、テーマファイルをダウンロードします。

“Pack”を選択して、”Pack and Download”をクリックしてください。
すると、テーマファイルがダウンロードされます。

Chromeを「デベロッパーモード」にする

この操作をしないと、うまくテーマをインストールできないことがあります。

Chromeの右上にある「三点ボタン」から、「その他ツール」－「拡張機能」を選びます。

右上に出てくる「デベロッパーモード」の右のスイッチをONにします。

インストール

ダウンロードしたテーマファイル（拡張子は”.crx”）をChromeにドラッグ＆ドロップします。

「テーマを追加」をクリックしたらインストール完了です。

実際にChromeを開いてみるとこんな感じになります。

フレームは単色だともっさりしてしまうので、画像としてデザインするのがいいかと思います。
グラデーションなど効かせただけでも印象は変わりますね。
みなさんも自分なりのChromeを作ってみてください。