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

  |   2019/03/19 | 59 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(最近はTypeScriptも)を使っています。最近はDockerやWebアプリ、UWPやモバイルアプリ開発(Xamarin)、ブロックチェーン等を探求中。好物は紅茶とコーヒー、シラス丼、趣味は写真撮影と音ゲーです

コメントを残す

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

*

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