表に画像を表示させる方法

画像を自由に配置するために表を使おうと思ったのですが「テーブル」ブロックだと画像を入れる方法が見つかりませんでした。

仕方なく、クラシックエディタで表を作って並べてましたが「チロ猫」さんのサイトに「目から鱗」の方法が載ってたので早速実装してみた備忘録です。

プラグイン不要!ブロックエディタのテーブルに画像を入れる方法

wordpressのバージョンかテーマの違いか分かりませんが画像が中央に並んでくれませんでしたが、表に画像を入れることが出来ました。

(+)で「テーブル」ブロックを開く

カラム数や行数を入れ表を作成(カラム数や行数はあとからでも変更できるので適当に)

左右のセル幅が均等になるように「表のセル幅を固定」をONにする。

表の画像を表示したいセルに印をつける

ここが「目から鱗」のポイント!前にもHTML編集で行けそうだと挑戦したものの

Gutenberg(ブロックエディタ)ではコードが⇩こんな状態ですよ

画像のURLをどこに入れたらいいものやら、目がチカチカします。
下手に入れれば表自体が崩れるし、強制修正されるだろうし、

チロ猫さんの目から鱗の裏技がこちら⇩

画像を入れたいセルに印をつけておく!!です。

それを「HTMLで編集」に切り替えて見てみると⇩⇩

画像のURLを貼りつける場所が一目瞭然!

まさに「なるほど~」「こんな方法があったか~」です。

(+)で画像ブロックを開く

入れたい画像をアップロードするかライブラリから選択するかします。

画像サイズを変更する。(←こことっても大事!!)

1枚の画像でもサイズで画像のURLが違うから、先に縮小しておかないとダメなんですね。

画像のブロックを「HTMLで編集」に切り替える

画像のブロック選択した状態で「HYMLで編集」に切り替えると⇩こうなります。

えっくせれんと!!びゅーてぃほー!!( ^^)/□☆□\(^^ )カンパーイ!

簡単に貼り付け位置が確認できます。その作業の繰り返しです。

前後の< >とかを消さないように注意してマークした印を消します。

チロ猫さん、ありがとうございました。

Wordpress

Posted by yukko