WordPress の投稿に表を挿入する方法

  • このエントリーをはてなブックマークに追加

WordPress の記事に表を挿入するにはHTMLの知識が必要だ。しかし、プラグインを利用すると初心者の方でも簡単に表を挿入することができる。また表を使う方法を覚えるとコンテンツを読みやすくすることができ、ユーザーの離脱を防ぐことにつながる。

そこで、ここでは表の、

  • 挿入
  • 編集
  • 調整
  • リセット

する方法を解説する。

注1:表を作成する前にやっておくべき設定
表を作成する前に「 TinyMCE Advanced の設定」は必須なので完了しておこう。
注2:表のデザインについて
表の文字・罫線・背景の色味などはテンプレートのデザインに依存する。ここでは例としてテーマ” Twenty Twelve “を使って解説する。

1.表を挿入する方法

表のアイコンをクリックし、「テーブルを挿入」にカーソルをあてよう。“ テーブル ”という表記は、HTML ソースで表を作る時にテーブルタグを使うことから来ている。

下図赤枠のようなパネルが表示されたら、表の行と列の数値を決めてクリックしよう。

※ パネルは「列数(最大数10)× 行数(最大数10)」の範囲で選択ができる。またパネルの下部に「列数×行数」の数値が表示されるので、この数値を確認しながら表を挿入しよう。

すると図のようにエディタに表が挿入される。

表について簡単に解説する。基本的なことだが表の編集・調整がしやすくなるので確認がてら目を通そう。

「セル」とは、表にある1つ1つのマスのことを指す。そして「列」は縦に並ぶセルを指し、「行」は横に並ぶセルをのことを指す。このセルの中にテキストや数値を入力して表を作成する。また、セルのプロパティを使うと表の見出しを設定したり、列幅を調整することもできる。

2.表を編集する方法

表のツールには多くの操作方法があるので、混乱しないためにもここの解説を基本としてしっかり抑えておこう。

2−1.行・列を追加する方法

ここでは行の追加方法を解説する。この解説を参考に列の追加も同様にできるようになる。

まず、追加するために基準となる行を決めて、そのセルをクリックする。

次に「表」アイコンをクリックして行を挿入しよう。ここでは例として「行を上に挿入」をクリックする。

すると下図のように行が追加される。

2−2.行・列を削除する方法

ここでは列を削除する方法について紹介する。この解説を参考に行の削除も同様にできるようになる。

まず、表の中の削除したい列のセルをクリックしよう。

「表」アイコンをクリックして「列の削除」をクリックしよう。

これで列が削除される。

3.表を調整する方法

単にテキストや数値を羅列した表は読む気を失わせる可能性があるが、見やすく整えられた表なら読み進めてくれるだろう。ここでは見やすい表にするための調整方法を解説する。

3−1.見出しとデータを区別して見やすくする方法

次の図のように項目名にしたいセルを選択しよう。

※ 項目名の「番号」をドラッグして(クリックしたまま)、「おいしさ度数」までカーソルを持っていくと図のように選択できる。

次にメニューより「テーブル → セル → セルのプロパティ」の順にクリックしよう。

すると「セルのプロパティ」画面が表示される。

この画面の設定方法を覚えておけば、表を調整する際に便利なので一つひとつ解説しておく。

項目名 内容
セルの横幅を調整したい時、ピクセル数を入力して調整できる。列の横幅を調整したい時によく使う。
高さ セルの高さを調整したい時、ピクセル数を入力して調整できる。
セルの種類 「ヘッダーセル」を選択すると表の見出しを作ることができる。設定後、文字は太字になる。
範囲 「セルの種類」に似た設定項目で見出しの設定ができる。ここでの設定は主に音声ブラウザなどで役立つ。ほとんど使用することはないが、HTML に関して理解を深めたい方は、見出しの対象範囲の指定を参考にすると良いだろう。
H Align Horizontal Align の略で「水平方向」という意味。ここで右寄せ / 左寄せ / 中央揃えの3パターンから選ぶことができる。
V Align Vertical Align の略称で「垂直方向」を意味する。上揃え / 中央揃え / 下揃えの3つから選べる。

以上が各項目の解説である。

ここでは、見出しを作るため「セルの種類」から「ヘッダーセル」を選択して「OK」をクリックしよう。

ブラウザで確認すると下図の赤枠の通り見出しとして分かりやすくなる。

3−2.列の横幅を調整する

これも先の「3−1.見出しとデータを区別して見やすくする方法」で解説した「セルのプロパティ」を使用すると簡単に設定できる。

まず調整したい列のセルをクリックする。

ポイントは1行目のセルを調整すること
1行目のセルを調整するだけで列の幅を調整することができる。2行目以降のセルの幅を調整するとセルの管理が複雑になり、どこを編集したかわからなくなるので気をつけよう。

メニューより「テーブル → セル → セルのプロパティ」の順にクリックしよう。

図の「セルのプロパティ」画面が表示されるので、「幅」に数値を入力しよう。

設定が完了したら「OK」をクリックしよう。

ピクセル数を計測する方法
コンテンツ内のピクセル数を計測したい場合、ブラウザの拡張機能を使うと簡単に計測できる。Google Chrome なら「Page Ruler」、Firefox であれば「MeasureIt」が使いやすい。もちろんどれも無料のツールだ。

実際にブラウザの表示を確認して横幅を決めよう。ここではいくつかのピクセル数で変更してプレビューで確認し、130px がちょうど見映えの良い横幅となった。

3−3.データを右寄せ・左寄せ・中央揃えにする

ここでは例として全てのデータを右寄せにする方法を解説する。まず、調整したいセルを選択しよう。

続いて「右寄せ」アイコンをクリックしよう。

中央寄せにしたい場合は「中央寄せ」アイコンをクリックしよう。ここで、セルのプロパティを開くと「H Align(水平方向の調整)」があり、同様の機能をする。しかし、ソース上は同じ内容なので、使いやすい方を選ぶとよい。

これがブラウザでの表示イメージだ。

4.表をリセットする方法

表中のデータを調整していると、下図のように編集内容がごちゃごちゃになってしまい、まとめてリセットしたいこともあるだろう。

その時に「フォーマットをクリア」という便利なツールを使うと簡単にリセットができる。

※ ただし、ここの解説方法ではセルのプロパティで設定したセルの種類と範囲はクリアされないため、セルのプロパティでクリアにするしかない。

まず表をどこでも良いのでクリックすると、編集画面の下部に「table」タグが表示されるのでクリックしよう。

すると表のセルが全て選択される。

次に「フォーマットをクリア」アイコンをクリックしよう。

これで表の編集内容がリセットされる。

  • このエントリーをはてなブックマークに追加

コンテンツ制作に集中するだけで圧倒的な成果を上げる
『 bazubu-shiki 』

cta_bazubushiki“ bazubu-shiki(バズブシキ)” とは、バズ部の運営ノウハウを凝縮した
クラウド型コンテンツマーケティング専用CMSです。

  • ・検索エンジンを徹底的に意識したサイト構造
  • ・誰でも簡単にコンテンツが作れる
  • ・コンバージョンを獲得するための機能も完備
  • ・外部連携も安心!SNS、GAとの連携も万全サポート
  • ・常に最新機能が使える!クラウドを活かしたシステム

専門知識がない方でもコンテンツ制作にのみ集中することができます。
100万PVを超えるメディアを作るために、ぜひ導入してみてください。


" bazubu-shiki " について詳しく見る

最新の記事情報が取得できます

Facebook

「いいね!」ボタンを押すと、最新情報がすぐに確認できるようになります。

Twitter

「フォローする」ボタンを押すと、最新情報がすぐにツイート上で確認できるようになります。

コメントはこちらから

  1. こんにちは。いつも参考にさせていただいております。
    一点質問させてください。
    テーブルを作成し、表を表示させたいのですが枠線が表示されません。
    ビジュアルエディタ上では枠線が表示されますが、ブラウザの表示では
    枠線が消えてしまいます。
    TinyMCE Advancedの設定も済んでいます。
    HTMLにborder=”1″などの属性も入れてみましたが改善しません。
    以上です。
    用件のみで失礼いたします。

    1. ご質問ありがとうございます。
      テーマは何をお使いでしょうか?

      基本的に表のスタイルは、WordPressテーマのデザインに依存します。
      (例のテーマ” Twenty Twelve “では縦線が非表示というデザインです)

  2. ご回答ありがとうございます。
    テーマは購入した教材のオリジナルテーマです。
    テーマによっては枠線が非表示と言うことがあるんですね。
    と言うことは、テーマのデザインを調べるべきということになりますね。
    その場合はCSSを、と言うことになるのでしょうか。
    早速やってみます。
    ありがとうございました。