Nature's Farmer
業務外
井戸掘りブログにスマホ用のショートカットアイコンを設定する方法です。備忘録として残しておきます。
自分のスマホのホーム画面に、井戸掘りブログへのショートカットアイコンを登録してみました。
するとブログサービス（Blogger）のアイコンが表示されます。以前はブログのファビコンが表示されたはずですが、仕様が変わったのかな？
でもこれでは、井戸掘りブログかどうかはタイトルでしか判りません。タイトル自体も先頭の10数文字しか表示されていないし…。
 |
| 青いBがアイコンです |
amazonとかのサイトは、ショートカットアイコンを登録すると、独自のアイコンがスマホのホーム画面に表示されます。画面キャプチャの2列目が、サイトのショートカットアイコンです。これが良いです。仕組みを調べてみましょう。
どうやら、linkタグでapple-touch-iconを登録するだけで良いらしい。
ブログテンプレートを直接修正して、ブログトップページに使っているエンブレムをアイコンに登録してみました。画像自体はpng形式で、Picasa Web Albumsに配置しています。ショートカットアイコンのサイズは32×32pxです。大きな画像でも自動的に縮小されるようなので、ちょっと大き目の128×128pxの画像を使ってみました。
 |
| エンブレムをアイコンにしました |
ソースコードです。これをブログテンプレートの<head>〜</head>の間に記述するだけです。ブログテンプレートはxml形式なので、行末は「/>」で閉じないと、Bloggerに怒られます。
参考にする場合は、画像ファイルのURL部分を、利用する画像に合わせて変更してください。
<link href='https://2.bp.blogspot.com/-cxiAZQx_VpM/V2OyBq_nEHI/AAAAAAAAgRU/n4Ldt458GjoeYEdp3pPhBEtuAHjhE0bSACKgB/s200/emblem128.png' rel='apple-touch-icon'/>
感想と構想
ショートカットアイコンの登録は、ネットの情報も豊富で、設定自体も簡単でした。
井戸掘りブログが、ちょー格好良くなりました。自画自賛（笑）
ショートカットアイコンの使い方は、以下の記事を参考にさせていただきました。
Web Clipアイコンを指定する
0 件のコメント:
コメントを投稿