headAD

2014/03/01

Bloggerのスマホ用ファビコンの設定

 まず最初に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で確認するとウェブクリップは角丸、ブックマークも角丸ですが角張っているように整形されます。
       

なにか、お気づきの点ありましたらコメントください。



0 件のコメント: