本サイトをChromeのtheme-colorタグに対応してみた

  |   2019/03/19 | 45 views
 0

こんにちはー、ニアです。

そういえばAndroidのChromeで、QiitaやGitHubにアクセスすると、上部のURLエリアの色が変わりますね。

※Xperia XZ1(Android 9.0)でのスクリーンショットです。

これどうやって実装しているのだろう?・・・と調べてみたら、実装の仕方があったので、早速本サイトにも実装してみました。

設置の方法

https://developers.google.com/web/fundamentals/design-and-ux/browser-customization/#color_browser_elements

HTMLの<head>タグ内に、以下の<meta>タグを入れるだけ!

<meta name="theme-color" content="#2464FF">

本サイトはWordPressを使っているので、テーマのヘッダー(header.php)を編集して設置しました。

Nia02.png
WordPressのテーマ開発で、このtheme-colorを設定するオプションを入れて、ユーザーの好みの色に設定できるようにするのもいいね!
この記事をシェアする
Chronoir.netのRSSフィードを購読する

ニア(Nia)

サーバー・フロント・DB・インフラ(クラウド)エンジニア(目指すはフルスタック)。主にC#/PHPを使っています。最近はDockerやWebアプリ、モバイルアプリ開発(Xamarin)を探求中。好物は紅茶とコーヒー、シラス丼、趣味は写真撮影と音ゲーです

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください