ポイントサイト・ニュース
ポイントサイトの評判・稼ぎ方・遊び方・攻略法をニュース形式で詳しく解説。主婦・サラリーマン・中学生・高校生でも月収1万円以上のお小遣い稼ぎ・副収入は容易に実現できます!!

Google Chromeのテーマーカラー設定方法とスマホ用アイコンの指定方法

最近になってからちょくちょく見かけるようになったのが、Google Chromeの外枠、アドレス(URL)やメニューの部分に独自の色を付けているサイトです。

以下のスクリーンショットで、左側がいつものGoogle Chrome。右側が独自色を付けたGoogle Chromeになります。

SEO Google Chrome テーマカラー

色をつけたからと言って、SEO的に何か変化があるかというと、特に何も無いのですが、Google Chromeで何枚もタブを開いている際に、どのタブなのかがすぐわかるようになります。

これは、「Google Chromeのテーマカラー」と呼ばれるもので、ウェブサイトを提供する側が自由に設定することがでます。

Google Chromeテーマカラーの設定方法

設定方法はいたって簡単で、<head>タグの中に以下の一文を追加するだけでOKです。

<meta name=theme-color content="#062659">

色を指定している部分が「#062659」の部分です。自分の好きな色を指定してあげましょう。ちなみに本サイトのテーマカラー「#062659」はどこから持ってきたかというとこれです。

SEO ANA Super Flyers Cardの色

そう、ポイントサイトとゆかりの深い陸マイラー垂涎のクレジットカードANA Super Flyers Cardの色から拝借してまいりました。

スマートフォンのアイコンを指定する方法

テーマカラーを設定したところで、ついでにアイコンも設定してしまいましょう。

かつてはfavicon.icoなるアイコンファイルをウェブサイトのルートディレクトリに用意する事で、ブラウザ左上のアイコンやブックマークのアイコンを設定できたのですが、今やHTMLヘッダ内の<link>タグで指定するのが一般的かつ確実です。ただし、rel属性に指定する値がOSやブラウザによって異なっているので、万全を期すためには4種類ほど記述しておく必要があります。

また、アイコン画像のサイズは、以下に示したとおり、ブラウザやOS、ディスプレイの解像度などによってバラバラで全く統一されていません。

  • Android ldpi (〜120dpi)
    36x36
  • Android mdpi (〜160dpi)
    48x48
  • Android hdpi (〜240dpi)
    72x72
  • Android xhdpi (〜320dpi)
    96x96
  • Android xxhdpi (〜480dpi)
    144x144
  • Android xxxdpi (〜640dpi)
    192x192

iPhoneにいたっては、その量たるや、数え切れないほどのバリエーションがあります。

でも安心して下さい。「大は小を兼ねる」とは、まさにこの事で、一番大きい縦192ピクセル、横192ピクセルのサイズのものを一つ用意しておけば、あとはブラウザやOSが勝手に縮小してくれます。画像フォーマットは画像縮小時の品質劣化を抑えられるPNGファイルをオススメします。

さて、前置きはこれ位にして、具体的なアイコン指定方法を見てみる事にしましょう。

アイコンを指定する方法は、Google Chromeのテーマカラー同様、<head>タグの中に次のHTMLを記入しておけばOKです。4種類ありますので、4つとも書いておきましょう。

iOS Safari用

<link rel="apple-touch-icon" sizes="192x192" href="画像ファイルのURL" />

iOS Safari(旧)用 / Android標準ブラウザ(一部)用

<link rel="apple-touch-icon-precomposed" href="画像ファイルのURL" />

Android標準ブラウザ(一部)用

<link rel="shortcut icon" href="画像ファイルのURL" />

Android Chrome用

<link rel="icon" sizes="192x192" href="画像ファイルのURL" />

各ポイントサイトのGoogle Chromeテーマカラー対応状況

本記事執筆時点で、Google Chromeテーマカラーに対応しているポイントサイトはありませんでした。ポイントサイトではあまり需要は無いようです。i2iポイントとか、コーポレートカラーであるライトグリーンの色にしたら似合うと思うんですけどね。

各ポイントサイトのアイコン対応状況

ポイントサイトにおいて、どのrel属性を設定しているのか調査してみました。結果は以下の通りです。







rel属性値
げん玉 apple-touch-icon
apple-touch-icon-precomposed
shortcut icon
icon
ハピタス apple-touch-icon
apple-touch-icon-precomposed
shortcut icon
icon
PONEY apple-touch-icon
apple-touch-icon-precomposed
shortcut icon
icon
ポイントタウン apple-touch-icon
apple-touch-icon-precomposed
shortcut icon
icon
GetMoney! apple-touch-icon
apple-touch-icon-precomposed
shortcut icon
icon
モッピー apple-touch-icon
apple-touch-icon-precomposed
shortcut icon
icon
ちょびリッチ apple-touch-icon
apple-touch-icon-precomposed
shortcut icon
icon
ポイントインカム apple-touch-icon
apple-touch-icon-precomposed
shortcut icon
icon
i2iポイント apple-touch-icon
apple-touch-icon-precomposed
shortcut icon
icon
Gポイント apple-touch-icon
apple-touch-icon-precomposed
shortcut icon
icon
ECナビ apple-touch-icon
apple-touch-icon-precomposed
shortcut icon
icon

こうしてみると各社ともいずれかの設定をしているようなのですが、対応がバラバラというか、4つ全てを指定しているサイトはひとつもありませんでした。

ちなみに典型的なモバイル環境(Chrome on Android 6.0)だと、shortcut iconしか設定していないi2iポイントのアイコンは正常に表示されずに、Android OSが自動で設定したI(英文字のアイ)の画像になってしまいました。あとで担当の山岸さんに報告しておきます。

SEO ポイントサイトのアイコン

Googleって凄いなと思うのは、i2iポイントのアイコンの色をちゃんと緑色にしているところ。どういうアルゴリズムでこの色を選択しているのかわかりませんが、ちゃんとi2iポイントな色になっているのには驚きです。

また、不思議なのはECナビで、どのrel属性も設定している様子が無いのにアイコンはちゃんと表示されています。favicon.icoから取ってきたのでしょうか?もしそうだとしたらi2iポイントのアイコンが表示されない説明がつきません(i2iポイントにもfavicon.icoがちゃんと用意されています)。いったいどこの情報からこのアイコンを表示しているのでしょうか。謎です。

PointSiteNews.com
作成日 2016年11月24日 22時44分
更新日 2016年11月26日 06時52分
3465文字
このエントリーをはてなブックマークに追加
ポイントサイト・ランキング
 1位 モッピー 
モッピーの評判・稼ぎ方・遊び方・攻略法利用者500万人を誇るポイントサイトの定番中の定番。換金額に上限が無く、何人ものポイント長者を今も産み出し続ける!!
評価5.0 評価: 4.95
 2位 げん玉 
げん玉の評判・稼ぎ方・遊び方・攻略法2005年から続く老舗ポイントサイトで会員数は440万人。運営会社の(株)リアルワールドは、安心の東証マザーズ上場企業。保有ポイントに利息がつくサービスも開始!!
評価5.0 評価: 4.85
 3位 PONEY 
PONEYの評判・稼ぎ方・遊び方・攻略法高還元率かつドットマネーへポイント交換できるサイトのひとつとして、ここ最近になって人気を集める。特に陸マイラー界では頭角を現しつつあり、3ティアの紹介制度も手伝って、ハピタスの座をおびやかす存在に。意外とその歴史は古く、旧称はぶたちょき。今なら登録で5,000ポイントプレゼント実施中!!
評価5.0 評価: 4.75
 4位 モバトク 
モバトク大手GMOが運営する利用者200万人の安心のポイントサイト。その洗練されたウェブサイトには、アンケートや各種ゲームの他に、モニタ・覆面調査もある。
評価4.5 評価: 4.72
 5位 ハピタス 
ハピタスの評判・稼ぎ方・遊び方・攻略法陸マイラーに絶大な人気を誇るサイト。クレジットカード発行やFX口座開設などの一撃1万円超の高額案件はハピタスの「みんなdeポイント」を狙え!!
評価4.5 評価: 4.58
 6位 ポイントタウン 
ポイントタウン大手GMOが運営する利用者200万人の安心のポイントサイト。その洗練されたウェブサイトには、アンケートや各種ゲームの他に、モニタ・覆面調査もある。
評価4.5 評価: 4.48
 7位 GetMoney! 
GetMoney!2001年サービス開始の最古参ポイントサイト。懸賞サイトとして有名なチャンスイットと同じ運営会社インフォニア(株)が運営。
評価4.5 評価: 4.45
 8位 ちょびリッチ 
ちょびリッチの評判・稼ぎ方・遊び方・攻略法ここ1、2年で急激に会員数をのばしている今注目のサイト。ショッピング、アンケート、モニター調査とポイントサイトのあらゆるコンテンツを提供。ドットマネーへの換金もスタートして利便性がさらに向上。注目すべきは楽天市場オープンAPIを駆使した楽天市場の商品ページ。今なら登録で500ポイントプレゼント実施中!!
評価4.5 評価: 4.28
 9位 ポイントインカム 
ポイントインカムショピングから覆面調査までポイントサイトの基本コンテンツをオールラウンドに提供しつつ、クレジットカード案件に強みを持つ会員数200万人のポイントサイト。
評価4.0 評価: 4.15
 10位 i2iポイント 
i2iポイントの評判・稼ぎ方・遊び方・攻略法「他サイトよりも1ポイントでも低ければご報告下さい」とどこぞの電機量販店のようなサービスベストポイント制度を開始。2014年にサービスインした今一番新しいポイントサイト!! グループでポイントを競い合うグループ機能が面白い!!
評価3.5 評価: 3.55
 11位 Gポイント 
Gポイントポイント交換サイトとして有名。しかしながら、ポイントサイトとしての機能も充実しており、ゲーム・アンケート・モニタ案件も豊富。
評価3.0 評価: 2.95
 12位 ECナビ 
ECナビポイント交換サイトPeXと同じ運営元のポイントサイト。会員数はその知名度とは裏腹になんと500万人超とポイントサイト業界最大級。
評価3.0 評価: 2.85