まず最初にBloggerに標準装備のファビコン(Favicon)を設定してみます。
ファビコンというのは、ブラウザタブやお気に入りリストのアイコン表示のことです。
自分のブログでファビコン設定されていないと、オレンジの[B]のアイコンが表示されます。
自分用のアイコンがあると、愛着が湧いてくるので、設定してみました。とても簡単です。
まずファビコン用画像を用意します。
画像のサイズは適当でOK。100x100でもいいし、600x600でもいいです。あと形式はjpgやpngファイルがいいです。ただし！！縦横比率は同じにしておいたほうがいいです。
私は、150x150のpngファイルを用意しました。
次にファビコン画像を、自分のBloggerに登録します。
[マイブログ]→[レイアウト]→[ファビコン]→[編集]
登録したい画像を選択して登録すると、下の画のようにアイコンが表示されます。
Bloggerのファビコン登録ではこれで終わりです。
すごく良いところは、htmlを勝手に設定してくれますし、画像もfavicon.icoに自動で変換してくれます。
これで、PCで見えるようになります。ブラウザのキャッシュが効いているので、数日かかる場合もあります。
さて、お題のスマホです。
スマホでは、ブックマークやホーム画面にアイコンを追加することができます。これをウェブクリップアイコンと言いますが、これまでの方法ではファビコンはスマホには表示しません。
そのままだと、オレンジの方位磁石の画が見えます。
やっぱここも変えたいですよね。
Bloggerが標準で装備していないので簡単な裏ワザで設定してみます。
※ここから先は、テンプレートのhtmlを直接編集するので、先にやり方を読んで、理解できないようならむやみに触らこないほうが無難です。
※もう一つだけ注意。「モバイルバージョンを使用する」では、これから説明する方法ではできません。「モバイルバージョンを使用しない」設定で使うようにしてください。変更は[マイブログ]→[テンプレート]→[モバイル設定]
つまりスマホで見るときもPCと同じ形式で見える方法でしかできないということです。どうしてもモバイルならカスタム設定でも行けそうですが、情報がありません(*1)。
(*1)その後、追加の情報を
こちらに記載しました。
(1)ファビコン画像をapple-touch-icon.pngというファイル名にして保存します。
この画像は、角丸にしなくてもいいです。スマホ側で角丸になります。
他の記事では、自前のサーバーやgoogleサイトを使ったりしていますが 、ここでは、自分のブログの下書きに画像を貼り付けます。つまり、画像を貼り付けたブログを一枚作成します。これは下書きのままで公開はしませんが削除もしません。
貼り付けたら、[作成]の横の[HTML]に切り替えて
herf="http://2.b～～0/apple-touch-icon.png"に注目し、http～.pngまでをコピーします。
この投稿ページでの作業は終わりです。
(2)次に、[マイブログ]→[テンプレート]→[HTML編集]を開き、
<head>～</head>の中の行に下の一行を追加します。headの何行か下をみるとtitle～の行があるので、その上あたりに一行追加すればよいです。
<link href="xxx.png" rel="apple-touch-icon"/>
さらに、(1)でコピーしたhttp～.pngまでの文字を、上の青字のxxx.png部分へ貼り付けます。
つまり、下のようになっていればOKです。
<link href=http://2.b～～0/apple-touch-icon.png" rel="apple-touch-icon"/>
ここまでできたら、[テンプレートを保存]で終了です。
スマホでブックマークやウェブクリップするとアイコンが表示します。なお、iphoneで確認するとウェブクリップは角丸、ブックマークも角丸ですが角張っているように整形されます。
なにか、お気づきの点ありましたらコメントください。
