web-dev-qa-db-ja.com

Lollipopで最新のChromeバージョンのヘッダーバーとアドレスバーの色を変更するにはどうすればいいですか？

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

Chrome for Androidenter image description here。

これを動作させるにはAndroid 5.0 Lollipopが必要で、Chromeの タブとアプリのマージ は On に設定する必要があると思います。

androidhtmlgoogle-chrome
517
Arpad Gabor

検索して解決策を見つけました。

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

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

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

<!-- 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">
448
Edoardo L'Astorina

たとえば、背景を好みの/ブランディングカラーに設定するには

HEADセクションのHTMLコードにBelow Meta propertyを追加

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

例

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

下の画像で、Chromeがあなたのtheme-colorプロパティをどのように採用したかを述べました

enter image description here

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対応のメタタグを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を参照してください。

例えば：

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

Screenshot using black-translucent

スクリーンショットは黒

Screenshot using black

72
Ravi Delixan

公式文書から 、

たとえば、背景色をオレンジ色に設定するには、次のようにします。

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

さらに、Chromeは、提供されたときに美しい高解像度のお気に入りを表示します。 Android版Chromeでは、ユーザーが提供する最も高い解像度のアイコンを選択します。192×192pxのPNGファイルを提供することをお勧めします。例えば：

<link rel="icon" sizes="192x192" href="Nice-highres.png">
38
khandelwaldeval