記事の詳細

WordPress5.0のGutenbergをIE(Internet Explorer)で動作させることは難しい、という話はよく聞くのですが、普通に別ブラウザで編集したものをedgeやIEで見た時、表示崩れが起こったのでそれに関するメモ。

 

WordPress5.0からのGutenbergの「レイアウト機能」にある「メディアと文章」「カラム」などはCSS Gridでできている

このマークのアイコン。

WordPress5.0 GutenbergとedgeとIE11

編集画面だとこうなります。

WordPress5.0 GutenbergとedgeとIE11

実際の画面だとこうなって、

WordPress5.0 GutenbergとedgeとIE11

 

スマホだとこうなります。

ブロック要素で「モバイルで重ねる」にチェックを入れると、以下のようになります。

WordPress5.0 GutenbergとedgeとIE11

WordPress5.0 GutenbergとedgeとIE11

実は編集画面の際こんなレイアウトにすることができますが、こうした場合モバイル版でも写真の位置は下に回ります。

WordPress5.0 GutenbergとedgeとIE11

WordPress5.0 GutenbergとedgeとIE11

モバイル版の時に写真を上に上げたい場合は、「grid-template-areas」の書き方を変更していかなければなりません。「メディアと文章」はつまり、CSS Gridを利用しているんですね。
これは「レイアウト機能」にある「カラム」も同じで、GutenbergのレイアウトはCSS Gridを中心に構成されています。
CSS Glidが本格的に導入されているのはIE11からなので、IE10以前でGutenbergを使うのは潔くあきらめるとともに、なるべく早急にIEの利用を中止してedgeに移ることを推奨します。

 

CSS Gridとはなんぞ

Gridとは水平線と垂直線の集合が交差したもので、線と交点で構成されます。CSS GridはWrapper(親)とItem(子)に分かれており、Wrapperに「display:grid;」を適応することでグリッドにすることが出来ます。線を「グリッドライン」、線で構成された四角い部分を「グリッドトラック」と呼びます。
この親要素「display:grid;」に対し、子要素に「grid-template-columns」「grid-template-rows」で行と列を制御しつつ、レイアウトを整えていきます。

IE11にCSS Gridを適応させるためには、ベンダープレフィックスが必要です。
当然、GutenbergをIEでスムーズに表示するためには、ベンダープレフィックスが必要です。

 

これをいちいち手打ちしていたのでは気が狂うので、Autoprefixerを利用している方が多くいます。

Autoprefixer

ちょっとお手軽なのがこのブラウザでできるベンダープレフィックス付与アプリ。
Autoprefixer CSS online

edgeやIEでGutenbergの表示をコントロールする

さてCSS Gridを利用したGutenbergでよく出るIEの表示崩れがこちら。

WordPress5.0 GutenbergとedgeとIE11

これは以下と同じページになります。

WordPress5.0 GutenbergとedgeとIE11

「メディアと文章」は、IEでは画像の大きさが「width: 100%;」になっていて、親要素のwidthに依存します。つまり、親要素のwidthが決まっていないと、widthが確定しているところまで大きくなります。
CSS Gridではwidthを指定することがあまりありません。グリッドで指定します。
一応「高度な設定」でクラス付けをし、「width: inherit;」にすることで画像はトリミングしたメディアサイズになりますが、floatでもflexでもないこの「メディアと文章」のレイアウトは、IEではどうしようもない、というのが結論でした。

なので、このレイアウトをIEにも適応したい場合は、カラムを利用することをお勧めします。

WordPress5.0 GutenbergとedgeとIE11

ちがうところは画像がセンター揃いでなく、左上揃いになるところです。
IEで見るとこんな感じ。

WordPress5.0 GutenbergとedgeとIE11

なお、テーマなどによってはこのカラムでも画像が親要素からはみ出すという現象が起きることがあります。その場合は以下のようにwidthを設定してあげるとなんとかなります。

 

結論としては、

  • IEまで対応したい場合は「メディアと文章」は使わずに「カラム」を利用する
  • 画像が親要素からはみ出す場合は「.wp-block-image img,.wp-block-image」に「width:100%」を適応する

まだまだIEが現役になってしまっているので、新しいアプリが活躍できないという現状、非常に残念でなりません……。
そのうち新しいバージョンでアップデートされていくと思いますので、今はなるべく最小限の動きで回避していきましょう!

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。


ほかの投稿も読んでみませんか?

コメントは利用できません。

相模原のお店やサービスをどんどん紹介!

行ってみよう相模原 相模原市のお店限定

飲食店

ページ上部へ戻る