![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
こんにちは・・・
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
こんにちは。
おや、なんだか元気がないようですがどうしましたか?
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
最近食生活が乱れていて毛並みが良くないんだ…。
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
それは一大事ですね!何か対策はしていますか?
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
食事管理のために食べるものを決めて、ブログで発表しようと思ってるよ!
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
みんなに発表することで気も引き締まりますよね!
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
食べるものを表にまとめると、とても見やすくなりますよ。
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
ワードプレスって表も入れられるの?
入れ方を教えて欲しいなー!
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
わかりました!おまかせください。
朝 | 昼 | 夜 | |
月 | りんご | カレー | 焼き魚 |
火 | いちご | ラーメン | 焼肉 |
水 | バナナ | チャーハン | 煮魚 |
木 | りんご | オムライス | 煮豚 |
金 | いちご | ハンバーグ | 刺身 |
土 | バナナ | エビフライ | しゃぶしゃぶ |
日 | さくらんぼ | うどん | パエリア |
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
このような表の作り方を教えます!
ブログやお知らせなどを書いていると、「表があればすごく見やすくなるのに」と思うことありませんか?
ブロックエディタには表を挿入するブロックもあります。
今回はプラグインなしで表を挿入する方法をご紹介します。
表のブロック=テーブルブロック
ワードプレスで表を挿入するときは、「テーブルブロック」を使用して挿入します。
「表ブロックじゃないの?」と思う方もいるかもしれませんが、英語で「テーブル(表)ブロック」と名付けられています。
ワードプレスの編集画面では、以下のような説明になっています。
![テーブル
行と列に構造化して情報を表示するコンテンツを作成します。](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-02_17h25_55.png)
![テーブル
行と列に構造化して情報を表示するコンテンツを作成します。](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-02_17h25_55.png)
テーブルブロックの追加方法
![テーブルの追加方法](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-02_17h28_51-1024x408.png)
![テーブルの追加方法](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-02_17h28_51-1024x408.png)
詳しい追加方法については、こちらをご覧ください。
※「見出し」を「テーブル」に置き換えてください。
行と列、どっちがどっち?
テーブルブロックを追加すると、以下のような画像が表示されます。
![テーブルブロックを追加
「カラム数」と「行数」を入力する](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-02_17h37_32.png)
![テーブルブロックを追加
「カラム数」と「行数」を入力する](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-02_17h37_32.png)
カラムとは、日本語で列のことを指します。テーブルを挿入したら、まず列と行の数を決めます。
※行や列が足りない・多い場合は、後から変更できますのでご安心ください!
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
行と列ってどっちがどっちなの??
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
紛らわしいですよね…。
私もたまにわからなくなります。
行と列の覚え方
![行は横、列は縦](https://techkoya.com/wp/wp-content/uploads/2023/02/表.png)
![行は横、列は縦](https://techkoya.com/wp/wp-content/uploads/2023/02/表.png)
上の画像の通り、行は横、列は縦のことを指します。
その場では覚えているかもしれませんが、時間を置くと忘れてしまうかもしれません。
今回は、「行」「列」それぞれの文字に注目した覚え方を紹介します。
漢字で覚える
「行」「列」それぞれの漢字の右半分(つくり)に注目してみましょう。
![行](https://techkoya.com/wp/wp-content/uploads/2023/02/行.png)
![行](https://techkoya.com/wp/wp-content/uploads/2023/02/行.png)
棒2本が横に向かって伸びているので
「行は横」と覚えられます。
![列](https://techkoya.com/wp/wp-content/uploads/2023/02/列.png)
![列](https://techkoya.com/wp/wp-content/uploads/2023/02/列.png)
棒2本が下(縦)に向かって伸びているので
「列は縦」と覚えられます。
ひらがなで覚える
「ぎょう」「れつ」それぞれの頭文字「ぎ」「れ」の「一画目」に注目してみましょう。
![ぎ](https://techkoya.com/wp/wp-content/uploads/2023/02/ぎ-1.png)
![ぎ](https://techkoya.com/wp/wp-content/uploads/2023/02/ぎ-1.png)
漢字と同じく棒が2本が横に伸びているので
「行は横」と覚えられます。
![れ](https://techkoya.com/wp/wp-content/uploads/2023/02/れ.png)
![れ](https://techkoya.com/wp/wp-content/uploads/2023/02/れ.png)
漢字と同じく棒が下(縦に)向かって伸びているので
「列は縦」と覚えられます。
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
行と列の覚え方はわかりましたか?
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
うん!すごく簡単だね。
どっちだっけ?ってなったら、文字を書いて考えればすぐにわかるよ!
テーブルの設定方法
今回は、カラム数(列数)が8、行数が4の表を作っていきます。
テーブルブロックを追加してそれぞれの数を入力、「表を作成」をクリックすると、表が現れます。
![テーブルを追加](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_12h23_35.png)
![テーブルを追加](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_12h23_35.png)
また、ワードプレスの編集画面の右側にあるメニュー内では、表のスタイル(デザイン)などを設定できます。
![右側にあるメニュー](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_15h22_48.png)
![右側にあるメニュー](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_15h22_48.png)
スタイルの設定方法
デフォルト
表を挿入した時のスタイルがデフォルトです。シンプルな線で区切られています。
![線で区切られた表](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_15h26_55.png)
![線で区切られた表](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_15h26_55.png)
ストライプ
「ストライプ」はシンプルな2色の背景がつき、列ごとの区切り線がなくなります。
デフォルトよりおしゃれな印象があります。
![二色のストライプの表](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_15h28_56.png)
![二色のストライプの表](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_15h28_56.png)
セルの設定
セルとは、表の一つ一つのマス目のことを言います。
先ほど説明した「スタイル」の下にある「設定」では、セルの設定ができます。
表のセル幅を固定
![表](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_15h44_54.png)
![表](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_15h44_54.png)
![設定画面](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_15h45_09.png)
![設定画面](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_15h45_09.png)
表のセル幅を固定しないと、セル内の文字数に合わせてセルの幅が変わります。
しかし、「文字数に影響させずにセル幅を固定したい」などの場合は、「表のセル幅を固定」します。
↓セル幅を固定しない場合
![横幅がバラバラ](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_15h50_47.png)
![横幅がバラバラ](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_15h50_47.png)
文字数が多いセルは幅広く、少ないセルは狭くなる
↓セル幅を固定した場合
![横幅がそろっている](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_15h52_01.png)
![横幅がそろっている](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_15h52_01.png)
文字数に関係なく同じセル幅になる
セル幅が固定されている方が良い、という訳でもありません。用途に合わせて、見やすいと感じるセル幅の設定をしましょう。
ヘッダーセクション
ヘッダー(header)とは頭(head)のことで、表の一番上の部分を指します。
「ヘッダーセクション」を選択すると、表のヘッダー、つまり一番上の部分に新しい行が追加されます。
ヘッダーセクションには、項目のタイトルなどを入れます。
↓ヘッダーセクションなし
![ヘッダーセクションなし](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_16h14_59.png)
![ヘッダーセクションなし](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_16h14_59.png)
↓ヘッダーセクションあり(赤枠)
![一番上の行にヘッダーラベルが表示される](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_16h14_43.png)
![一番上の行にヘッダーラベルが表示される](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_16h14_43.png)
フッターセクション
ヘッダーは頭(head)のことでしたが、フッター(footer)は足(foot)のことで、表の一番下の部分を指します。
「フッターセクション」を選択すると、表のフッター、つまり一番下の部分に新しい行が追加されます。
フッターセクションには、各列に入力された数字の合計値などを入れます。
↓フッターセクションなし
![フッターセクションなし](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_16h14_59.png)
![フッターセクションなし](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_16h14_59.png)
↓フッターセクションあり(赤枠)
![フッターセクションあり](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_16h27_09.png)
![フッターセクションあり](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_16h27_09.png)
セルの追加、削除
表を挿入してから、行や列を追加・削除することもできます。
表の上にあるブロックツールバーの右にある「田」の形のボタンをクリックして、行や列の挿入・削除を選択します。
![ブロックツールバーから行や列の追加・削除をする](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_16h29_12.png)
![ブロックツールバーから行や列の追加・削除をする](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_16h29_12.png)
選択したセルに対して挿入や削除がされます。
例えば1行目の下に行を追加したい場合は、以下の手順で追加します。
- 1行目のセルをクリックする(どのセルでも大丈夫です)
- ブロックツールバーから「行を下に挿入」を選択する
すると、1行目の下に新しい行が追加されます。
![セルを選択して内容を選択する](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_17h44_31.png)
![セルを選択して内容を選択する](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_17h44_31.png)
![1行目の下に行が追加された](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_17h50_02.png)
![1行目の下に行が追加された](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_17h50_02.png)
また、1列目の右に列を追加したい場合は、以下の手順で追加します。
- 1列目のセルをクリックする(どのセルでも大丈夫です)
- ブロックツールバーから「列を右に挿入」を選択する
すると、1列目の右に新しい列が追加されます。
![セルを選択して内容を選択する](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_17h55_28.png)
![セルを選択して内容を選択する](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_17h55_28.png)
![1列目の右に列が追加された](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_18h08_16.png)
![1列目の右に列が追加された](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_18h08_16.png)
お使いのプラグインによって、列を追加すると表が崩れてしまうことがあります。
もしプラグインを停止できる場合は停止すると直りますが、停止できない場合はもう一度表を作り直しましょう。
文字の配置、文字色を調整
![表に文字を入力した](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_18h21_21.png)
![表に文字を入力した](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_18h21_21.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
ここまでできたよ!
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
きれいな表ですね。
ついでに文字の配置や文字色を調整しましょう。
文字の配置は、ブロックツールバーから選択できます。
配置はカラム(列)ごとに、「左寄せ」「中央寄せ」「右寄せ」の配置を選べます。
![ブロックツールバーから配置を選択](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_18h27_57.png)
![ブロックツールバーから配置を選択](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_18h27_57.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
中央寄せにしようっと!
![中央寄せにした表](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_18h31_51.png)
![中央寄せにした表](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_18h31_51.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
いいですね!
テーブルブロックでは、文字色を変更すると表の罫線の色も変更されます。
![文字と罫線が赤色の表](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_18h35_23.png)
![文字と罫線が赤色の表](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_18h35_23.png)
文字色の詳しい変更方法は、こちらで紹介しています。
セル内への画像の入れ方
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
文字だけでなく画像もあったら、表がもっと見やすくカラフルになると思いませんか?
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
すっごく思う!
でもそんなことできるの?
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
インライン画像って覚えていますか?
それを使えばできるんですよ!
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
では、「りんご」の文字の隣に画像を入れてみましょう。
- 「りんご」のセルを選択します。
- ブロックツールバーの真ん中あたりにある「
」をクリックします。 - 上から2番目の「インライン画像」を選択します。
- 画像をアップロードします。
- そのままだと画像が大きいので、サイズを調整します。
※アップロードした画像のサイズがちょうど良い場合は、この操作は不要です。
![インライン画像の入れ方](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_18h45_03.png)
![インライン画像の入れ方](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_18h45_03.png)
![画像をアップロード](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_18h50_05-1024x593.png)
![画像をアップロード](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_18h50_05-1024x593.png)
![画像のサイズを調整](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_18h58_31.png)
![画像のサイズを調整](https://techkoya.com/wp/wp-content/uploads/2023/02/2023-02-03_18h58_31.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
うんうん、なんだかとっても良い感じになってきた!
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
同じようにインライン画像を入れると、もっと素敵になりそうですね!
ぜひやってみてください。
まとめ
- テーブル=表 のことを指す
- 行=横に並んだセル
- 列=縦に並んだセル
- 右側のメニューから表のデザインの設定ができる
- 表を作成した後も行や列の追加・削除ができる
- 文字色を変更すると、表の罫線の色も変更される
- インライン画像を使えば表に画像を挿入できる
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
すてきな表ができそうだよ!
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
あとは、その通りに実行するだけですね!
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
うう…がんばります!
質問などあれば気軽に書き込んでくださいね♪