表の作り方
ネットビジネスD運営者の龍一です!
今回は、表の作り方 の紹介についてです。
あなたもワードプレス(WordPress)でも、投稿記事や
固定ページに、表を挿入したい時があると思います。
いろいろ方法は在るのですが
今回は、WordPressの操作パネルからと、
簡単なHTML(テキスト)の入力で
作成する2種を紹介して行きます。
かんたん!表の作り方↓を動画で見る。
プラグイン入力文字・TinyMCE Advanced
ディフォルトで、テーブル(TinyMCE Advanced)が
ツールバーに在る場合は、インストールは不要です。
1.操作パネルで表を作成する方法
まずは、プラグインから操作パネルに表示される
表の作り方を解説します。
事前にダッシュボードのプラグインから
新規追加で「TinyMCE Advanced」を
インストールして>有効化します。
そうすると WordPressの投稿画面の
ビジュアルモードの操作パネルに*マウスオーバーすると
下のように「テーブル」と表示されるマス目のアイコンが出てきます。
*マウスでカーソルを上に重ねる。
その「テーブル」をクリックして
下の「テーブル▶」から展開して行くとマス目が出てきます。
そのマス目を、更にマウスで選択(青)すると
そのマス目(の中1マスをセルと言います。)が
表の区分になります。
上の例だと、下のように横に3縦に3の表が入力スペースに出て来ます。
横幅や縦は角の□をマウスで動かして、表のサイズ変更ができます。
*数字を入力しても変えられますが、マウスの方が楽だと思います。
表の配置方法
次に、表を左・中央・右に配置する方法です。
テーブルアイコンをクリックして「表のプロパティ」を選択します。
すると上のようなウインドが開きますので
配置のなしをクリックして、左・中央・右を選択して選べます。
表の枠線の太さを変える方法
表の枠線も、「表のプロパティ」内で
以下の枠線の右の□に数字を入れる事で変えられます。
数字が大きいほど太くなります。
表の行や列を増やす方法
例えば、毎月1列データを追加したい時に
1から表を作り直すのは大変ですよね?
なので、もう1列・1行を簡単に増やす方法を解説します。
WordPressの場合左右を「列」
上下を「行」というように分けていますので
理解して置きましょう。縦の列と言うのは、この場合ありません(^^:
テーブルアイコンをクリックすると
下の画像のように、行と列がありますので
増やしたい方向(左右)を選択すると1つ増えます。
2回で2行・2列増えます。
また行や列を消すのは3段目の「消除」を選択すれば1つ減ります。
表のマス(セル)を結合させる方法
1つのマスとマスは、隣り合っていれば結合
させることができます。
表の方で結合したいセルを選択します。
マウスで左クリックしたままスライドして選択すると
下のように青くセルが変わります。
3マス以上(セル)とかも繋がっていれば可能です。
選択したら以下のようにテーブルアイコンから
セル▶からセルの結合を選択すればOKです。
表(テーブル)の線とセルに色を付ける方法
まず、下のように表の全て(のセル)を、マウスで
左クリックしたままスライドして選択します。
*選択すると青になります。
次に、ツールバーの「テーブル」をクリックして
「セル」から「セルのプロパティ」をクリック
その中の下の「詳細」をクリックして
スタイルを●から選択して(お好みで選択)
詳細の中の●「枠線の色」の右の□をクリックすると
色パレットが開きますので、好みの色を選択し
「OK」をクリックすると枠線の色が黒以外も選べます。
セルに色を入れたい場合は、例えば一番上に
色を付けるには、まず表の上のセルを選択してから
下のように「セルのプロパティ」の詳細から
●「背景色」で選択すると、以下のように一番上に色が入ります。
*1マス(セル)単位で入れる事も可能です。
表を削除する方法
表の中のセルのどこでもいいので、クリックします。
本文を書く左下に「table」と出ているところが
あるので、その文字をクリックします。
そうすると、表全体が選択されますので
そのままキーボードの「delete」か
「BackSpace」ボタンを押せば消えます。
またはテーブルの中の「表の消去」で消えます。
2.HTMLで作成する方法
もう1つ、全てのテーマで簡単に自在にカスタム出来る
HTMLを少し使ってみましょう。
難しく思うかもですが、これ位は覚えてしまえば簡単で便利ですので(^^:
1.横2マスの表を作る方法
<table border=”2″ width=”500″ align=”center”>
<tbody>
<tr>
<td width=”250″ height=”30″></td>
<td width=”250″ height=”30″></td>
</tr>
</tbody>
</table>
上を全部コピーして、記事を書く部分にテキストモード●で
貼りつけます>以上です。
上のコードを貼ったモノが、ビジュアルモード●にすると
下のような表となって表示されます。
*テキストモード●ビジュアルモード●選択は入力スペース右上に在ります。
HTMLを貼りつけるのは、かならずテキストモード●で行います。
かならずコピーしたのを貼りつけるのは、上の図「テキスト」●を
クリックしてテキストモードに貼りつけるようにしてください。
確認(表示)は「ビジュアル」をクリックして
ビジュアルモード●で、表示をチェックします。
次に上の表は縦に1行ですが、応用で3行にするのはどうするのか?と言うと
下の赤い部分を3セット(オレンジ・緑)へと、コピペで追加して増やします。*色は部分解釈の為。
<table border=”2″ width=”500″ align=”center”>
<tbody>
<tr>
<td width=”250″ height=”30″></td>
<td width=”250″ height=”30″></td>
</tr>
</tbody>
<tbody>
<tr>
<td width=”250″ height=”30″></td>
<td width=”250″ height=”30″></td>
</tr>
</tbody>
<tbody>
<tr>
<td width=”250″ height=”30″></td>
<td width=”250″ height=”30″></td>
</tr>
</tbody>
</table>
上のHTMLコードが、下のように3行の表になって表示されます。
もう、解ったと思いますが1行にしたければ
赤い部分を1セットで1行、10行にしたければ
コピペで10セットにすればOKな訳です。 簡単ですよね。(^^)
では、次に横幅や縦幅を自分のイメージ通りの幅に変えたいという場合です。
<table border=”2″ width=”100″ align=”center”>
<tbody>
<tr>
<td width=”50″ height=”30″></td>
</tr>
</tbody>
</table>
width=”100″ の100と言う数字が、表全体の横幅の表示数になります。
<td width=”50″ height=”30″></td>の50が1つのマスの横幅(列)になります。
また、height=”30″>の30が、1行のマスの高さになります。
この数字を小さくしたり、大きくしたりと、入力数を変えて行けば
好きなマスで、好きなサイズの表が自在に、あなたも作れます。
●注意
合計の数字がズレても表示はされるのですが
一応、横幅のトータルの合計数が上の(例100)になるように分配しましょう。
50+50=100 その方が綺麗に表示され、困った事になりません。
2.横3マスの表
次は、横に2マスではなく、横にマスを3~以上に増やしたい場合の例です。
<table border=”2″ width=”500″ align=”center”>
<tbody>
<tr>
<td width=”100″ height=”32″></td>
<td width=”200″ height=”32″></td>
<td width=”200″ height=”32″></td>
</tr>
</tbody>
</table>
<td width=”200″ height=”32″></td>
を、1マスにしたければ1行に、10マスにしたい場合は
コピペで、上の赤文字の部分を10行に増やせばOKです。
簡単な作業ですよね?(^^:
上のHTMLからビジュアルモード●で表示されたものが
下のように横3マスの表の形になります。
因みに、TOPにある <table border=”2″
の「2」と言うのは、表の線の太さです。
線を太くしたい場合は、大きい数字を入力しましょう。
以上の応用で、表全体のサイズのカスタマイズ
横の列のセル(マス)の数、行数も好きな数での表が
あなたにも簡単に、作成出来ると思いますので
それぞれの記事にマッチしたサイズとセル(マス)の
表を作成してみてください。