MENU
チロ猫
こんにちは、チロ猫です。

ネットショップと趣味のブログをいくつか運営しています。
永久無料ドメイン付き!超高速サーバーConoHa Wing! 詳細

ブロックエディタのテーブル(表)に画像を入れる方法【必見】裏ワザ!WordPress

「テーブル」ブロックに画像が入れられないと分かって、絶望的になったことはありませんか?

がーん、画像が入らない!

ところが、ちゃんと画像が入れられる方法があるんです!

この記事では、ブロックエディタのテーブルに表を入れるための裏ワザについて解説します!

目次

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

テーブルブロックの画像

ブロックエディタの「テーブル」ブロック内に画像を入れる方法をご存じですか?意外と知られていませんが、簡単に画像を入れることができます。

次の2つの方法があります:

  1. そのままコピペする(左揃え、画像装飾なしの場合)
  2. HTMLコードで貼る(サイズ変更、画像装飾、中央揃えをした場合)

①そのままコピペする

表内にそのまま画像をコピペで貼ることができます。この方法だと、左寄せがデフォルトになります。

ボタンで中央揃えすると、列全体が中央揃えになってしまいます。文字は左揃えのままにしたい場合は、次で説明する「②HTMLコードで貼る方法」を使ってください。

テーブル内にそのままコピペしたサンプル
貼り方にジャンプ

②HTMLコードで貼る

HTMLコードで表内に画像を貼り付けると、画像サイズを変更したり画像装飾を施したりすることができます。

HTMLコードで貼り付けた場合、中央揃えの属性が付きます。

テーブル内に、HTMLでコピペしたサンプル
貼り方にジャンプ

それでは早速、貼り方を見ていきましょう。

そのままコピペする(左揃え、画像装飾なしの場合)

一番シンプルな画像の挿入方法(大きさ100%、左揃え)は次の手順で行います。

STEP

をクリックし、テーブル をクリックします。

ブロックエディタで、テーブルをクリック
STEP

列と行の数を指定します。そのままでOKなので 表を作成 をクリックします。

ブロックエディタで表を作成

STEP

表が表示されました。

左右のセル幅が均等になるように、表のセル幅を固定 をオンにしておきましょう。

テーブルのセル幅を固定
STEP

次に、表の下に「画像」ブロックを作成します。

をクリックし、画像 をクリックします。

ブロックエディタで画像をクリック
STEP

目的の画像を表示します。画像を選択してコピーします。

欲しい画像を表示してコピー
STEP

テーブル内の目的のセルにカーソルを移動し、画像を貼り付けます。

右クリックで、貼り付け を選択します。

欲しい画像を表内に貼り付け
STEP

画像が表示されました。現在、左揃えで挿入されています。

表内に画像が挿入された
STEP

テキスト中央寄せ ボタンでも画像を中央配置できますが、列のすべてのセルが中央揃えになってしまいます。

表内で画像を中央揃え

次の手順では、画像だけを中央揃えにする方法で画像を挿入してみましょう。

②画像を表内にHTMLで貼る方法

HTMLで貼る場合は、画像に装飾の属性を付けることが可能です。HTMLで貼ると、自動的に中央寄せされます。

今度は、下記のように画像に手を加えたうえで、表に挿入してみましょう。

  • サイズ変更
  • 画像枠付け

次の手順で行います。

STEP

をクリックし、テーブル をクリックします。

列と行の数を指定します。2×2のままでOKなので 表を作成 をクリックします。

ブロックエディタでテーブルをクリック
STEP

表が表示されました。

左右のセル幅が均等になるように、表のセル幅を固定 をオンにしておきましょう。

表のセル幅を固定
STEP

次に、表の下に「画像」ブロックを作成します。

をクリックし、画像 をクリックします。

ブロックエディタで画像をクリック
STEP

目的の画像を表示して、装飾を選択します。ここでは「角丸」を選択します。
(表示される画像装飾は、使用しているテーマによって異なります。)

画像の装飾を選ぶ
STEP

右のメニューで、画像サイズ 25% を選択します。画像が25%に縮小されました。

画像を縮小する
STEP

画像ブロックを選択した状態で、 > HTMLとして編集 を選択します。

画像をHTML表示
STEP

画像がHTMLで表示されました。

画像のHTMLが表示された

STEP

次は、表内の目的のセルに★印を付けます(HTML表示したときに分かりやすいように目印にします)。

> HTMLとして編集 を選択します。

テーブルをHTML表示
STEP

★印の部分に、下の画像のHTMLコードをコピペします(★印は消して構いません)。

★印とHTMLを置き換える
STEP

★印の部分が、HTMLが挿入されました。

表内にHTMLが挿入された
STEP

> ビジュアル編集 を選択して、表を元に戻します。

表をビジュアル編集に戻す
STEP

表内に画像が表示されました。

画像は、サイズ指定、中央配置、角丸装飾が施されています。

同じ列の下の行は左揃えのままになっています。

表の中央に画像が配置された

テーブルブロックに画像を入れる方法の解説は以上です。

Advanced Editor Tools (旧名 TinyMCE Advanced)のプラグインを使用してテーブルに画像を入れる方法については、別の記事で紹介しています。

よかったらシェアしてね!
目次
閉じる