[`yahoo` not found]
Pocket

7ed3e8a9415a6666ad321049c60df19c_s

ワードプレスで、表を記入する方法を解説します。

一般的にワードプレスに表を書き込むためにはHTMLの知識が必要になりますが、TinyMCE Advancedというプラグインをインストールすることで、誰でも簡単に表を書き込むことが出来るようになります。

プラグインTinyMCE Advanced の設定方法


表の作成方法を覚えることで、アフィリエイト用のサイトで、
商品の性能や価格等を比較する表の作成などに役立ちます。

表の記事投稿画面への挿入


表を書き込む時は、ビジュアルエディターを使います。
投稿画面の「ビジュアル」ボタンを押して
ビジュアルモードに切り替えて下さい。

下記の画像のように赤枠の「テーブルを挿入」の項目を開きます。

bandicam 2016-08-30 15-14-24-473

赤枠ののような四角いマスが表示されます。
これは、表の列数、行数をいくつに分けるかを設定出来ます。
マウスのカーソルを移動させ、マスの数を決めます。
青く着色されている数だけのマスを、投稿画面に記入出来ます。

bandicam 2016-08-30 15-14-24-474

マスの数は、「列数最大10×行数最大10」の数まで設定出来ます。
マスの下に「列数×行数」の数値が表示されます。
この数字の通りに表が記入出来ます。

「5列」×「3行」の表を作ってみます。
最初に下記のような点線の表示が出ます。
これにマウスカーソルを合わせて、矢印方向へ引き延ばして下さい。
引き延ばす長さは、任意のもので構いません。

bandicam 2016-08-30 15-42-18-314

下記のような表が出来ます。

bandicam 2016-08-30 15-38-54-016

表の見方を説明します。表の1マス1マスをセルと言います。
青枠で囲った縦に並ぶセルが「列」、赤枠で囲った横に並ぶセルが「行」です。
セルの中に、文字や数字を記入して表を作成していきます。

bandicam 2016-08-30 15-38-54-017

表の編集方法

下記の表を編集していきます。

bandicam 2016-08-30 17-34-20-828

行を追加する方法


追加する行の位置を決めて、そのセルをクリックします。
例えば、「BC社」のセルの位置に行を追加していきます。
テーブルの項目から「行を上に挿入」をしてみます。

bandicam 2016-08-30 17-40-27-749

赤枠が追加された行です。

bandicam 2016-08-30 17-51-04-858

列の追加方法


追加したいセルの列を選択します。

bandicam 2016-08-30 23-03-54-682

今回は、メニューのテーブルから ⇒「列」 ⇒「列を右に挿入」します。

bandicam 2016-08-30 23-05-21-148

赤枠のセルの列が追加されました。

bandicam 2016-08-30 23-06-09-009

列の削除方法


削除したい列ををクリックします。例えば、ACの列を削除します。
ACのセルをクリックし指定、テーブルの項目から、
列の削除を選択します。

bandicam 2016-08-30 18-03-45-606

列が削除されました。

bandicam 2016-08-30 18-03-58-155

表に見出しを入れる方法


下記のように見出しにしたいセルを選択します。

bandicam 2016-08-30 18-15-40-576

メニューのテーブルから ⇒「セル」 ⇒「セルのプロパティ」ヘ行きます。

bandicam 2016-08-30 18-16-03-502

セルのプロパティが表示されたら、セルの種類をの項目を押します。
「ヘッダーセル」を選択し、「OK」ボタンを押します。

bandicam 2016-08-30 18-16-33-306

下記の赤枠のように見出しらしくなりました。

bandicam 2016-08-30 18-33-30-321

列の縦幅を調節


一例として、一番下のセルの縦幅を調節してみます。
変更したいセルを選択します。

bandicam 2016-08-30 20-30-19-941

メニューのテーブルから ⇒「セル」 ⇒「セルのプロパティ」ヘ行きます。
ここでは一例として、セルのプロパティにある高さのピクセルを現在の24から、
40へ変更し、「OK」ボタンを押します。

bandicam 2016-08-30 20-31-03-371

赤枠のように、一番下のセルの幅がやや広くなりました。

bandicam 2016-08-30 20-31-24-535

行の横幅を調節


同様に行の横幅を変える場合も、変更したいセルを選択します。
この時、見出しの「価格」と書かれているセルは含まないようにします。

こうしておかないと、見出しのセルと同じセルとプラグインに認識され、
選択したセルの中に記載されている全ての文字、
数字が太文字になってしまいます。

bandicam 2016-08-30 21-17-24-596

メニューのテーブルから ⇒「セル」 ⇒「セルのプロパティ」ヘ行き、
セルのプロパティにある幅のピクセルを現在のピクセル数から、
任意の物へ変更してください。「OK」ボタンを押して下さい。

ここでは一例として、ピクセル数151から250へ変更します。
次に「OK」ボタンを押して下さい。

bandicam 2016-08-30 21-02-21-131

下記の赤枠のようにセルの横幅が変更になりました。

bandicam 2016-08-30 21-12-42-555

表の位置を変更する


表の位置を変更するためには、メニューの中にある、
「左寄せ」「中央揃え」「右寄せ」のいずれかを選びます。
赤枠で囲ったのは左寄せです。
さらに、その右隣りに「中央揃え」「右寄せ」という順番で並んでいます。
任意のボタンを選択して下さい。

bandicam 2016-08-30 17-34-20-829

また、セルのプロパティからも同様の位置調節が出来ます。

bandicam 2016-08-30 21-49-24-505

どちらでも使いやすい方を選んで下さい。

セルのプロパティその他の項目

縦配置:表のの位置を縦方向へ調節出来ます。
赤枠の項目から、「上」「Middle」「下」を選択出来ます。
これは、上から「縦揃え」「中央揃え」「下揃え」という意味です。

bandicam 2016-08-30 22-09-16-105

範囲:基本的に普段は使いません。
「セルの種類」をヘッダーセルにすると、見出しの設定が出来ます。
音声ブラウザ用の設定です。HTMLの知識が必要になります。

表の背景に着色する


着色するセルを選択します。
bandicam 2016-08-30 22-37-53-450

次に、メニューのテーブルから ⇒「セル」 ⇒「セルのプロパティ」ヘ行きます。

bandicam 2016-08-30 22-38-24-699

「詳細」を押します。下記のような画面になります。
赤枠の背景色の部分にカラーコードを入れるか、右隣りのチェックを押します。

bandicam 2016-08-30 22-38-36-931

下記のような画面が出てきます。赤枠の○を任意の位置に移動すると、
背景色を指定できます。
背景色が決まったら、「OK」ボタンを押します。

bandicam 2016-08-30 22-39-20-258

画像のように背景色が設定されました。

bandicam 2016-08-30 22-55-32-265

出来上がった表をweb上の画面で確認してみます。

bandicam 2016-08-30 22-56-00-089

このような表が出来上がりました。
基本的な設定はこのように行います。

[`yahoo` not found]
Pocket