【WordPress】ブロックエディタでの画像の上下のスペーシング調整方法を考える
長年、WordPress を活用している当サイトですが、ここ3ヶ月くらいでようやくブロックエディタ「Gutenberg」への移行が完了。したは良いものの、色々と課題がまだ残っていまして。
今回はその中の1つ、「画像の前後のスペーシング調整を Gutenberg エディタ上からする方法」について考えていきます。
インライン画像が扱いにくくなったGutenberg
現在の WordPress は「Gutenberg（グーテンベルク）」というブロックエディタが標準となりましたが、このエディタ、インライン画像のサポートがめちゃくちゃ弱くてですね。
具体的には画像の横幅調整しかできず、「画像ブロック」のような柔軟な調整ができないのです。
画像ブロックならサイズ調整は簡単で、オリジナルサイズの指定も一発なのですが、インライン画像の場合はオリジナルサイズの指定ですら面倒。自力でサイズを調べたり計算したりして指定する必要があります。
インライン画像がもう少し使いやすければ、画像前後のスペーシングは、段落内の画像なのかどうかで指定する余地があるのですが、Gutenberg の使い勝手の観点から、常に画像を独立ブロックとして別段落扱いにする事にしたので、段落間のスペーシングの有無を明示的に指定する必要が出てきたわけです。
で、現実的に運用上、WordPress のエディタ上でこれをどのように指定すればよいかを検討した、という話になります。
記事データを汚したくない
ウチみたいなサイトの場合、記事データは資産そのもの、ですから本文と関係ない付帯情報は極力廃していかなければなりません。
将来的に WordPress から別のシステムへ移行する可能性だってゼロではありませんから、記事データがプラットフォームにロックされることは避けたいわけです。
また、AMP 対応も考えなければなりません。最近は AMP で使えない CSS は少ないのであまり意識する必要はなさそうですが、少なくとも !important qualifier は使わないようにする必要があります。また、過去の経緯やデータ効率を考えると、可能ならインライン Style も避けたいところです。
ということで整理すると、理想的には以下の条件を満たした画像前後のスペーシング方法を考えることになりました。
- AMP対応可
- 他CMSへも記事データを移行可
- WordPress の Gutenberg エディタのビジュアル編集モードで入力可
- （理想的には）WordPressアプリからも利用可
- 記事データを大きく汚さない。汚すとしてもシステムで対処できる
- 生産性を下げない
プラグイン「CoBlocks」は便利だけども…
実は、CoBlocks というプラグインを使えば、画像ブロックの上下のマージンを個別にビジュアルエディタ上から削除できます。
ただ、CoBlocks 自体は AMP に完全対応してない予感がしており、少なくとも AMP 公式サイトが紹介するエコシステムの一覧には掲載されていません。
また、全てのブロックのマージンを調整できるわけでも無いようです。
ということで、似た感じのことを自前でやったらいいんじゃないか、というのが僕なりの結論となりました。
標準の「スペーサー」ブロックは使うべきか？
結論に入る前に。
WordPress の Gutenberg には、ピクセル指定で空白を挿入できる「スペーサー」というレイアウトブロックが用意されています。
これを使う前提で、通常は画像前後のマージンを無しにしておき、空白を開けたい時だけ「スペーサー」を入れる、という方法も考えました。
最新のスマホ版WordPressアプリはスペーサーブロックに対応済みですので、スマホからのブログ更新を考えても、これは強いやり方です。
ただ、「スペーサー」ブロックは空白の高さをピクセル数で指定しており、しかもそれがインラインStyleに記述されるという、「今どきどーなんよ」感がある仕様。
また、スペーサー専用のDIV要素が挿入されるのも、あまり美しいとは言えません。
空の段落と追加CSSクラスを使い分ける事に
ということで色々と考えた結果、ウチのサイトの場合、以下の構成にすることにしました。
- 画像を参照する文は画像（figure＋imgタグ）の直上に書く。
- Pタグ（段落ブロック）の margin-top は多めに、margin-bottom は少なめに取っておく。
- Pタグと画像ブロックの間に margin が必要な場合は、スペーサー代わりに空のPタグ（段落ブロック）を使う
- 上下 margin の削除が必要なブロックは、Gutenberg の「高度な設定」→「追加CSSクラス」を使い、ブロックに（新規作成した）特定のCSSクラスを指定する。
これにより、普段は画像の上にPタグを書けば、閲覧者が「この画像のことを指しているのだな」と分かるし、スペースを空けたい場合はPタグ（段落ブロック）を挿入すれば良い。これならスマホアプリ版WordPressからも使えるのでお便利。
で、例外的に画像の下の margin を取り除きたい場合のみ、「4」の追加CSSクラスをWEB版管理画面から追記する。という形にしたわけです。
「4」に関しては、AMPでは「!Important」属性が使用禁止なので、CSSの優先順位で工夫する形にはなりますが、特に技術的に難易度がある話ではないのでペペっと対応。
ということで、Gutenberg からもこんな感じで、画像の直上に文字が書けるようになりました。
そして、Pタグに「no-margin-top」というクラスを指定すれば、このように画像の直下にも文字を書けるようになりました。
段落の下に空白を入れたい場合は、こんな感じで段落を余分に追加してやるだけです。
今回の方法、画像の直下に文字を書くことだけはスマホ版WordPressアプリからできないものの、どうしてもというなら figurecaption タグを使う、という手を残してはある、という感じ。もっとも、それってセマンティクス的にどうなのよ？という感じではあるので、実装はしないとは思いますが…。
「空の段落が文章を汚してないのか？」と言われれば反論できない部分もありますが、いざとなればシステム的に簡単に除去できるし、Gutenberg のスペーサーブロックを使って、インライン Style を書かれるよりはマシ、ってことで。
何より段落を挿入した方が楽ですしね。
というわけで、かねてからの懸案だった、画像周りのスペーシング問題は、一旦は解決したのでした。