Google Chrome のテーマ作り方めも

細かい部分の数値に関しては、もしかしたらWindowsとMacで少し違う可能性あるけど、その辺は適当に調整して作ったらよいと思われます(+'-')bb

…の前に。

（追記）Windowsで調整したテーマをMacのChromeに入れたら、フレームとタブがズレますな…。前バージョンでもそうだったけど、何故に共通仕様じゃないのかｺﾚｶﾞﾜｶﾗﾅｲ...。

アップデートで前のテーマファイルが使えなくなった…

ver.69 でテーマの仕様も変わったのか、以前のテーマだと表示がズレる不具合が発生…。

「Google Chrome」から10周年、新デザインをまとった「Google Chrome 69」が正式公開 - 窓の杜  https://forest.watch.impress.co.jp/docs/news/1141539.html

画像の高さが足りてないからかループしてたり、なぜか鏡面反射してるような部分があったりと、かなりよく分からんことに…(;´Д`)

Chromeをアップデートしたら、左のように妙なズレ方に…(汗)

で、調整してみたのが右なんだけど、なんでアドレスバーの位置がズレてるのかｺﾚｶﾞﾜｶﾗﾅｲ…。

とまぁ、そんなわけで、最近ちょっと新しい仕様を調べてみたので、メモっておこうと思った次第(+'-')φ_

テーマの作り方

画像用意して、ツールで作るだけ。

使用するツール

これで簡単に作れる。

Theme Creator
https://chrome.google.com/webstore/detail/theme-creator/akpelnjfckgfiplcikojhomllgombffc/

参考サイト

でも、直感だとよく分からん部分もあるので、そんな時は下記サイトでも参考に。

ちょっと古い記事だから、画面が全然違うんだけど、用語の説明はいまとほぼ一緒だから、一応参考にはなるカモ？

Chromeでテーマを自作する テーマ作成アプリTheme Creatorで遊ぼう!! - 週刊アスキー
https://weekly.ascii.jp/elem/000/000/043/43529/

だいぶ前に書いてたメモより

どっかのサイトに書いてたテーマの仕様。一応、基本仕様はこんな感じらしいけど…。

・NTP Background（ウィンドウの背景）
800 x 600px（イメージの推奨最小サイズ）

・Frame（ヘッダー部分の背景）
∞ x 30px //とのことだが、どう考えても49pxは必要

・Toolbar（ツールバー部分の背景）
∞ x 120px  //Frameと画像を合わせるならコツがいる。詳細は後述

・Tab Background（非アクティブ状態のタブの背景）
∞ x 65px    //これは51pxでよい気がする

・Frame Overlay（アクティブ時のヘッダー画像）
1100 x 40px

・NTP Attribution（署名画像）

作り方めも

とまぁ、上記の説明だけだとちょっと訳が分からんので、DOAXVVのかわいいイラストを使って、テーマを作ってみる(*˘ω˘)

画像を用意する

１．「高さ120px」で「ベース画像」を作る

幅は、ループするので短くてもよいけど、1920pxで作ればフルHDのモニタで全体化した時に、ぴったり収まる。

ただ、「タブ・ボタン・アドレスバー」などに隠れて見えなくなる部分ができるので、その辺は一応注意？

というわけで、テンプレートを作っておくと良いと思われる(+'-')b

ガイドを兼ねたテンプレート（さんぷる）

上は自作のテンプレ。

一応説明しておくと、上下3px部分（赤線部分）はカットされるぽい。あと最大化した時には上部が切れるので、それが気になるならそこも計算して画像を作る。

「ー□×」のボタン位置は、1920px時と1440px時。個人的には1440pxでよく使うのでこの位置にしたけど、この辺は各自の環境に合わせたらよい。

参考までに、こんな画像をご用意(+'-')ﾉ

２．Frame 用の画像を作る

Frame部分は、上記で作ったベース画像から、上部50px部分を切り抜く（面倒だったら、そのまま使っても問題はない。てか正確には49px部分が使用されるぽいけど）。

つまり、こんな感じになる

ちなみに、キャラクターの背景を透明にしてあるけど、

• 透明だと、「Theme Creator > image > Frame」で指定した色が反映される。ただ非アクティブになった時に変な色?になる。
• 背景にも色があると、非アクティブ時、その色が薄くなった状態になる。

という感じ。１の方法だと簡単にカラーバリエーションが作れる。まぁ好きな方で作成すればよいかと…( ˘ω˘)

３．Toolbar 用の画像を作る

もし、Frame部分とTab部分の画像が合わさるように作りたい場合は、ベース画像の上部16pxを削って「高さ104px」の画像にする。

ちなみに、この部分はタブやブックマークバーで使用される、つまり文字が入る部分なので、文字を読みやすくしたかったら少し暗めにする、などの処理をしとくとよい。

こんな感じにしてみる

あと、他の部分にも言えるけど、フラットカラーで良いなら画像を用意しなくてよい。

４．Tab Background 用の画像を作る

Toolbar と同じく、ベース画像の上部16pxを削って「高さ104px」の画像にする。

ただ、こっちはバックグラウンド時のタブでしか使われていないので、上部51px部分しか使われてなさげ。不要だと思うなら、Frame と同様に切り抜いておくとよいカモ。

こんな感じにしてみる

Frame Overlay と NTP Attribution は…まぁ入れたい人は用意すればよいかと( ´￢`)

Theme Creator を使う

上記で用意した画像を使って、Theme Creator でテーマを作成する。

images タブ

ここで各部分の画像＆色を指定していく。

右側のプレビューは、微妙に画像がズレて表示されてたりするので、そこまで正確なプレビューではない。まぁ参考程度といったところ(+'-')b

NTP Background は、ウィンドウ内に大きく表示されているかすみちゃん画像のこと。右下部の「Background Image:」のプルダウンメニューから、どのように表示するか設定できる。まぁ選んでみたら分かると思うので、詳細は割愛( ˘ω˘)

色の設定めも

参考までに、上記画像での設定は下記の通り。
NTP Background: FFFFFF
Frame: AFDBFF

Frame の色は、画像に透過部分がある場合のみ適用されるので、透過部分がない画像なら設定しなくてよい。

Toolbar と Tab Background は、画像を設定した場合は無視されるぽい。参考までに、真っ赤にしてみたけど、右側のプレビューに影響なし。透明部分があってもその部分は黒くなる（なぜかFrameと違う処理）。

Colors タブ

文字やボタンの色を設定するとこ

設定される場所は、マウスオーバーすればプレビューで分かるかと。

Control Buttons のみ、透明度の設定もできるはずなんだけど、ver.69 になってから何故かカーソルが動かなくなっている…？

参考までに、上記画像での設定は下記の通り。
Status Bar: 526FEF
Tab Text: DCF8FE
Background Tab Text: 526FEF
Bookmark Text: DCF8FE
NTP Text: 526FEF
Control Buttons: DCF8FE
Buttons: DCF8FE

Pack タブ

すべての設定が完了したら、「Pack and Install」を押せばテーマが適用される（警告ぽいのが２回出てくるので、それを許可する必要あり）。

「Pack and Download」を押せば、拡張子が「.crx」のテーマファイルをダウンロードすることができる。DLしたファイルをChromeにドラッグ＆ドロップすれば「Pack and Install」時と同じような処理が始まる。

つまり、ファイルを保存しておけば、いつでも自由にテーマを切り替えられるので、作ったテーマはダウンロードしとくと良い。

一番下は、素材等をZIPでDLできるんだけど、まぁ使わないかな？

とまぁ、こんな感じで

割と簡単にテーマを作ることができるので、カスタマイズしてみたい人はやってみるとよいかとヽ(´ー`)ノ

上記通りに作れば、こんな感じで
タブを開いた時に、透過してるような感じにできる。

下部分は「ブックマークバーを表示 (Ctrl+Shift+B)」しておかないと表示されない。

まぁ画像を色々用意するのが面倒なら、Frame部分だけでも良いカモ？(+'-')

タブ部分はフラットカラーの方が文字は読みやすいですしおすし🍣