Lollipopの最新バージョンのChromeでヘッダーバーとアドレスバーの色を変更する方法

578

このトピックについてはまだ何も見つかりません。概要でアドレスバーの色とヘッダーの色を変更する機能が本当に好きですか？これを行う簡単な方法はありますか？

Android向けChrome ここに画像の説明を入力してください。

これを機能させるにはAndroid 5.0 Lollipopが必要であり、ChromeのMerge Tabs and AppsをOnに設定する必要があると思います。

android html google-chrome

— アルパドガボール
ソース

2016年1月以降、（Lollipopで）これを機能させるために[タブのマージ]オプションは不要になりました。

— Skuld 2016年

1

それは...今、キットカットのために、このようにもだ

— Revetahwは回復モニカ言う

@Skuld「最近のアプリ」ビューで色を表示するにはタブを結合する必要がありますが、「タブとアプリケーションを結合」を無効にしても、ChromeでWebサイトを表示すると色を表示できます。しかし、いつか修正して、Chrome内のタブリスト（「タブとアプリのマージ」が無効になっているときに表示される）にも鈍い灰色ではなくテーマの色が表示されるようにしたいと思います。

— ADTC 2016

1

@ADTCは、タブを切り替えるときに色が失われることについて話しているのですか？もしそうなら、そうです、それは理想的ではありませんが、タブをクリックすると色を取り戻すので、それほど大したことではありません。

— 重要

1

@Skuld、「タブとアプリのマージ」をオフにすると、タブを切り替えるとこのビュー（リンク）が表示されます。このビューでは、すべてのタブが灰色になっています。テーマカラーがこのビューに残っているといいですね。「タブとアプリのマージ」がオンになっていて、アプリスイッチャーを開いたときの「アプリのようなタブ」のテーマ色と同様です。（PS：個人的には、たくさんのタブがあるのでマージは嫌いです。それから、たくさんのアプリも持っています。それらを分離しておくか、気が狂います >.< ）

— ADTC

791

いくつかの検索の後に解決策を見つけました。

あなたは追加する必要があり<meta>、あなたの中のタグを<head>含むname="theme-color"コンテンツ値としてごHEXコードで、。例えば：

<meta name="theme-color" content="#999999" />

— アルパドガボール
ソース

19

ありがとう。詳細については、html5rocksもチェックアウトしてください。updates.html5rocks.com

— 2014/11

4

これを無効にする設定がChromeにありますか？色付きのアドレスバーが我慢できない。デフォルトの色が欲しいだけです。

— ジェームズ

@ジェームズ-これはあなたが好きな修正ではないかもしれませんが、「アプリとタブをマージする」設定をオフにすることで色の変更を止めることができます。

— Novocaine

4

本当に？[アプリとタブを結合]設定をオフにしてMarshmallowを使用していますが、アドレスバーに色が付いたままです。多分彼らは「バグを修正」した。

— user711413

3

必ずしも16進数の色である必要はありません。有効なCSS色であれば機能します。

— ボグダンM.

501

metaAndroid、iPhone、Windows Phoneをサポートするには、実際には3つのタグが必要です。

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#4285f4">

— エドアルドラストリーナ
ソース

そして、ローディングバーはどうですか？トップバーを暗くしてローディングバーを白くするウェブサイトを見たことがありますが、コードを分析するスニペットが見つかりませんか？

— 初心者

19

注：Appleの開発ノートによると、「このメタタグは、で説明されているように最初にフルスクリーンモードを指定しない限り、効果がありませんapple-apple-mobile-web-app-capable。」

— Yan Foto

@YanFotoは実際に非常に役立つ情報です。どうすればいいですか？

— viriato 2016

44

iOS apple-mobile-web-app-status-bar-style属性はblack、black-translucent or デフォルトのみをサポートします-カスタム色は使用できません。

— シクソン、2014年

2

使用black-translucentすると、上部バーが白いテキストで透明になり、おそらく次のようになります

— 99問題-構文は1つではありません

93

たとえば、背景をお気に入り/ブランドカラーに設定するには

HEADセクションのHTMLコードにBelow Metaプロパティを追加します

<head>
  ...
  <meta name="theme-color" content="Your Hexadecimal Code">
  ...
</head>

例

<head>
  ...
  <meta name="theme-color" content="#444444">
  ...
</head>

下の画像では、Chromeがどのようにテーマカラープロパティを取得したかについて述べました

Firefox OS、Safari、Internet Explorer、Opera Coastでは、ブラウザの要素、さらにはメタタグを使用するプラットフォームの色を定義できます。

<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Safari固有のスタイル

ガイドラインからここにドキュメント

Safariユーザーインターフェイスコンポーネントを非表示にする

スタンドアロンモードをオンにするには、apple-mobile-web-app-capableメタタグをyesに設定します。たとえば、次のHTMLはスタンドアロンモードを使用してWebコンテンツを表示します。

<meta name="apple-mobile-web-app-capable" content="yes">

ステータスバーの外観の変更

デフォルトのステータスバーの外観を黒または黒の半透明に変更できます。黒の半透明では、ステータスバーは押し下げられるのではなく、全画面のコンテンツの上に表示されます。これにより、レイアウトの高さが高くなりますが、上部が遮られます。必要なコードは次のとおりです。

<meta name="apple-mobile-web-app-status-bar-style" content="black">

ステータスバーの外観の詳細については、詳細については、apple-mobile-web-app-status-bar-styleを参照してください。

例えば：

黒の半透明を使用したスクリーンショット

黒を使用したスクリーンショット

— ラビデリクサン
ソース

42

公式ドキュメントから、

たとえば、背景色をオレンジ色に設定するには：

<meta name="theme-color" content="#db5945">

さらに、Chromeが提供されると、美しい高解像度のファビコンが表示されます。Chrome for Androidでは、提供する最高の解像度のアイコンが選択されるため、192×192ピクセルのPNGファイルを提供することをお勧めします。例えば：

<link rel="icon" sizes="192x192" href="nice-highres.png">

— デヴァル・カンデルヴァル
ソース

22

これは、無関係な情報を追加することを

— 除い

9

@ igorsantos07公式ドキュメントへのリンクを追加したかっただけです。それだけです

— Deval Khandelwal

4

ドキュメントへのリンクは、選択した回答に欠けているものだと思いました。私がここにたどり着いたとき、それは私が探していたものです。ありがとうございました。

— ジャスティンフォース

これは冗長です

— taimur alam