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

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

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

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

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

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

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

目次

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

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

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

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

①そのままコピペする

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

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

貼り方にジャンプ

②HTMLコードで貼る

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

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

貼り方にジャンプ

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

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

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

STEP

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

STEP

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

STEP

表が表示されました。

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

STEP

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

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

STEP

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

STEP

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

STEP

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

STEP

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

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

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

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

  • 中央揃え
  • サイズ変更
  • 画像枠付け

次の手順で行います。

STEP

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

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

STEP

表が表示されました。

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

STEP

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

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

STEP

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

STEP

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

STEP

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

STEP

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

STEP

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

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

STEP

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

STEP

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

STEP

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

STEP

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

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

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

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

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

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