【WordPress】テーブルの中に画像(イメージ)や動画(youtoube)を挿入する方法。簡単にコードとして埋め込める

Wordpressテーブルへの画像の挿入と動画の埋め込み WordPress
記事内に広告が含まれていることがあります。

WordPressでテーブルの各セルにブロックを追加することができません。このため、画像を埋め込めず、テキストのみなのか、、と思うかもしれませんが、画像も挿入できます。

ちなみに、「Wordpress テーブル 画像 挿入」「Wordpress テーブル 動画 埋め込み」などで検索すると、プラグインを使ってテーブルを画像として埋め込む方法が見つかったりしますが、これでは、Googleがテーブルの内容を読み込むことができないので、SEO的には避けた方がいいです。

後から編集するのも手間なのでおすすめしません。

ここでは、Wordpressのデフォルトとテーブルブロックを使って、画像や動画を埋め込む方法についてご紹介します。

テーブルの中に画像を挿入する方法

画像にイメージを挿入する場合は、コピペが使えないので、まずは、メディアライブラリに画像を登録するか、アップロードできるようにフォルダに保存しておきます。

いつものように、ブロックからテーブルを用意します。

行列数を選んでテーブルを追加します。

テーブルを選択して、「ⅴ」をクリックします。その中に「インライン画像」があるのでこれを選択します。

メディアライブラリから画像を選択したり、画像をアップロードすればテーブルの中に画像を埋め込むことができます。

ちなみに、「インラインコード」を選択すればコードも埋め込めます。

Affinity Designer & Affinity Photo 移動ツール移動ツール
Affinity Designer & Affinity Photo ドキュメント選択ツールドキュメント選択ツール
<img></img>ソースコードの埋め込み

画像をクリックすれば、下に「幅」と表示されるので、数値を変更すれば表示する大きさを変えることができます。

動画を埋め込む方法

動画を埋め込むには、まず動画のURLをコピーしてきます。

例えばyoutubeで取得してきた以下のURLをテーブルの中に埋め込んでみたいと思います。

<iframe width="560" height="315" src="https://www.youtube.com/embed/AmyIxu39JJE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

いつものようにテーブルを作成します。

テーブルを作成したら、右端の「…」が縦に並んだアイコンをクリックし、一番下の「HTMLとして編集」をクリックします。

すると、テーブルのHTMLが表示されます。

動画を挿入したいセルのtdタグの間に、動画のコードを貼り付けます。

<figure class="wp-block-table"><table><tbody><tr><td><iframe width="560" height="315" src="https://www.youtube.com/embed/AmyIxu39JJE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></td><td>youtubeの動画を埋め込みました</td></tr><tr><td></td><td></td></tr></tbody></table></figure>
youtubeの動画を埋め込みました

もちろんセルごとに、動画を埋め込んだり、画像を埋め込んだり分けることができます。

youtubeの動画が埋め込めます!
engineers-working-around-laptop画像も埋め込めます!

HTML入力モードからビジュアルモードに変更する

エディタ上でHTML入力モードのままだと、正しく挿入できているのかわからないので、その時は「ビジュアルモード」に戻すことができます。

HTMLのテーブルブロックを選択すると、左上に「…」が縦に並んだアイコンが表示されます。これをクリックし「ビジュアル編集」を選択すれば、いつものように実際の表示状態に戻ります。


まとめ

テーブルのセルの中に動画を埋め込むことができました。

今回はyoutubeを埋め込みましたが、他にも画像など、HTMLタグで記述できるものを埋め込むことができます。

ぜひ、いろいろと試してみてください。

タイトルとURLをコピーしました