独自のGoogleChromeテーマを作成する方法

click fraud protection

Webブラウザの外観をカスタマイズしたいと思ったことはありませんか? Google Chromeのテーマは、まさにそれを行うために使用できます。 Chromeテーマストアには、宇宙のテーマから車や美しい風景まで、さまざまなオプションがありますが、 これらのオプションはまさにあなたが望むものです、またはあなたが代わりにあなた自身の写真の1つを背景として持つようにChromeをカスタマイズしたいのであれば? まあ、幸いなことにあなたはまさにそれを行うことができます。

独自のテーマを作成する方法は2つあります。 Chromeには、新しいタブページの背景画像をインポートし、多数のプリセットからユーザーインターフェイスの配色をカスタマイズできるシンプルな組み込み関数があります。 組み込みのChrome機能に必要なカスタマイズオプションがない場合は、次のWebサイトにアクセスしてください。 ThemeBeta 機能が豊富でありながら使いやすいChromeテーマクリエーターでカバーしましたか(インストールプロセスはもう少し複雑ですが)。 この記事では、両方のツールを使用して独自のChromeテーマを作成するプロセスについて説明します。

シンプルな組み込みのChromeツール

組み込みのChromeテーマエディタを使用するには、新しいタブを開きます。 新しいタブページの右下隅に鉛筆アイコンがあります。これをクリックして、Chromeの外観をカスタマイズします。

鉛筆アイコンをクリックして、テーマエディタを開きます。

鉛筆アイコンをクリックすると表示されるポップアップウィンドウで、最初のオプションは背景画像を構成することです。 ここでは、非常に限られた数のプリセットオプションから選択することも、独自の画像をアップロードすることもできます。 この背景画像は新しいタブページにのみ適用され、実際のWebサイトの背景にはなりません。

新しいタブページの背景画像を選択します。

背景画像を選択したら、[色とテーマ]タブに移動します。 ここでは、色の組み合わせの選択から選択できます。 これらの色のオプションは、Chromeユーザーインターフェースを形成するタブと検索バーおよびブックマークバーの色に影響します。 つまり、アクセスするほとんどのサイトでは、ブラウザのトップバーが常にこの色であるという理由だけで、これらの色は背景画像よりも目立ちます。

プリセットの配色を選択します。

プリセットの配色がどれも希望どおりでない場合は、左上の配色オプションを使用して独自の配色を選択でき、さまざまな配色から選択できます。 色を選択するには、まず左上の記号をクリックしてから、表示されるポップアップを使用して色を選択します。 カラースペクトルの十字線を調整してシェードを取得し、ウィンドウの右側にある黒い矢印を調整してトーンの明るさを選択します。 これがどのように機能するかわからない場合は、黒い矢印を上下に動かすと、色が明るくなったり暗くなったりします。 より濃い色合いの場合は、十字線を上部近くに、矢印を中央に設定します。 淡い色の場合は、十字線を少し下に移動し、矢印を上に移動します。

必要な色を選択したら、右下の[カスタム色に追加]をクリックします。 次に、左下の「カスタムカラー」リストからカスタムカラーを選択し、「OK」をクリックして適用します。 カスタム配色を選択する場合は、1つの色しか選択できません。Chromeは、2つ目の類似した色を選択して、最適と思われるテーマを完成させます。

ヒント:Chromeは、ほとんどの場合、選択した色が2つのテーマの色のうち暗い色であると想定し、明るい2番目の色を選択します。 それに応じて選んでください!

カスタム配色を選択します。

背景画像とカラーセットに満足したら、[完了]をクリックしてカスタムテーマを保存すると、準備が整います。

サードパーティのテーマがシンプルに

シンプルなテーマが必要な場合は、Chromeの組み込みツールで十分ですが、より個性が必要な場合は、 ThemeBeta より多くの制御を提供します。 このWebサイトでは、前景タブと背景タブの色、タブバーのテキストなどを手動で変更できます。

まず、ThemeBetaのWebサイトにアクセスする必要があります。 ユーザーが送信したテーマを閲覧できます ホームページ、またはあなたは彼らに直接行くことができます テーマクリエーターページ あなた自身で始めるために。 テーマ作成者に入った後の最初のステップは、背景画像を選択することです。 「1。 「画像をアップロード」してから、ハードドライブから画像をアップロードします。 この画像はテーマの基礎となり、新しいタブページの背景画像になります。

ヒント:アップロードする画像は、PNGまたはJPGファイル形式である必要があります。これは、これらがサポートされている唯一の形式であるためです。 画像が違う場合は、オンラインコンバーターを使用してください。

アップロードした画像が正しく表示されない場合は、ズームインしすぎているか、側面または上部にバーがある可能性があります。その場合は、[背景画像]オプションを変更してみてください。 それぞれ、画像が繰り返される場合は、水平方向の配置、垂直方向の配置を構成します。 画面に対して小さすぎる、画像を画面に合わせて拡大縮小する方法、および手動の拡大縮小調整。 満足のいくものが見つかるまで、オプションをテストしてください。

背景画像の位置を設定します。

画像がアップロードされると、ページの右側のプレビューが更新され、テーマがどのように表示されるかが示されます。 2番目のステップは「2。 [色の生成]をクリックすると、このボタンは、アップロードした画像にある色を使用して、残りのユーザーインターフェイスで使用する同様の色の口蓋を作成します。

自動生成された配色が希望の外観に合っている場合は、ここからスキップして インストール手順. ただし、前景タブ、背景タブ、ツールバーなどの色を手動で構成する場合は、以下の詳細構成セクションで詳細を説明します。

高度な構成

左上には、高度な構成オプションの2つのタブがあります。最初のタブは、「画像」です。 ここでは、特定の要素の背景画像を構成できます。 各オプションの上にマウスを置くと、その設定が変更する要素がプレビューで赤で強調表示されます。

オプションの上にマウスを置くと、ユーザーインターフェイスのどの部分が変更されているかがわかります。

ヒント:NTPは「新しいタブページ」の略で、この頭字語で始まるオプションは新しいタブページにのみ表示され、他のオプションは他のページに表示されます。

  • 「NTPBackground」はメインの背景を構成します。以前に画像をインポートした場合、これはすでに「ロード」されています。
  • 「フレーム」は、タブリスト、検索バー、ブックマークバーを除くユーザーインターフェイスを構成します。
  • 「ツールバー」は、アクティブなタブ、ブックマークバー、および検索バーの周囲の領域を構成します。
  • 「タブの背景」は、非アクティブなタブの背景色を設定します。
  • 「フレームオーバーレイ」を使用すると、「フレーム」内の画像をオーバーレイする2番目の画像を構成できます。
  • 「NTPアトリビューション」は、通常透かしの目的で、新しいタブページの左下隅に画像を追加します。

ヒント:画像をアップロードしていて、見た目が気に入らない場合は、関連する[読み込み済み]マーカーの横にある[X]ボタンをクリックして画像を削除できます。 画像をアップロードするとその要素の背景色が変更された場合は、手動で元に戻すか、[基本]タブの[色の生成]をもう一度クリックして配色をリセットできます。

2番目の高度なタブのタイトルは「色」です。 ここでは、前のページのオプションの横にボックスがありましたが、そのボックスを使用してカラーピッカーを開き、それぞれの要素の単色を選択できます。 もう一度、構成オプションの上にマウスを置くと、プレビューで影響を受ける要素が赤で強調表示されます。

ボックスをクリックして、それぞれの要素のカラーピッカーを開きます。
  • 「ツールバー」は、新しいタブページの左下にあるThemeBeta属性ラベルの背景色を設定します。
  • 「タブテキスト」は、タブリストで現在アクティブなタブのテキストの色を設定します。 また、新しいタブページの左下隅にあるThemeBetaアトリビューションテキストの色も設定します。
  • 「背景タブテキスト」は、タブリストの非アクティブなタブのテキストの色を設定します。
  • 「ブックマークテキスト」は、ブックマークバーのアイテムのテキストの色を設定します。
  • 「NTPテキスト」は、ページの中央にあるテキストまたは推奨/通常のページリンクの色を設定します。
  • 「NTPリンク」は効果がありません。
  • 「コントロールボタン」は、右上隅にある最小化、最大化、および閉じるボタンの色を構成します。
  • 「ボタン」は、進む、戻る、リロード、ホームボタンの色を設定します。

すべての詳細オプションを希望どおりに構成したら、インストールプロセスに進むことができます。

サードパーティのテーマのインストール

セキュリティ上の理由から、Googleでは拡張機能とテーマのみをChromeウェブストアからインストールできるようになりました。 カスタムテーマをインストールするには、開発者向け機能を有効にする必要があります。 残念ながら、この変更により、[基本]タブと[パック]タブの両方にある単純な[パックしてインストール]ボタンが機能しなくなります。 「パックしてインストール」方法を試すと、エラーメッセージが表示されます。

サードパーティのCRXファイルをChromeにインストールすることはできません。

これを回避するには、[パック]タブに移動し、[Zipファイルをパックしてダウンロード]をクリックします。

「パック」タブの「Zipファイルをパックしてダウンロード」ボタンをクリックします。

zipファイルがダウンロードされたら、ファイルを抽出してハードドライブに保存します。 ダウンロードしたファイルをダブルクリックし、ファイルビューアの上部にある[抽出]を選択します。 ファイルを抽出する場所を選択する必要があります。 それらを保存した場所を覚えておくと、より簡単に再度アップロードできます。

ヒント:テーマが何であるかを示すためにフォルダーの名前を変更した場合、それを再利用したい場合は、将来、フォルダーを再度見つけるのが簡単になる可能性があります。

ZIPファイルからファイルを抽出し、ハードドライブに保存します。

次のステップはChrome拡張機能のページです。 右上隅の[その他のツール]、[拡張機能]の順にある3つのドットをクリックするか、[拡張機能]をクリックしてアクセスできます。 ここ.

3つのドットをクリックし、[その他のツール]> [拡張機能]をクリックします。

拡張機能メニューが表示されると、ページの右上隅に「開発者モード」とマークされたスライダーがあります。 有効にします。 開発者モードを有効にすると、左上隅に3つのボタンが表示されます。 必要なのは「アンパックでロード」です。 「解凍してロード」をクリックし、先にzipファイルから抽出したフォルダをインポートします。

開発者モードを有効にしてから、「解凍してロード」をクリックします。

ヒント:親フォルダーに含まれる「画像」フォルダーではなく、親フォルダーをインポートする必要があります。 以前に名前を変更しなかった場合は、「theme1234567890」のような名前になります

テーマがインポートされると、現在のタブにアラートが表示され、テーマがインストールされたことを確認し、元に戻すボタンが表示されます。 このアラートを閉じる前に、新しいタブを開いて、すべてが希望どおりに表示されることを確認してください。

結果に満足していることが確実になるまで、確認アラートを非表示にしないでください。

テーマが期待どおりにならなかった場合は、[元に戻す]をクリックして、テンプレートをもう一度変更してみてください。 結果に満足したら、「拡張機能」ページを閉じて、光沢のある新しいカスタムChromeテーマでブラウジングを続けてください。