GoogleChromeのテーマを作ってみる！

>~~*現在、Chromeの拡張機能などがダウンロードできなくなっています。
解決方法が見つかり次第報告します。
又、拡張機能などをダウンロードする方法を知っている方は教えていただけるとありがたいです。*~~

**無事解決しました「Apply theme」を選択すると、上の方に追加しますか？と表示されるのでOKすると追加されます。**


#はじめに

タイトルの通りGoogleChromeのテーマを[**ThemeBeta - GoogleChrome**](https://www.themebeta.com/)で作ってみます

##GoogleChromeのテーマとは
Google大先生曰く
>ブラウザをパーソナライズできるカスタム ブラウザ スキンです。

だそうです
*(パーソナライズとは、個人に応じて変更したり作り変えたりすることです)*

##テーマを作る方法
1.[**MyChromeテーマ**](https://www.google.co.jp/search?q=mychrome%E3%83%86%E3%83%BC%E3%83%9E&rlz=1C5CHFA_enJP745JP745&oq=mychrome&aqs=chrome.1.69i57j0l5.4175j0j7&sourceid=chrome&ie=UTF-8)で作る（今回は使用しません）
詳しくはURLから探してみてください。

2.[**ThemeBate - GoogleChrome**](https://www.themebeta.com/)で作る（今回はこれを解説します）

個人的な感想だと**MyChrome**テーマよりも**ThemeBate - GoogleChrome**の方が**簡単**だと思います

#ThemeBate - GoogleChromeでテーマを作ってみる！
さぁ、やっと本題
##必要なもの
高画質の画像（背景用）
PCのデスクトップ背景に使えるぐらい高画質なものがいいです

##作成
まずは[**ThemeBate - GoogleChrome**](https://www.themebeta.com/)を開いてください

そうするとこのようなページが開くと思います
![スクリーンショット 2018-03-20 13.00.00.png](https://qiita-image-store.s3.amazonaws.com/0/237205/b9ef22fb-08f3-dfac-80a4-469f2911e554.png)

テーマの画像は時間が経てば変わると思います
次に**THEME CREATOR**を選択してください
そしたらこのページが開きます
![スクリーンショット 2018-03-20 13.02.23.png](https://qiita-image-store.s3.amazonaws.com/0/237205/d1b39ec4-aa25-7f6c-f64a-8f47b2681583.png)

まずは**1. Upload an Image**から背景の画像を選択します

<details><summary>今回はこのQiitaのトップ画像で作ってみます</summary><div>

<img width="1423" alt="スクリーンショット 2018-03-20 13.15.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/237205/590046a9-4ec0-34aa-d99f-573645b3a815.png">

</div></details>

そうすると多分こうなるでしょう
<img width="1234" alt="スクリーンショット 2018-03-20 13.19.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/237205/2f6cb4a4-0b16-69d2-a095-a07d31017219.png">
みたらわかる通り ずれます
###**Background Image**から調整していこうと思います

左から順に

---

- 画像を寄せる場所
    - `left`（左）
    - `center`（画面の中心）
    - `right`（右）

---
- 画像を寄せる場所
    - `top`（上）
    - `bottom`（下）

---
- わからない
    - `no repeat`
    - `repeat XY`
    - `repeat X`
    - `repeat Y`
   
---
- 画像の大きさ
    - `normalsize`（そのまま）
    - `custom`（右にあるScaleから調節）
    - `fill screen`（ぴったりのサイズにする。**縦横比も変化する**）
    - `fill to screen`（ぴったりのサイズにする。**縦横比は変化しない**)
   
---

という感じです　
[center]　[bottom]　[no repeat]　[fillscreen]迷ったらこれでいいと思います

###次にタブの**Images**に移動して色を調整しましょう
カーソルを合わせると赤く表示される部分がその色になります

---

- `NTP Background`

単色にしたい場合は変更する
画像を選択した人は何もしなくていい

---
- `Frame`

周りのフレームの色
`Choose Image`を選択すれば単色ではなく画像にすることもできる

---
- `Toolbar`

ツールバーの色
同じく`Choose Image`を選択すれば単色ではなく画像にすることもできる

---
- `Tab Background`

タブの背景色
同じく`Choose Image`を選択すれば単色ではなく画像にすることもできる

---
- `Frame Overlay`

画像を貼った時に端に空白部分ができた場合の背景色
同じく`Choose Image`を選択すれば単色ではなく画像にすることもできる

---
- `NTP Attribution`

右下にクレジット等の画像を入れることができる

---
まぁこんな感じでしょう
~~そろそろ書くのが疲れてきた~~

###その次のタブ**Color**に移動しましょう

---
- `Status Bar`
    
ステータスバー（ページ読み込み中のバー）の背景色

---
- `Tab Text`

ステータスバーの文字の色

---
- `Background Tab Text`

タブの文字の色

---
- `Bookmark Text`

ブックマークバーの文字の色

---
- `NTP Text`

Chromeアプリの文字の色

---
- `Control Buttons`

新しいタブを追加するボタンと閉じるなどのボタンの色

---
- `Buttons`

一つ前のページに戻る、一つ後のページに戻るそして再読み込みのボタンの色

---

これで細かいとこまで調整できたでしょう
ちなみに僕が作るとこうなりました
<img width="1440" alt="スクリーンショット 2018-03-20 14.19.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/237205/4243f7b8-af09-ebff-b36c-a2671df0df18.png">

あとは**保存**するだけですね

**3.Pack and Install**からPCにダウンロードするか
**4.Save Online**　で全世界の人に共有するか
選んでください
基本的には**3.Pack and Install**でいいと思います。
>*現在、Chromeの保護機能でダウンロードができなくなっています。Save Onlineだと使用できるのでそちらを使ってください。解決法が見つかり次第　編集させていただきます*

**解決しました。普通に両方ともできます。**

#最後に
GoogleChromeのテーマって色々あっていいですよね
ちなみにいつもは『ご注文はうさぎですか』の画像を適当に選んだの貼ったテーマを使っています。

まだ使いこなせてる感はありませんが記事書いてみました・・・どうですかね・・・