コピーライトマークにCSSが反映されない時の対処法

Android端末の「Chrome」では、「©（コピーライトマーク）」にCSSが反映されない事があります。

たとえば、コピーライトの文字色をほんのりグレーにしてあるけど、「©」部分だけくっきり黒で浮いている、などといった場合です。

どうやらAndroid端末での「Chrome」の仕様のようですが、できればちゃんとCSSを反映させたいですよね。

ここでは、Android端末の「Chrome」で見た時、コピーライトマークにCSSが反映されない時の対処法をまとめています。

コピーライトマーク対処法3つ

このAndroid端末の「Chrome」で、コピーライトマークにCSSが反映されない現象。

厳密には、HTMLのファイルのhead内で
「lang="ja"」を指定していると、Android端末の「Chrome」でCSSが反映されない事があるのだそうです。

主な対処法は3つ。

・「lang="ja"」をはずす
・「©」が黒でもいいデザインにする
・「©」にAndroid標準搭載のフォントを指定する

「lang="ja"」はページ言語が日本語である宣言なので、コピーライトにCSSを反映させるために外すには抵抗感があります。

コピーライトマークが黒でもいいデザインにする、という方法もありますが、それでいいなら調べたりしませんよね。

そこで3つ目の対処法。

コピーライトマークに対して、「Android端末に標準搭載されている」フォントを指定する事で、CSSを有効にする事ができます。

「lang="ja"」をはずさずCSSを反映できる！これだ！ということで、早速Android標準搭載のフォントを指定する方法を見ていきましょう。

コピーライトマークのフォント指定の書き方

Android標準搭載のフォントを指定するには、CSSで「font-family」で使うフォントを指定します。

あらかじめHTMLでコピーライトマークにclass名をつけておき、そのclass名に対してCSSでフォントを指定します。

 <span class="cp">©ドメイン.com</span>

.cp{
　font-family: Verdana,"Droid Sans","メイリオ",sans-serif;
}

端末によって搭載しているフォントは違うので、フォントは複数指定しておきます。

また、「font-family」は先に書かれたフォントを優先的に表示するので、先に英字フォント、次に日本語フォントを後述します。

こうする事で、アルファベットには英字フォントを、日本語には日本語フォントを適用できます。

今回はコピーライトマークにCSSを適用させるのが目的なので、Android端末に標準搭載されているフォントを追加するだけですが……

Windows、Mac、iPhoneなどで見た時のために、普段使っているフォントも合わせて指定しておきましょう。

ここでは、Window、Mac、iPhoneに標準搭載されている「Verdana」を先頭に、Android用に「Droid Sans」を指定しています（Android標準フォントとしては他に「Robot」というフォントもあります）。

日本語用に普段使っているフォントも指定しておきましょう。ここでは「メイリオ」です。

また、どのフォントも搭載されていない場合に備えて、大体こういう系統のフォントで、という意味合いの「総称フォントファミリー」を1つ指定しておきます。

ここではゴシック体系の「sans-serif」を指定しています（明朝体系の場合は「serif」を指定します）。

書き方は、フォント名に半角スペースのある「フォント名」を指定する場合は、必ず「'」か「”」で囲みます（「Droid Sans」など）。

半角スペースのないフォント名の場合は、「'」や「”」はあってもなくてもOKです（「Verdana」など）。

フォント名とフォント名は「,」で区切って記述します。

実行結果はコチラ。

Android端末から「Chrome」で見ても、ちゃんとコピーライトマークにCSSSが反映されていると思います。