Article page

by
  • Comment:0
  • Trackback:0

GirlOnWire リリース時から提供させて頂いてます
『旧ブラウザ利用者に向けてアップグレードを促す』ための啓蒙ソースコードですが
今回 表示される画像を変更しました

変更したのは「解像度」のみ
アップグレードのハイパーリンクに使用しているブラウザアイコンが対象です
高解像度ディスプレイ向けに画像解像度自体を調整しました
無駄だなー と思いつつ作業(笑)
高解像度ディスプレイでアクセスしているということは
比較的新しい機種であろうことは間違いありませんので
わざわざIE8などのレガシーブラウザを使っているとは考えにくい
まあそれでも一応やっとくか ぐらいで ^^;




● ソース内容
(Ctrl+Cでコピー, Ctrl+Vでペースト)

<!--[if lt IE 9]>
<div id="if-it-ie9" style='background: rgb(129,142,157); text-align: center; clear: both; height: auto; position: relative; z-index: 1000010'><div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'><a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'><img src='//blog-imgs-82.fc2.com/v/a/n/vanillaice000/closebtn.jpg' style='border: none;' alt='Close this notice'></a></div><div style='width: 100%; margin: 0 auto; text-align: left; padding: 10px; overflow: hidden; color: black;'><div style='width: 63px; padding-right: 10px; float: left;'><img src='//blog-imgs-82.fc2.com/v/a/n/vanillaice000/warning.jpg' alt='Warning!'></div><div style='width: 275px; float: left; font-family: Arial, sans-serif; padding: 5px;'><div style='font-size: 14px; font-weight: bold;'>You are using an outdated browser<br>あなたは旧式ブラウザをご利用中です</div><div style='font-size: 12px; margin-top: 6px; line-height: 15px;'>For a better experience using this site, please upgrade to a modern web browser.<br>このウェブサイトを快適に閲覧するにはブラウザをアップグレードしてください。</div></div><div style='width: 70px; float: left; padding: 5px;'><a href='//www.google.com/chrome' target='_blank'><img src='//blog-imgs-93.fc2.com/v/a/n/vanillaice000/googlechromeimg.png' style='border: none;' alt='Get Google Chrome'></a></div><div style='width: 70px; float: left; padding: 5px;'><a href='//www.firefox.com' target='_blank'><img src='//blog-imgs-93.fc2.com/v/a/n/vanillaice000/firefoximg.png' style='border: none;' alt='Get Firefox'></a></div><div style='width: 70px; float: left; padding: 5px;'><a href='//www.apple.com/safari/download/' target='_blank'><img src='//blog-imgs-93.fc2.com/v/a/n/vanillaice000/safariimg.png' style='border: none;' alt='Get Safari'></a></div><div style='width: 70px; float: left; padding: 5px;'><a href='//www.opera.com/ja' target='_blank'><img src='//blog-imgs-93.fc2.com/v/a/n/vanillaice000/operaimg.png' style='border: none;' alt='Get Opera'></a></div><div style='width: 70px; float: left; padding: 5px;'><a href='//www.browserforthebetter.com/download.html' target='_blank'><img src='//blog-imgs-93.fc2.com/v/a/n/vanillaice000/ie11img.png' style='border: none;' alt='Get Internet Explorer 11'></a></div><div style='width: 70px; float: left; padding: 5px;'><a href='//www.microsoft.com/ja-jp/windows/microsoft-edge' target='_blank'><img src='//blog-imgs-93.fc2.com/v/a/n/vanillaice000/microsoftedgeimg.png' style='border: none;' alt='Get Edge'></a></div></div></div>
<![endif]-->



● 記述場所

テンプレートの
<body>
直下
アクセス解析コードよりも


● 対象ブラウザ

Microsoft社の Internet Explorerのみ です
それ以外のブラウザは無関係
対象ブラウザ以外からのアクセス時に表示されることはありません
対象IEのバージョンについては デフォルトでは IE8を含むそれ以前のバージョン にしてあります
最初の

<!--[if lt IE 9]>

は「もしもIE9よりも下のバージョンだったら」という意味ですので
IE9を含むそれ以前に変更される場合には

<!--[if lt IE 10]>


と修正します
テンプレートで若干異なりますが
IE8からレイアウトが著しく崩れますので デフォルトでほとんどカバーできると思います


● ご利用にあたってのお願いごと(必ず守ってください)

画像などは私のブログへ直リンクとなっております
他製作者様テンプレートへの移植は厳禁でお願いします

トラブルのもとになりかねませんのでご配慮をお願いします


● 個人的見解

私はレガシーブラウザ(旧式ブラウザ)のサポートはしません
賛否別れると思いますが
IE8は既にMicrosoftのセキュリティからも外されていますので
リリースメーカーがサポートを打ち切った ということですよね
それをテンプレート製作者がレイアウト上だけだとしても「サポートします」というのはちょっと違うんじゃないか (´・ω・`)

「IE8でも閲覧して頂けます」
というのは一見親切なように思えますが
セキュリティ切れのブラウザを推奨(とは言い過ぎでしょうか)するようなことはしたくないです ごめんなさい(笑)
ならばアップグレードを促す方がよほど建設的というものではないでしょうか



テンプレートリリース時に事前に導入しておく というのは避けています
余計なお世話になってもいけませんので (´・ω・`)
啓蒙が必要かな〜 と思われます方はご利用くださいませ

関連記事
vanillaice (Akira)
Posted byvanillaice (Akira)

Comments 0

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い