超簡単!オリジナルのGoogle Chromeテーマをオンラインで作れる-ChromeTheme.net - 適宜覚書-Fragments

超簡単!オリジナルのGoogle Chromeテーマをオンラインで作れる-ChromeTheme.net

      2017/03/03

公式Chromeテーマ配布

大抵のWebブラウザには、テーマやスキンといった独自の外装変更を行う機能があります。Google Chromeも例外ではなく、Google Chrome Themes GalleryGoogle Chrome テーマ ギャラリーのように公式にテーマが配布されています。見てのように「けいおん!」や「初音ミク」など少しくだけたものもあったりします。

公式Chromeテーマ配布

公式Chromeテーマ配布

ところで、このテーマをカスタマイズしてみたいと思いませんか?少しChromeのことを勉強すれば、作れなくはありません。chrome テーマ 作り方 - Google Searchのように、manifest.jsonや素材を組み合わせてcrx形式でビルドするだけです。でも、ちょこっとしたテーマを作るのに何だか手間がかかり過ぎるような気がします。

そこで凝ったテーマで無ければ超簡単に独自のテーマを作成出来るオンラインサービスChromeTheme.netを紹介しましょう。

テーマを早速作ってみる

  1. 今回はインスタントで速攻に出来る手順(新規タブ表示の際に背景画像を追加)を説明します。実はもっと凝ったことも出来るのですが、まずは流れを見て下さい。
  2. Google ChromeでCreate Chrome Theme Onlineを開きます。
  3. まずテーマ名を入力します。例として「Stand By Me」にしました。あの友情を題材にした名作映画の題名です。

    テーマ名入力

    テーマ名入力

  4. 次に上部タブを左から二番目の「Images」をクリックします。
  5. すると画面が切り替わり、画像の設定が出来ます。上から以下の画像設定が出来ます。このサービスでは分かりやすいように各項目に項番がふってあり、その番号がブラウザのどの部分に対するものかも図示されています。
    画像設定画面

    画像設定画面

    1. (1)Frame:タブの裏側の部分の背景画像設定(繰り返しのみ)。タブが少ない間は表示されていますが、多くなると右端しか見えなくなります。
    2. (2)toolbar:オムニバーを囲むツールバー、Bookmarkバー、現在開いているタブに背景画像設定(繰り返しのみ)。常時表示される部分です。他の文字との兼ね合いを考慮しつつ設定が必要です。
    3. (3)tab background:現在選択していない非アクティブなタブの背景画像(繰り返しのみ)。
    4. (4)ntp_background:新規タブの背景画像。メイン画面なので大きい領域です。(繰り返しか一枚絵か、位置指定をどこにするか設定出来ます)
    5. ntp_background_repeat:(4)部分について縦横両方へ繰り返し、繰り返しなし、横方向のみ繰り返し、縦方向のみ繰り返しを選択
    6. ntp_background_alignment:(4)画像を繰り返しなしにした場合の位置。
  6. 今回は簡単に(4)のメインの背景画像を繰り返しなしで左下に配置します。

    メインに画像設定してみた

    メインに画像設定してみた

  7. 尚、画像が無くても作れます。今回は例と言うことで一つよろしくお願いします。
  8. さて、次はColors(配色)、Tints(色の濃度?)などの設定がありますが、今回は簡単に済ませるので、激しくスルーします><。
  9. では、テーマとしてインストールまたは配布出来る形式にします。「Pack」タブを選択します。
  10. まず、自前の今使っているChromeにインストールしてみましょう。「Pack and install theme」ボタンをクリックします。

    手元のChromeにインストール

    手元のChromeにインストール

  11. するとChrome画面下部にインストール許諾確認が表示されますので「続行」ボタンをクリックします。

    続行

    続行

  12. すると、ツールバー直下にテーマ「Stand By Me」がインストールされた旨表示されます。ここで「やーめた」という場合は「削除」ボタン、そのままで良ければ「x」ボタンをクリックします。

    インストール完了

    インストール完了

  13. では、結果を確認してみます。今回は、新規タブに対して背景画像を追加したものですので、新規タブを開きます。すると、こんな感じです。左下の隅っこからいつもダンディな彼があなたを見ています(^^。

    いつも見てるよ!隅っこから…

    いつも見てるよ!隅っこから…

  14. さて、ではこれを皆に配布したい場合はどうするか?先のPackで「Pack and download theme」ボタンをクリックします。crx形式のファイルをダウンロードできます。

    crxファイルのダウンロード

    crxファイルのダウンロード

  15. このファイルをどこかしら他の方が見られるDropboxやWebサーバなどWeb上に置けば配布が出来ます。今回のサンプルテーマ「Stand By Me」もこのリンクからインストール出来ますよ(^^

出来あいの非公式テーマが欲しい!とか

作成ツールだけではなく、出来あがったテーマの配布もGoogle Chrome Themeでは出来ます。

既存の非公式テーマ入手や共有方法

既存の非公式テーマ入手や共有方法

上部にあるNewTheme(新着テーマ)やCoolTheme(素晴らしいテーマ)などから既に出来あがったテーマのインストールが出来ます。見てのようにサムネイルもあるのでインストール後の感じも予測出来ます。またShareTheme(テーマの共有)で自前のWeb領域を持ってなくても配布は可能です。

テーマ共有

テーマ共有

念のためですが、著作権や頒布権が無い画像はアレです。風紀委員をやる心積もりは毛頭ありませんが、ここにシェアするのはナニですよ、うん。ちなみに今回のサンプルはそこらへんクリアしているものですからね(^^。

適宜覚書-Fragmentsは、筆者が興味をもった様々な情報やネタを筆者が忘れても後で思い出せるよう覚書として公開するBlogです。Google Chrome拡張、Facebook、Google、Twitter、Windows、各種Webアプリなどを扱うことが多いです。この覚書が、もし何かお役立ちになれば幸いです。

 - Google, Webサービス, Webブラウザ, ツール , , , ,