ボクが運営するメルマガや提供しているサービスでは、
WordPressのテーブルに対する質問をたびたびもらうことがあります。
今では当たり前のように使っているテーブルですが、
そう言えば、最初のころは操作が難しく感じてたこともあったよな～
ってことで。
WordPressのテーブルの使い方解説記事を作ることにしました。
その他、テーブルでよく起きる問題の対処法などについても解説しているので、
操作に慣れていない人は、参考にしてもらえればと思います。
この記事の目次
WordPressのテーブルの基礎知識
まずこの「テーブル」って名前がややこしいんですよね。
予備知識がない状態でテーブルって聞くと、どうてしてもこれ↓ を想像してしまいます。
ですが、WordPressで言うところのテーブルとは「表」のことを指します。
きっとあなたも、どっかのブログやサイトで見たことがあるはず。
| こういう | どっかで | 見たことあるやつ |
| １ | ２ | ３ |
| ４ | ５ | ６ |
「テーブル ＝ 表」だと理解しておきましょう。
WordPressでのテーブルの基本的な使い方
テーブルを使うにあたって、
WordPressには標準でテーブル機能が搭載されているので、
基本的にプラグインなどを使う必要はありません。
もっと見た目をよくしたいときなどには、プラグインを使ってもいいんですが、
とりあえずは標準のテーブル機能を使えるようになっておきましょう。
記事内にテーブルを設置する方法
投稿編集画面のメニューにある、「テーブルアイコン」をクリックすることで、
記事内にテーブルを設置することができます。
アイコンをクリックすると、下にテーブル作成画面が表示されるので、
ここから好きなサイズを選択して記事内にテーブルを設置します。
たとえば、「５×４」のテーブルを作成すると、以下のようなテーブルが作成されます。
編集画面ではこのような見た目なので、戸惑ってしまうかも知れませんが、、
公開された記事内では、ちゃんとこのように整ったデザインで表示されるので心配はいりません。
横に長くなりすぎると、スマホで表示したときにデザインが崩れてしまうので注意しましょう。
| １列 | ２列 | ３列 | ４列 | |
| １行 | ||||
| ２行 | ||||
| ３行 |
- テーブルの一つ一つの枠を「セル」
- 縦の列を「列」
- 横の列を「行」
と呼びます。
特定のテーブルの列や行を色違いにする方法
あわせて知っておきたいのが、特定のテーブルの列や行を色違いにする方法。
やり方は簡単です。
まず、色違いにしたい列か行をマウスでドラッグして指定しましょう。
指定されると、このようにセルの色が変わります。
その状態のまま、上のテーブルアイコンをクリックし、「セル」→「セルのプロパティ」を選択しましょう。
セルのプロパティウィンドウが開くので、「セルの種類」→「ヘッダーセル」→「OK」と選択。
するとこのように、選択したセルの色が変わりテキストが中央寄せになるというわけです。
縦の列をヘッダーセルにしたいときも、操作はまったくおなじです。
| １列 | ２列 | ３列 | ４列 | |
|---|---|---|---|---|
| １行 | ||||
| ２行 | ||||
| ３行 |
もし、テキストが中央寄せになってしまうのが嫌なら、
またプロパティ画面を開き「横配置」→「左」→「OK」としてやれば、左寄りにテキストが配置されます。
列・行を増やす・減らす
一旦作成したテーブルの列や行を増やしたり、減らしたりすることもできます。
たとえば、テーブルを作ってみたけど４列目は不要だったなという場合。
まずは、その列をドラッグで選択。
テーブルアイコンから今度は「カラム（列）」を選択し、「列を削除」をクリックするだけでOK。
行を削除したいときも、おなじ方法で削除することができます。
逆に、列や行を増やしたいときは、増やしたい場所のセルをクリックします。
「テーブルアイコン」→「行」→「行を上に挿入」か「行を下に挿入」をクリックします。
すると、このように新たな行が下に追加されるというわけです。
列を増やしたいときは、「カラムを左（右）に挿入」を選択するだけです。
テーブルの幅を変更する方法
次に、テーブルの幅を変更する方法も解説しておきましょう。
たとえば、こんな感じのテーブルにしたいときです。
| 項目１ | 説明１ |
|---|---|
| 項目２ | 説明２ |
| 項目３ | 説明３ |
| 項目４ | 説明４ |
実はWordPressテーブルは、マウスドラッグで幅を変更することもできるんですが、
そのやり方だと、ブログ記事として表示させたときにデザインが崩れてしまいがちなんです。
なので、マウスドラッグは使わずに
テーブルのプロパティ画面から設定してやるのがいいです。
まず、先ほどとおなじように幅を指定したいセルをドラッグで選択します。
「テーブルアイコン」→「セル」→「セルのプロパティ」と進みます。
セルのプロパティ画面で、幅のところにパーセンテージで指定してやるだけで、
上のような幅違いのテーブルが作れるというわけです。
変則的なテーブルを作る方法
最期に変則的なテーブルを作る方法についても。
たとえば、こんな感じ↓ のテーブルを作りたいってときですね。
| １列 | ２列 | ３列 | |
|---|---|---|---|
| １行 | |||
| ２行 | |||
| ３行 | |||
そんな時は、「セルの結合」を使います。
結合したいセルをドラッグで選択し、「テーブルアイコン」→「セル」→「セルの結合」をクリックすればOK。
すると、こんな風に選択したセルが結合され、一つのセルになります。
縦のセル同士を結合させたいときもおなじです。
テーブルの表示が崩れてしまった時の対処法
続いて、テーブルの表示が崩れてしまった時の対処法についても。
よくありがちなのが、こんな感じでテーブルが片側に寄ってしまうというもの。
これはほとんどの場合、
自分でも気付かない内にテーブルをドラッグ操作してしまっている事が原因です。
どうなっているかは、WordPressのテキストエディタモードで見てみるとすぐにわかります。
これが正常な状態のテーブルのHTMLです。
width（幅）が、すべて % で指定されているのがわかりますね。
一番上の「width: 100%;」ってのがテーブル全体の幅で、その他は列の幅のことです。
一方で、一旦ドラッグ操作してしまったテーブルのHTMLはというと。
widthの割合がもうめちゃくちゃだよ・・・
こうなってしまったら、また１から作り直すのが手っ取り早いですが、
今のまま修正したいなら、この数字を修正することでもとの状態に戻すことができます。
各セルには任意の数字を指定し、一番上だけ「width: 100%;」としてやることで、
全幅表示させることが可能です。
WordPressのテーブルのドラッグ操作は便利なようで、不便な機能。
自分ではそんな操作したつもりがなくても、
セルに入力する際にマウスでテーブルを操作してしまったというのは、
全WordPress民のあるあるだと言えるでしょう。
ボクも何度もこのミスを犯して、その度にイライラさせられます。
「やっちまったな...」と気付いた時は、
「 Ctrl ＋ Z 」のショートカットキーで一つ前の状態に戻れるので、
これを活用するようにしましょう。
さいごに
そんな感じで、WordPressのテーブル機能の基本的な使い方と、
表示崩れの対処法について解説しました。
慣れてしまえばどうってことない作業なんですが、
初心者だと、ちょっと難しく感じてしまうテーブル機能。
使い方はわかっていただけたでしょうか。
「ここがわからん！」みたいなことがあれば、
下のコメント欄にメッセージをください。
では、また！
─── あわせて読みたい記事 ───
【特典あり】アダルトサイト利用可のワードプレステーマ『Diver』でできること&メリット！
後で痛い目にあわないために知っておきたいアダルトサイトのパーマリンク設定方法！
