Simplicity2でAndroid端末のChromeのタブの色を変えてみる

    こんばんちわ。ひろーちか(@hir0_chika)です。

    私はAndroidのスマホを使っているわけですが、今までサイトによって「タブの色が変化する」ことがあり、「すごい!」とは思っていましたが、やり方は知りませんでした。

    先ほど、ふと気になって調べてみると超絶簡単に出来ることが判明したので、Simplicity2ではどのように適用するのかを書いておくことにしました。

    スポンサーリンク

    概要

    Chrome for Android バージョン39以降でサポートされた、「theme-color」という機能でこれを実現します。
    (2017/10/8現在、Chrome for Androidの最新版はバージョン61)

    Support for theme-color in Chrome 39 for Android – Google Developersアイコンとブラウザの色 – Google Developersに詳しい説明が載っています。

    要は、headタグ内にmetaタグを埋め込むだけでok。とても楽ちん。

    適用手順

    ※Simplicity2-childが有効になっていることが前提です。

    今回はheadタグ内、つまりヘッダに特定のコードを追加したいので、wp-content/themes/simplicity2-child/header-insert.php をいじります。

    WordPressの「外観」→「テーマの編集」、もしくは直接サーバにSSHしてファイルを編集します。何もいじってなければ以下のようになっていると思います。

    こいつを、こうじゃ。

    あとは保存してあげればokです。

    今回変更したのはPHPファイルのみなので、基本的にサーバプロセスの再起動は不要です。

    どうしても適用されない場合は、サーバキャッシュやブラウザキャッシュの削除を試してみるのが良いと思います。

    私はこんな風に色を変えてみました。

    完全に自己満足以外の何者でもない機能ですが、こういう遊び心は大事だと思います。

    スポンサーリンク