Gutenbergは便利！だけど…

WordPressの新しいエディタ「Gutenberg（グーテンベルク）」は使ってますか？

クラシックエディタに慣れてる人や、HTMLコードが書ける人にからは「使いにくいっ！」って意見も多いですよね〜

でも使ってみると、意外と便利なんです。

コードを書かなくてもカラムが使えたり、レスポンシブレイアウトが出来るといったメリットがあるので、HTMLの知識がないクライアントにも安心して編集を任せられます。

ただ1点！

「メディアと文章」というレイアウト要素だけは気をつけていただきたい。
↓こういうやつです。

メディアと文章のサンプル

インスタ蝿

インスタバエ（インスタ蝿）とは、現在女子学生を中心に寄生しているハエであり、寄生虫の一種。世界規模で流行の兆しをみせており、この昆虫に寄生された人間は、「インスタ映え」という謎の行動原理に支配されることが知られている。

ネット弁慶

ネット弁慶とは、Web上のブログや電子掲示板などでは居丈高な調子を見せるが、実生活ではおとなしく、小心者であるような人物のことである。

非コーダーには意外と難易度の高い、写真と文章を左右に配置する「2カラムレイアウト」が簡単にできる機能なのですが、いくつか問題点があるんです。

今回はその問題と解決法についてご案内します。

1. テキストが上になってしまう問題

モバイル表示は「写真が上でテキストが下」にしたいのに、「メディアを右に表示」した場合、「モバイルで重ねる」にチェックを入れるとテキストが上になってしまうんです。

理想

現実

要望としては以下の2つ。

写真をテキストの上にしたい
テキストを画像の左右幅に合わせたい

「気にしない」というのも一つの案ですが、CSSで解決できます。

@media screen and (max-width: 480px) {
	.wp-block-media-text {
		display: block;
	}
	.wp-block-media-text .wp-block-media-text__content {
		padding: 0;
	}
}

説明すると、「メディアと文章」は「display: grid;」というグリッドレイアウト用のCSSで構築されているため、モバイルでは通常のブロック要素「display: block;」に指定し直しただけです。

後はテキストブロックに「padding: 0 8%;」と左右に8%の余白が設定されているので、「padding: 0;」で指定し直します。

2. IEで崩れてしまう問題

IEでは「display: grid;」が適用されないため、以下のように1カラムになってしまいます。

理想

現実

表示はされてますしIEユーザーは少数派なので、「気にしない」というのも一つの解決策だとは思いますが、こちらもCSSで解決できます。

@media screen\0 {
	.wp-block-media-text {
		display: flex;
		align-items: center;
	}
	.wp-block-media-text.has-media-on-the-right {
		flex-direction: row-reverse;
	}
	.wp-block-media-text .wp-block-media-text__media,
	.wp-block-media-text .wp-block-media-text__content {
		width: 50%;
	}
}

まずは「display: grid;」を諦めて「display: flex;」を適用させます。
縦を中央揃えにするために、「align-items: center;」も記述。

写真が右のブロック要素「.wp-block-media-text.has-media-on-the-right」に対して、並び順が逆になる「flex-direction: row-reverse;」を適用。

写真とテキストそれぞれのブロックが半々になるように「width: 50%;」を記述します。

最後にIEだけに適用されるようにCSSハックのメディアクエリで囲みます。

CSSハックしなくても表示は問題ないと思いますが、Gutenbergの機能をなるべくそのまま使いたいので、あえてハックしてあります。

ちなみこれはIE8〜11に適用されるCSSハックなのですが、「display: flex;」はIE10以降にしか適用されませんのでご注意ください。

※マイクロソフトのIE10のサポートが来年1月いっぱいまでなので、IE11以下は基本無視するようにしてます。