[み]フルスクリーン版Googleマップのアイコンを変える方法

昨日紹介した、ブラウザ版Googleマップをフルスクリーン表示する方法ですが、ホーム画面に追加したアイコンがどうもしっくりきませんでした。

まず、白いフチがついてるのがどうも気に入りません。それと、もともとのマップアプリのアイコンにはいわゆる光沢ってなかったように思います。いや、あったのかもしれませんが、なくてもいいかなと思います。

ということで、ホーム画面に追加するアイコンを変えたいと思います。

アイコンを変える方法

アイコンを変えるには、こないだのコードを書き換えてやります。どこを変えるかというと、画像パスのところを変えてやればいいんです。つまりここです。

<link rel="apple-touch-icon" href="http://farm5.staticflickr.com/4035/4564840873_85c02262e9_z.jpg">

このURLを自分の好きなのに変えてやればいいんです。ということで、みはらはこの画像に変えました。

アイキャッチ画像に使っていたやつを弄りました。最初はシャドウがついてたんですが、もちろん消しました。そうです、ちまちまとPhotoshopで消しました。

あともうひとつ、光沢を消します。こっちもコードを少し変えてやります。rel=”apple-touch-icon” のところを、 rel=”apple-touch-icon-precomposed” に変えてやると、大きい画像をちょうどいいサイズ(57px x 57px)に縮小して
くれます。そして、光沢がなくなります。ウソみたいですが、ホントです。rel=”apple-touch-icon” だと光沢がつきます。

で、書き換えたコードがこれです。

data:text/html;charset=UTF-8,<title>GoogleMaps</title><meta name="apple-mobile-web-app-capable" content="yes"><link rel="apple-touch-icon-precomposed" href="https://miha5.com/maps.png"><script>if(window.navigator.standalone){location.href="https://maps.google.co.jp/";}else{document.write("ホーム画面に追加")}</script>

これで、キレイなアイコンがホーム画面に登録できました。

上のコードをコピペで、みはらと同じアイコンになります。よかったらどうぞ。

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

commentYour Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

checkboxみはら.comはエックスサーバーです

editNEW エントリー

PAGE TOP arrowup