活用している当サイトですが、ここ3ヶ月くらいでようやくブロックエディタ「Gutenberg」への移行が完了。したは良いものの、色々と課題がまだ残っていまして。エディタ上からする方法」について考えていきます。「Gutenberg(グーテンベルク)」というブロックエディタが標準となりましたが、このエディタ、インライン画像のサポートがめちゃくちゃ弱くてですね。具体的には画像の横幅調整しかできず、「画像ブロック」のような柔軟な調整ができないのです。画像ブロックならサイズ調整は簡単で、オリジナルサイズの指定も一発なのですが、インライン画像の場合はオリジナルサイズの指定ですら面倒。自力でサイズを調べたり計算したりして指定する必要があります。使い勝手の観点から、常に画像を独立ブロックとして別段落扱いにする事にしたので、段落間のスペーシングの有無を明示的に指定する必要が出てきたわけです。エディタ上でこれをどのように指定すればよいかを検討した、という話になります。記事データを汚したくないウチみたいなサイトの場合、記事データは資産そのもの、ですから本文と関係ない付帯情報は極力廃していかなければなりません。別のシステムへ移行する可能性だってゼロではありませんから、記事データがプラットフォームにロックされることは避けたいわけです。対応も考えなければなりません。使わないようにする必要があります。いうことで整理すると、理想的には以下の条件を満たした画像前後のスペーシング方法を考えることになりました。記事データを大きく汚さない。いうプラグインを使えば、画像ブロックの上下のマージンを個別にビジュアルエディタ上から削除できます。公式サイトが紹介するエコシステムの一覧には掲載されていません。WordPressまた、全てのブロックのマージンを調整できるわけでも無いようです。いうことで、似た感じのことを自前でやったらいいんじゃないか、というのが僕なりの結論となりました。標準の「スペーサー」ブロックは使うべきか?結論に入る前に。ピクセル指定で空白を挿入できる「スペーサー」というレイアウトブロックが用意されています。これを使う前提で、通常は画像前後のマージンを無しにしておき、空白を開けたい時だけ「スペーサー」を入れる、という方法も考えました。最新のスマホ版WordPressアプリはスペーサーブロックに対応済みですので、スマホからのブログ更新を考えても、これは強いやり方です。「スペーサー」ブロックは空白の高さをピクセル数で指定しており、しかもそれがインラインStyleに記述されるという、「今どきどーなんよ」感がある仕様。スペーサー専用のDIV要素が挿入されるのも、あまり美しいとは言えません。空の段落と追加CSSクラスを使い分ける事にということで色々と考えた結果、ウチのサイトの場合、以下の構成にすることにしました。画像を参照する文は画像(figure+imgタグ)の直上に書く。「高度な設定」→「追加CSSクラス」を使い、ブロックに(新規作成した)特定のCSSクラスを指定する。これにより、普段は画像の上にPタグを書けば、閲覧者が「この画像のことを指しているのだな」と分かるし、スペースを空けたい場合はPタグ(段落ブロック)を挿入すれば良い。これならスマホアプリ版WordPressからも使えるのでお便利。取り除きたい場合のみ、「4」の追加CSSクラスをWEB版管理画面から追記する。いう形にしたわけです。「4」に関しては、AMPでは「!Important」属性が使用禁止なので、CSSの優先順位で工夫する形にはなりますが、特に技術的に難易度がある話ではないのでペペっと対応。こんな感じで、画像の直上に文字が書けるようになりました。Pタグに「no-margin-top」というクラスを指定すれば、このように画像の直下にも文字を書けるようになりました。段落の下に空白を入れたい場合は、こんな感じで段落を余分に追加してやるだけです。タグを使う、という手を残してはある、という感じ。それってセマンティクス的にどうなのよ?という感じではあるので、実装はしないとは思いますが...。書かれるよりはマシ、ってことで。何より段落を挿入した方が楽ですしね。いうわけで、かねてからの懸案だった、画像周りのスペーシング問題は、一旦は解決したのでした。TIPSWordPressサイト開発この記事の筆者:ひろも(hiromo)管理人。変なニュースなど幅広く。物理作業は苦手だけど論理作業はけっこういけちゃう人。【WordPress】「次に見られた記事」プラグインの隠しオプション(画像サイズ・数をテンプレートから指定。うずらの虜」はコスパ高め。Mリアルカードの新規発行が再開!エポ金の2.5%還元を店頭クレカ(VISA)でもインネパ、というより純ネパ。Tablet」が6月20日発売予定。対策は?PayPay、他社クレジットカード払いを利用停止。キャリア決済チャージ手数料2.5%へ。TVが品切れなら、ドンキや家電量販店で買うといいよ。Utility」ぜひ読んで欲しい記事Windows上の任意アプリでGoogle音声入力を使う方法(インライン入力)「12人の少年が13人になっちゃう画像」のトリックを種明かししてみた「おなら」のエネルギーはマグニチュード換算でM-1.5クラス【DIY】窓用の取り外し可能な防音壁を鉛で自作したら効果絶大スマホの通知をPCへ転送・処理できる「Pushbullet」タイマーなしで温泉たまごが作れる!「本格温泉たまご器」が凄いチャタリングが嫌で脱ロジクール。月額無料も!チョイ使い向け「0円SIM」「超格安SIM」を探す(月額440円以下、楽天モバイル・0SIMの後継・代替)洗剤を変えるよりスポンジを変える。