はてなブログでは、スマートフォンのアプリ履歴でブログのヘッダーを独自の色で表示するなど、最新のAndroid 5.0およびGoogle Chromeで採用されている新しいデザインのカスタマイズに対応しました。
デザイン設定画面の「スマートフォン」タブの アクセントカラー や、設定画面の「詳細設定」ページの ブログアイコン を設定している場合、それぞれ以下のデザインに反映されます。
- Chromeでブログを閲覧した際に、ブラウザのアドレスバーや端末のステータスバーがアクセントカラーで表示されます
- 「履歴」ボタンを押して表示される新しいカード型のアプリ履歴で、Chromeブラウザのタブがアクセントカラーで表示されます(下図)
- 同じくアプリ履歴で、Chromeのタブにブログアイコンが表示されます(下図)
はてなブログでは、スマートフォンでもより自分らしくブログを表示できるよう、新しい機能に対応していきます。どうぞご利用ください。
※本機能は、以下の条件をすべて満たした環境で有効です。
- 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"
要素に使用しています。