Internet Explorer 11のリリースに向けてブログのテンプレートを修正した
Windows 8.1 のリリース日が決まりましたね。
そろそろInternet Explorer 11でのブログの表示確認をしなくては！
IE11でこのブログの表示がおかしな所はそれほどないようです。しかし、管理者の私がコメントできないという不具合があります。コメントの記入者が表示されず選択できないのです。これはすぐに解決できそうにないので放っておきます。
ブログのテンプレートも一度初期化してしまったので備忘録として修正を書いておきます。
まずはX-UA-Compatibilityを修正します。
Google Bloggerのテンプレートを使っているとIE9で表示させた時に表示が少しおかしくなります。詳細はGoogle BloggerのブログがIEだと重い・・・に書いておきました。そのため、X-UA-Compatibilityを使ってIE9ではIE8として表示するように指示します。ここにIE11を追加しておきます。追加しないとIE11ではIE10として表示しようとするはずです。
<HEAD>タグの直下に次の記述を追加します。
Windowsタブレットでも同様な機能があるので次の記述を追加します。
High Quality Visuals for Pinned Sites in Windows 8（MSDN Blogs/IE Blog）
最後に何やらタッチ動作用のCSSを追加しておくと良いようなのでBlogger テンプレート デザイナーの"上級者向け"設定で"CSSの追加"を表示させ次の文を書いておきます。何がどうなるのかは知りません！double-tap-zoomとあるのでダブルタップで幅を合わせてくれるんでしょう。
スマートフォン、Windows 8で指定したアイコンが表示されるのを確かめて終わりです。
これで、しばらく様子を見てみます。
そろそろInternet Explorer 11でのブログの表示確認をしなくては！
IE11でこのブログの表示がおかしな所はそれほどないようです。しかし、管理者の私がコメントできないという不具合があります。コメントの記入者が表示されず選択できないのです。これはすぐに解決できそうにないので放っておきます。
ブログのテンプレートも一度初期化してしまったので備忘録として修正を書いておきます。
まずはX-UA-Compatibilityを修正します。
Google Bloggerのテンプレートを使っているとIE9で表示させた時に表示が少しおかしくなります。詳細はGoogle BloggerのブログがIEだと重い・・・に書いておきました。そのため、X-UA-Compatibilityを使ってIE9ではIE8として表示するように指示します。ここにIE11を追加しておきます。追加しないとIE11ではIE10として表示しようとするはずです。
<HEAD>タグの直下に次の記述を追加します。
<meta content='IE=EmulateIE7;IE=EmulateIE8;IE=EmulateIE10;IE=EmulateIE11' http-equiv='X-UA-Compatible'/>次はスマートフォン用のアイコンを用意し指定します。パソコンでのfaviconに相当するやつです。スマートフォンでお気に入りに登録された時に表示されるアイコンです。どんなサイズで作っておけばよいかは他のサイト様にお任せしますのでググってください。
<link href='画像のURL' rel='apple-touch-icon-precomposed'/>
Windowsタブレットでも同様な機能があるので次の記述を追加します。
<meta content='画像の背景色' name='msapplication-TileColor'/> <meta content='画像のURL' name='msapplication-TileImage'/>ググってくださいと書きましたがスマホのWebClipと共有するなら144x144のpng画像が良いようです。
High Quality Visuals for Pinned Sites in Windows 8（MSDN Blogs/IE Blog）
最後に何やらタッチ動作用のCSSを追加しておくと良いようなのでBlogger テンプレート デザイナーの"上級者向け"設定で"CSSの追加"を表示させ次の文を書いておきます。何がどうなるのかは知りません！double-tap-zoomとあるのでダブルタップで幅を合わせてくれるんでしょう。
canvas {
-ms-touch-action: double-tap-zoom;
}
スマートフォン、Windows 8で指定したアイコンが表示されるのを確かめて終わりです。
これで、しばらく様子を見てみます。
コメント
コメントを投稿