[Blogger] スマホのアドレスバーをブログに合わせた色に変更する方法（テーマカラー設定）

スマホでサイトを見ていると、アドレスバーの色が変わる事がありませんか？

あれはサイト側が指定している色に変更しているんです。

以前使っていた公式テーマEmporioではこの仕様がありました。

しかし、現在使用しているQooQやF-lightなどの外部テーマにはこの仕様がありません。

せっかくなら取り入れてみたいですよね。

本記事ではBloggerブログでスマホのアドレスバーのテーマカラーを指定する方法について解説します！

テーマカラーを指定するHTML編集

HTMLの編集手順

左のメインメニューから【テーマ】を選択し、カスタマイズ横の【▼】をクリックして【バックアップ】をしましょう。

それが終わったら、同じ画面の【HTMLを編集】をクリックして編集画面を開きます。

HTMLの編集画面では、Ctrlキー+FキーでSearch: という検索欄を表示させることで検索ができます。

HTMLの編集が終わったらプレビュー画面で確認して、保存をします。

テーマカラー用コード

コードはhead内に書き加えます。

今回は分かりやすいように</head>で検索して、その直ぐ上にコードを追加します。

追加したのは以下のコードです。

カラーコードに自分のブログに合ったカラーコードを置き換えてください。

$(brand.color)のような変数は使用できないため、カラーコードを直接入力してください。

当ブログであればカラーコードの部分が#607D8Bになります。

ライトモードとダークモード対応テーマカラー用コード

スマホ側で設定するライトモードとダークモードに対応し、それぞれ色を指定するコードもあります。

ただし、ブラウザによってはダークモードが適応されない場合があります。

それについては次の項目で説明しています。

対応ブラウザ

残念ながら、テーマカラーは全てのスマホのブラウザに対応しているものではありません。

対応しているブラウザを紹介します。

AndroidスマホのChromeブラウザ

2015年9月リリースのChrome 45以降で対応されています。

スマホ側の設定でライトモードとダークモードを選択できるのですが、ダークモードではテーマカラーが適応されません。（2025年11月時点）

どうもサイトのテーマカラーの指定に関わらず黒にしてしまうようです。

大手のサイトでもダークモードではアドレスバーが黒くなっているのを確認しています。

これに関してはChrome側の問題なのでどうすることもできません。

アップデートで変更が加わるのを期待しましょう。

iOS・MacOSのSafariブラウザ 

2021年9月リリースのSafari 15以降で対応されています。

またスマホ（iPhone）やタブレット（iPad）だけでなく、デスクトップ（Mac）にも対応しています。

その他

2025年11月時点では、他にも以下のブラウザで対応されています。

• Samsung Internet
• WebView（Android・iOS）

Blogger公式テーマの謎

冒頭で述べたように、当ブログで以前使用していた公式テーマEmporioではテーマカラーが勝手に設定されていました。

カラーコードを直接入力しないで使えるならその方が絶対便利ですよね。

なのでそのコードを流用するのが一番だと思い、HTML内を探したのですが……見つかりませんでした。

本記事で紹介したコードは一般的なコードなので、何か特殊なコードで設定してあるんでしょうか？

結局最後まで見つけることができなかったため、諦めてカラーコードを直接入力する方法を取りました。

力及ばず申し訳ないです。

テーマカラーの設定でワンランク上のブログに！

ということで、自分のブログ３つともテーマカラーを設定してみました。

他のサイトから移動した時にアドレスバーの色が変わると、ブログへの没入感があって良い雰囲気です。

全てのブラウザに対応しているものではありませんが、設定しておくとワンランク上のブログを演出することができますよ！