はてなブログ開発ブログ

はてなブログからの公式のお知らせを発信します。

スマートフォンのアクセントカラーやブログアイコンを、AndroidとChromeの新しいデザイン機能に対応させました

はてなブログでは、スマートフォンのアプリ履歴でブログのヘッダーを独自の色で表示するなど、最新のAndroid 5.0およびGoogle Chromeで採用されている新しいデザインのカスタマイズに対応しました。

デザイン設定画面の「スマートフォン」タブの アクセントカラー や、設定画面の「詳細設定」ページの ブログアイコン を設定している場合、それぞれ以下のデザインに反映されます。

  • Chromeでブログを閲覧した際に、ブラウザのアドレスバーや端末のステータスバーがアクセントカラーで表示されます
  • 「履歴」ボタンを押して表示される新しいカード型のアプリ履歴で、Chromeブラウザのタブがアクセントカラーで表示されます(下図)
  • 同じくアプリ履歴で、Chromeのタブにブログアイコンが表示されます(下図)

アプリ履歴でアクセントカラーとブログアイコンを表示

Android 5.0の新しいアプリ履歴でアクセントカラーとブログアイコンを表示

はてなブログでは、スマートフォンでもより自分らしくブログを表示できるよう、新しい機能に対応していきます。どうぞご利用ください。

※本機能は、以下の条件をすべて満たした環境で有効です。

  • OS: Android 5.0, Lollipop
  • ブラウザ: Google Chromeバージョン39以降
  • Chromeのオプションで「タブとアプリを統合」を ON にしている
  • はてなブログのデザイン設定で、レスポンシブデザインを使用していない

なお、アクセントカラーは上記の環境以外でも、スマートフォンのブラウザやアプリでブログを表示した際に、ヘッダーのアイコンやリンク色として利用されます。ぜひ設定してみてください。

技術的な解説:metaタグのtheme-colorに対応しました

本機能は、Chrome 39で採用されたmetaタグのtheme-colorに対応したもので、アクセントカラーを次のように使用します。

<meta name="theme-color" content="#62c7c9">

また、ブログアイコンは、ホーム画面にリンクを追加するときにも表示されるlink rel="icon"要素に使用しています。