行き着く先はあんこ

Android版Chromeのタブのカラーをカスタマイズしてみた

android-chrome-tabcolor

Android版Chromeバージョン39から、ブログのテーマカラーをツールバーに使うことができるようになりました。

初期状態はグレーで表示されますが、メタタグで色を指定できます。

Androidブロガーはぜひとも設定すべし。というわけで自分も早速設定してきたので、その手順を紹介します。

参考にしたのは次のサイトです。

Android版Chrome v39はAndroid 5.0(Lollipop)でタブカラーのカスタマイズをサポート

Support for theme-color in Chrome 39 for Android

スポンサーリンク

指定はメタタグだけでできるよ

設定はとても簡単で、<head>~</head>内にメタタグでカラーを指定するだけです。

<meta name="theme-color" content="カラーコード">

このブログの場合だとテーマカラー?である「#30ABD5」を指定しました。

<meta name="theme-color" content="#30ABD5">

Bloggerの場合

Bloggerの場合、「テンプレート」→「HTMLの編集」から<head>~</head>内に入力するのですが、先ほどのコードだとエラーになるので最後を「/>」で閉じると問題なく保存できるようになります。

<meta name="theme-color" content="カラーコード"/>

Android端末で確認してみる

すべてのAndroid端末でタブのカスタムカラーが適応されるわけではなく、バージョンが5.0(Lollipop)以上の端末のChromeでのみカスタムカラーが適応されます。

また、「タブとアプリの統合」が有効になっている必要もあります。

これはChromeのメニューから「設定」→「タブとアプリの統合」で有効にすることができます。

「タブとアプリの統合」を選択する。「タブとアプリの統合」をオンにする。

以上の条件を満たしたAndroid端末のChromeでチェックするとこんな感じになります。

左:初期状態 右:色指定

初期状態のChromeのタブの色はグレー。色を指定するとChromeのタブは指定した色になる。

左:初期状態 右:色指定

アプリ使用履歴での初期状態のタブの色はグレー。アプリ使用履歴でも指定した色になっている。

高解像度のファビコンにも対応

タブの色を指定できるだけでなく、高解像度の192×192のファビコンも指定できます。

指定しない場合は、ブログドメインの最初のアルファベットが表示されます。

<link rel="icon" sizes="192x192" href="ファビコンのurl">

これも同様に<head>~</head>に入力します。Bloggerの場合は「/>」で閉じてください。

<link rel="icon" sizes="192x192" href="ファビコンのurl"/>

さいごに

思ったより簡単に設定できます。でもこれ、設定しているサイトがほとんど無いんですよね。

確かに必要性はありませんが、ユーザーが自分のブログを見た時に「他のブログと何かちがう」なんて感じてくれたらいいなと自分なりは思っています。

他にも、少なからずAndroidの記事を書いているので無視できない、なんてのもあったりします。

気づかれることは少ないかもしれませんが、ぜひともAndroidブロガーには設定してほしいなと思います。

では!

スポンサーリンク

スポンサーリンク

コメント

  1. 気まぐれカラス

    2016.09.10 11:24

    なんか最近、いつの間にかタブの色が変わることがあるなぁと思っていたらこういうことだったのですね。
    Googleもこれを宣伝したいのか、Googleの検索結果ページも普段は灰色なのに何らかの条件でタブが赤や茶色になっているときがあります。

    ちなみに私の端末はAndroid 4.1.2 Jerry bean+Google Chrome 52・・・古いけど特にLolipopだけとかではないみたい。

    • かずらかずら(管理人)

      2016.09.25 21:47

      カラフルなのがいかにもGoogleって感じがします。

コメントを残す