いよいよWindows7のサポート終了が2020年1月14日に迫ってきました。Windows10に乗り換えるために今年はPCが売れているそうです。

私たちホームページ制作(ウェブサイト制作)業者も、Windows7サポート終了は心待ちにしているところです。

なぜなら、IE(Internet Explorer)とお別れできる可能性が高いからです。

もちろんWindows10にもIEは残りますが、推奨はされていません。Edgeブラウザが標準ブラウザになります。そうなると乗り換えが進む可能性があります。

IEはホームページ制作(ウェブサイト制作)業者にとっては悩みのタネです。

ChromeやFirefoxが対応しているCSSやHTMLに、IEだけ対応していないということが多いのです。

かつては圧倒的なシェアを誇ったIEですが、いまやシェアは13%程度。かつてシェアが高かったゆえに、IEのみ対応するウェブサイトが多かったのも事実です。

たとえば国税納税サイトのe-TAX。今年からようやくIE以外に対応するようになりました。

しかし、いまやChromeが60%と寡占状態です。IEの次にFirefox、Safari、Edgeが8%前後で並びます。

なんだかんだと1割超えで2位のシェアがあると、これを切り捨ててウェブサイト制作(ホームページ制作)はできません。

これがEdgeに移行してくれれば、いよいよIE非対応が許される時代が来るのです。

しかもEdgeも次期バージョンからレンダリングエンジンをChromeと同じ「Chromium」に切り替えるそうで、Edgeで利用できないHTML・CSSのことを忘れることができるのです。

とはいえ、そこまではIE対応を行うのがウェブサイト制作(ホームページ制作)業者には求められそうです。

現在制作中のウェブサイトでも、一つ問題があったので覚え書を残しておきます。

WordPressのOnePress(有償版)というテーマのスライダーにIEでの表示に問題がありました。

たとえば、縦長の画像をスライダーに表示させると、スライダーが横長に表示される場合、ChromeやFirefoxでは画像の上下を切り捨ててくれるます。

ところが、IEでは上下を切り捨てず画像全体を横長に表示しようとするので、縦方向が圧縮された画像が表示されるのです。

解析したところ、このスライダーはOwl CarouselというjQueryプラグインで動いていました。

上下の切り捨て(画像の縦横比率を保ったまま任意のサイズにトリミング)はCSSのobject-fitで実装されているのですが、これがIEに対応していないことが原因でした。

そこで、object-fit-imagesというjQueryプラグインを使います。distフォルダの中にあるofi.min.jsだけを使用します。

任意のディレクトリにofi.min.jsをアップロードします。

header.php(functions.phpで読み込ませてもOK)


<script src="/ofi.min.js"></script>

※ディレクトリは自分の環境に応じて記載してください。

footer.php(/bodyの前に)


<script>
  objectFitImages( 'img.ofi' );
</script>

※ofiの部分を書き換えれば任意のクラスを使用できます。

CSS


.ofi {
  object-fit: cover; 
  font-family: 'object-fit: cover;
}

そしてimgタグにofiというclassを追加すれば、IEでもきれいにトリミングされるようになります。

OnePressでは、onepress-plusプラグインのなかにあるsection-partsフォルダのsection-slider.phpの、imgの後にclass=”ofi”を追記するだけです。

object-fitがIE非対応でWordPressOnePressテーマのスライダーに不具合がでたので対応してみた

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください


Warning: A non-numeric value encountered in /home/users/2/labo-ibaraki/web/ad-ibaraki.com/wp-content/plugins/wp-social-bookmarking-light/vendor/twig/twig/lib/Twig/Environment.php(462) : eval()'d code on line 43

Warning: A non-numeric value encountered in /home/users/2/labo-ibaraki/web/ad-ibaraki.com/wp-content/plugins/wp-social-bookmarking-light/vendor/twig/twig/lib/Twig/Environment.php(462) : eval()'d code on line 43

Warning: A non-numeric value encountered in /home/users/2/labo-ibaraki/web/ad-ibaraki.com/wp-content/plugins/wp-social-bookmarking-light/vendor/twig/twig/lib/Twig/Environment.php(462) : eval()'d code on line 43

Yahoo!ショッピング制作(申込~開店フルサポート)88,000円から
独自ドメインのインターネット通販サイト構築(運用支援オプションあり)88,000円から
スマホ対応のウェブサイト制作(ホームページ制作)33,000円から