WordPress初心者にも扱いやすいレンタルサーバー heteml
Post Image

WordPressで表組み(テーブル)を作るテキストエディターツール解説

WordPressの投稿画面で使われているヴィジュアル・テキストエディター(TinyMCE)には、標準では表組み(テーブル)ツールはありませんが、ツールを拡張するプラグイン「TinyMCE Advanced」を使用すると追加できます。表組みツールの使い方を説明します。

テーブル関係のツールアイコン一覧
アイコン機能解 説
表を挿入表を挿入カーソルのある位置に表を挿入し、属性を設定する。
行のプロパティ行のプロパティカーソルのある行、またはすべての行の属性を設定する。
セルのプロパティセルのプロパティカーソルのあるセル、またはすべてのセルの属性を設定する。
行を上に挿入行を上に挿入カーソルのある行の上に行を追加する。
行を下に挿入行を下に挿入カーソルのある行の下に行を追加する。
行を削除行を削除カーソルのある行を削除する。
列を左に挿入列を左に挿入カーソルのある列の左に列を挿入する。
列を右に挿入列を右に挿入カーソルのある列の右に列を挿入する。
列を削除列を削除カーソルのある列を削除する。
セルの結合を解除セルの結合を解除結合したセルを解除して元に戻す。
セルの結合セルの結合複数のセルを結合して一つのセルにする。

表組み(テーブル)の基本

テーブル

テーブルは一般に表形式のデータを表示するのに使われます。テーブルは縦横に複数のマスで構成されています。1マスを「セル」といい、横のセルの集合を「行」、縦のセルの集合を「列」といいます。

セルには、データを記入するデータセルと、見出しを記入するヘッダセルの2種類があります。

表組み(テーブル)の作成方法

  1. テーブルを挿入したい場所にカーソルを移動し、表を挿入( 表を挿入 )をクリックします。
    ご注意:Firefoxをお使いの場合、作成したテーブルの後に段落がないとテーブルからカーソルが抜けなくなるバグがあります。あらかじめ、文字を入力した段落と段落の間にテーブルを挿入するようにしてください。
  2. 設定ボックスが表示されますので、テーブルの属性を指定します。
    「一般」タブ
    1. 「列」と「行」の数を設定する。
    2. 「Cellpadding」「Cellspaceing」の値を0にする。
    3. 表に外枠が必要な場合は「枠線」に1以上の数値を入力。数値が大きいほど線の幅が太くなる。枠線が必要ない場合は0にする。
    4. 「幅」と「高さ」を設定する(整数を入力)。空欄にすると自動的にデータの文字数に合わせる。
    5. 表の上にタイトルを付けたい場合は「表に見出しを付ける」にチェックを入れる。
    設定ボックス1
    「上級者向け」タブ
    1. 「スタイル」に数値が入力されている場合はそのままにしておく。
    2. 表に外枠を設定したい場合は「枠線の色」のカラーをクリックして色を選択する。
    3. 設定が完了したら「挿入」ボタンをクリックする。
    設定ボックス2
  3. 表に外枠を設定した場合、Firefoxでは内枠も表示されますが、InternetExplorerの場合は内枠は表示されません。内枠を設定する場合はセルを選択して、セルのプロパティ(セルのプロパティ)をクリックします。設定ボックスが表示されたら、「上級者向け」タブをクリックします。
    1. 「枠線の色」のカラーをクリックして色を選択する。
    2. 「全てのセルの更新」を選択する。
    3. 設定が完了したら「更新」ボタンをクリックする。
    設定ボックス4

「行」「セル」の編集

背景色を設定する

「行」単位で背景色を設定したい場合は、設定したい行にカーソルを移動させて、行のプロパティ(行のプロパティ)ツールをクリックします。設定ボックスが表示されたら、「上級者向け」タブをクリックします。

  1. 「背景色」のカラーをクリックして色を選択する。
  2. 「選択行の更新」になっていることを確認する。
  3. 設定が完了したら「更新」ボタンをクリックする。
設定ボックス3

「セル」単位で背景色を設定したい場合は、設定したいセルにカーソルを移動させて、セルのプロパティ(セルのプロパティ)ツールをクリックします。設定ボックスが表示されたら、「上級者向け」タブをクリックします。

  1. 「背景色」のカラーをクリックして色を選択する。
  2. 「選択セルの更新」になっていることを確認する。
  3. 設定が完了したら「更新」ボタンをクリックする。

属性(プロパティ)を設定する

設定ボックス5

背景色と同じようにしてセルや行の属性を設定できます。主な項目は以下のとおりです。

設定できるプロパティ
プロパティ名解 説
配置セル内の配置。(左揃え、右揃え、中央揃え)
垂直方向の配置セル内の上下方向の配置。(上揃え、中央揃え、下揃え)
セルの横幅(整数値)自動的に、同じ列中の最も大きい幅のセルに揃う。
高さセルの高さ(整数値)自動的に、同じ行中の最も大きい高さのセルに揃う。
セル種別データを記入するセルは「日付」、見出しを記入するセルは「ヘッダ」にする。テーマが対応している場合は見た目が変わる。

設定した属性を適用する際、適用する範囲を選べます。選択セル、選択行、行内のセル、奇数行、偶数行、全てのセル、全ての行などが選べます。

Tips: データ量の多い表では、行の背景色を奇数行または偶数行にだけ設定すると見やすくなります。

列、行の追加・削除、セルの結合

列、行の追加・削除

カーソルがある位置の行の下に新たな行を追加したい場合は、行を下に挿入(行を下に挿入)をクリックします。同様に、上に挿入したい場合は、行を上に挿入(行を上に挿入)削除したい場合は、行を削除(行を削除)をクリックします。

カーソルがある位置の列の左に新たな列を追加したい場合は、列を左に挿入(列を左に挿入)をクリックします。同様に、右に挿入したい場合は、列を右に挿入(列を右に挿入)削除したい場合は、列を削除(列を削除)をクリックします。

セルの結合

複数のセルを結合して一つのセルにすることが出来ます。

  1. 結合したいセルの中で基準となるセルをクリックする。列方向の場合は、一番上のセル、行方向の場合は一番左のセルが基準になる。
  2. セルの結合(セルの結合)をクリックする。設定ボックスが表示される。
  3. 列方向に結合したい場合は「」に結合するセルの数を、行方向に結合したい場合は「」に結合するセルの数を入力する。
  4. 設定したら「更新」ボタンをクリックする。
  5. 結合したセルを解除して元に戻す場合は解除したいセルにカーソルを移動して、セルの結合を解除(セルの結合の解除)をクリックする。
設定ボックス6

2 コメント/トラックバック

この記事に対してのコメントがありましたらコメントフォームから送信してください。

Trackbacks

  1. 「TinyMCE Advanced」プラグインで追加できるツールの使い方 | フリッヂデザイン

    [...] 表を挿入[table]カーソル位置カーソルのある位置に表組み(table)を挿入する。詳細はこちら [...]

  2. 「TinyMCE Advanced」プラグインで追加できるツールの使い方 | フリッヂデザイン

    [...] 表を挿入[table]カーソル位置カーソルのある位置に表組み(table)を挿入する。テーブル(TABLE)ツール解説 [...]

コメントフォーム