ツイート
シェア
LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

WordPress5, テーブルのセルに画像を挿入する方法。プラグインは使いません。

wordpress image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

WordPressはバージョン5になってから、テーブルの編集でできることがかなり少なくなっているのですが、セル(項目)に画像の挿入はできます。

エディターの標準機能を使うのでプラグインもいりません。

(WP5系のエディターはGutenbergがメインで使われている。)

テーブルのセル(項目)に画像を挿入するのはかんたんです。

エディターのメニュー(上部)の『インライン画像』を選んで、いつものようにメディアライブラリから選択するだけ。

Gutenbergメニュー インライン画像
wordpress image

画像サイズの変更もできます。テーブルに挿入した画像をクリックすると、サイズ変更メニューが表示されます。

インライン画像のサイズ変更

テキストボックスにサイズを記入して矢印ボタンを押せばOK。サイズはpx(ピクセル)で、ちょっと分かりづらいですが矢印が適用ボタンです。

wordpress image

幅を変更すると、高さのサイズは自動調整されます。

この機能はテーブルのものではなく、エディターのGutenbergの編集機能です。カラムや引用のブロックでも挿入できますし、文章を書く段落ブロックでも挿入できます。

まぁ、段落ブロックでは、一般的には画像ブロックを使いますが。

インラインなのでテキストの途中にも挿入できる。

段落ブロックでインライン画像を挿入すると分かりやすいですが、インライン画像で挿入した画像の両サイドにはテキストが入力できます。

(1行のテキストの途中で画像を差し込める。)

左のテキストwordpress image右のテキスト

ボクは、CSSで<img>に vertical-align: middle を設定しているので、画像の中央にテキストが来ますが、デフォルトは編集画面と同じベースライン(下端)になります。

絵文字っぽいこともできますね?

サイトのパフォーマンスが悪くなるので頻繁に使うものではありませんが。

前の投稿
WordPress5, デフォルトのテーブルで列をヘッダーに変える方法。プラグインなしで。
WordPress5, インライン画像, インラインコード, キーボード入力って何だ?
次の投稿

WordPressの本

post-cta-image

たくさんあるなかで、WordPressの基本が学べる、目的別に学べる本を選びました。

  • WordPressの基本。
  • Webサイト作成から運用まで全体的に学ぶ。
  • かんたんなカスタマイズを学ぶ。
  • 何も分からないところから学ぶ。
  • WordPressからPHPプログラミングを学ぶ。

の5冊です。どうしてもネット上で調べて勉強するのが苦手という人におすすめです。

この内容をモノにすればほかの本は必要ありません。あとは自分の力で、書籍を使わずにインターネット上にある情報だけで学んでいけます。

コメントを残す