ブログ表示時のChromツールバー色変更 Blogger·Vaster2カスタマイズ#11

どうも。
昨日の出来事ですが、"Yahooでググります。"と本気なのか冗談なのかわからない言葉が耳からはなれません…。

さて、ブログの表示を少し変えてみようかと。

Chrome(Android)ツールバーの色を変更する

スマホでブログやサイト等を拝見しているとChromeの上部に表示されるツールバーや
タブ表示にすると枠にも色が付いています。

どの様な仕様なのか調べた所、metaタグ'theme-color'を使い、カラーコードを指定するだけで色を付ける事が可能な様です。

なので、当ブログのテンプレートVaster2にも適用してみました。
*他のテンプレートでも同じです。

HTMLにmetaタグ'theme-color'を追加します。

いつものようにバックアップを取ってHTMLを編集します。

Bloggerのテーマ>>HTML編集画面で<head>内にmetaタグ'theme-color'を追加します。

Vaster2の<head>内の最初の方にmetaタグが幾つかあるので、自身で分かり易い箇所に以下のコードを追加します。

<meta content='カラーコード' name='theme-color'/> 
contentの値’カラーコード’には好みのカラーコードを入れます。

テーマを保管してChrome(Android)でブログを開くと適用されています。

当ブログは適用済なので色が付いているのが判ると思います。
Chrome(Android)でタブの色を変更したスクリーン
Androidではこのように表示されます。

まとめです。

些細なことですが、ブログの印象は変わるので、自身のブログのテーマカラーに拘る方にオススメだと思います。

ワタシは特に拘りは無いですが、やってみましたが。

当方Android環境でChrome使用の基に変更しています。その為iOSのChromeで表示されるかわかりません。
また、その他のブラウザでも当機能が有効かわかりませんのでご了承下さい。


0 件のコメント:

広告

当ブログの人気投稿

ブログ アーカイブ