WordPressのTinyMCE Advanced を使って表を作成する

WordPressを使用してブログを書いている人も多いハズです。

記事に、表、テーブル、ボックス、色々な呼び名がありますが
挿入してわかりやすくしたい時、HTML の知識がなくてもボックス（表）を
簡単に作成することができます。

このビジュアル方式で作成しています。

それが「TinyMCE Advanced」を使って投入する方法です。

僕は記事をTinyMCE Advancedを使って記事を書き、レアウトも
HTML を使わずにビジュアルで投稿の仕上げをします。

文字の大きさや色付など多くのことができるからです。

HTMLも少しわかってきたのでこちらで最終的にチェックしてから
投稿します。

 

 

表を作成する前にして置く事

なずTinyMCE Advanced を導入して設定して置く事です。

インストール後、必要な機能を追加して自分が使い易いように
機能を追加しておこう。

WordPressブログ作成時に最初に入れたいプラグイン
ここにTinyMCE Advanced導入方法が書かれています。
https://tomio23.com/archives/3723

 

スポンサードリンク

 

表を挿入する方法

1.ビジュアルとテキストこちらをチェックして
WordPressで記事投稿画面に行きます。

そうするとTinyMCE Advancedのこのような、いつも使用
している投稿画面になります。

「ビジュアルエディタモード」を選択し、「テーブル」→「テーブルを挿入」を
選択します。

2.表のアイコンをクリックすると「テーブルを挿入」が出てきます

３「テーブルを挿入」にカーソルを当てます。４角の
テーブルが出てきますので、これを使って使いたい数を決めます。

 
下の図のようなパネルが表示されたら
行数と列数を選びます。

どちらも最大数が10まで選ぶ事ができます。

 

TinyMCE Advanced を使って投稿の表に「背景色」をつける方法
下記を御覧ください。
https://tomio23.com/archives/7080

 

注意：後で付け足したり、削除することはできますので
行数と列数の数を、確認して表を挿入しましょう。

 
作成したい数を反転した後クリックすると下図のように
表示されます。

 
ドラッグ＆ドロップして大きさを決めます。
すると図のようにエディターに表が挿入されます。

 

表の名前の呼び方

表についての名称ですが、編集の時に名称を知ることで
やり易くなりますので、確認しときましょう。

 
「行」とは赤枠でかこまれた部分を言います。
また「青」枠で囲まれた部分は列になります。

「セル」はグレーの部分、表にある１つ１つのマスのことを
言います。

このセルの中にテキストや、数値を入力して表を完成させます。
またセルのプロパティを使うと表の見出しを設定したり、

列の幅も自動から固定に調節することもでき、もちろんカラーも
設定できます。

 

表を編集する

簡単に色々編集できますが、ここでは、はじめに混乱
しないように指定されてるカラーで基本を覚えましょう。

 

行や列を追加する方法

ここでは初めに行の追加方法を解説します。
やり方は列の追加も似ています。

ですので列の追加も同様にできるようになります。

追加するために基準となる行を決めて、そのセルをクリックして
「行を下に挿入」をクリックする。

 
すると、「行」が下図のように追加され４行になる。

 

行や列の削除

行の削除は、削除したい表の行をクリックして「行を削除します」

 
このようにすると、４つの行が、削除され３つの行になりました。

 
「表」アイコンをクリックして列の削除」をクリックすると列が
削除されます。

 
これで列も削除されました。１つの列になりました。

 

表の編集

見出しとデータを区別して見やすくします。

次のように見出しにしたい「セル」を選択します。

セルの項目名から内容までドラッグして選択します。

 
次にメニューより、「テーブル」から「セル」、「セルのプロパティ」の
順にクリックします。

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

セルのプロパティで幅だけを指定します、携帯電話等で見た時には
横幅を決めずに自動が良いと思います。
 

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

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

Google機能拡張これは欠かせない下記を参照
https://tomio23.com/archives/4457

 
「セルのプロパティ」で「幅」だけ指定すると、
「列の高さ」は自動で広がります。

 
この画面の設定方法を知ることで、表を調整する際は、ほとんど
ここで行います。

項目名	内容（できること）
幅	セルの横幅を調整したい時、ピクセル数を入力して調整します。今回は600にしました。「高さ」を指定しないと「自動」になります
高さ	セルの「高さ」を調整したい時、ピクセル数を入力して調整します。
行の種類	「ヘッダに」したい部分（セル）をドラッグし「行」のプロパティ→一般→ボディ→をクリックするとヘッタなどの項目で指定ができます。
セルの編集	見出しの設定ができるほか、セルのプロパティの詳細から「枠線の色や」「背景の色」などがカスタマイズできます。 背景色は行のプロパティ→詳細からもできます。
範囲	どのデータに対する見出しなのかを指定することができる。
横配置	セル内での水平方向の文字位置を指定することができます。
縦配置	セル内での垂直方向の文字位置を指定することができます。
枠線の色	セルの枠線の色を指定することができる。 選択した色はスタイルに反映されて記述される。
背景色	セルの背景色を指定することができます。 選択した色はスタイルに反映されて記述されます。

 

文字を右寄せ・左寄せ・中央揃え、フォントサイズを編集する

ヘッダー部分のセルを選択し中央揃えに、文字をストロング（強く太く）
してみた、もちろんフォントサイズも変えることができる。

 
文字の色も「文字を選択して、文字カラー」を変更することも
いつもの要領ですることができます。

削除したい「行」を選択し、テーブルより、「行の削除」でできます。

 
これで表の削除したい「行が」削除できます。