テーブルブロックに画像を挿入する方法

テーブルブロックに画像を挿入する方法を紹介します。

「インライン画像」で超簡単に入れられます。

STEP

画像を挿入したいセルを選択

STEP

ツールバーの「さらに表示 」の下矢印からインライン画像を選択し、挿入

項目	写真
くーつ
ラーメン
ファイヤーヘアカット

このように「インライン画像」から簡単に挿入できます。

画像を選択すると幅指定や代替テキストを設定できます。

さらに、画像とテキストを並べたい場合

さらに画像の隣にテキストを入れて、画像とテキストを上下中央揃えにしたり、余白を空けたい時はCSSで調整したりします。

項目	写真
くーつ	くーつの画像
ラーメン	ラーメンの画像
ファイヤーヘアカット	ファイヤーヘアカットの画像

& tbody td:has(img) {
  display: flex;
  align-items: center;
  gap: 12px;
}

WordPress 7.0から、ブロックに直接追加CSSが書けるようになりましたね！

基本的にはCSSセレクターは不要ですが、子要素にCSSを適用させたい時にはこのように「&」が使えます。

以上です。