読者です 読者をやめる 読者になる 読者になる

WordPress

アフリエイトブログの作成と運営を考える

WordPress の投稿に表を挿入する

参考記事

WordPress の記事に表を挿入するにはHTMLの知識が必要だ。しかし、プラグインを利用すると初心者の方でも簡単に表を挿入することができる。

ここでは表の、「挿入」「編集」「調整」「リセット」する方法を紹介します。

 

注1:表を作成する前にやっておくべき設定
表を作成する前に「 TinyMCE Advanced の設定」は必須なので完了しておこう。

 

TinyMCE Advanced の設定方法と使い方

 

 

注2:表のデザインについて
表の文字・罫線・背景の色味などはテンプレートのデザインに依存する。ここでは例としてテーマ” Twenty Twelve “を使って解説する。

 

1.表を挿入する方法

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

 

f:id:yumeji773:20170116142020p:plain

 

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

 

f:id:yumeji773:20170116142117p:plain

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

 

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

f:id:yumeji773:20170116142243p:plain

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

 

f:id:yumeji773:20170116142511p:plain

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

 

2.表を編集する方法

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

 

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

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

 

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

 

f:id:yumeji773:20170116142947p:plain

 

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

 

f:id:yumeji773:20170116143038p:plain

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

 

f:id:yumeji773:20170116143227p:plain

 

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

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

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

 

f:id:yumeji773:20170116175642p:plain

 

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

 

f:id:yumeji773:20170116175746p:plain

これで列が削除される。

 

3.表を調整する方法

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


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

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

 

f:id:yumeji773:20170116180612p:plain

 

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

 

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

 

f:id:yumeji773:20170116180747p:plain

 

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

 

f:id:yumeji773:20170116180902p:plain

 

この画面の設定方法を覚えておけば、表を調整する際に便利なので説明します。

 


◆幅 ・・・・セルの横幅を調整したい時、ピクセル数を入力して調整できる。列の横幅を調整したい時によく使う。


高さ ・・・・セルの高さを調整したい時、ピクセル数を入力して調整できる。

 

◆セルの種類・・・・ 「ヘッダーセル」を選択すると表の見出しを作ることができる。設定後、文字は太字になる。


範囲 ・・・・「セルの種類」に似た設定項目で見出しの設定ができる。ここでの設定は主に音声ブラウザなどで役立つ。ほとんど使用することはないが、HTML に関して理解を深めたい方は、見出しの対象範囲の指定を参考にすると良いだろう。

 

H Align( Horizontal Align の略)で「水平方向」という意味。ここで右寄せ / 左寄せ / 中央揃えの3パターンから選ぶことができる。

 

V Align (Vertical Align の略称)で「垂直方向」を意味する。上揃え / 中央揃え / 下揃えの3つから選べる。

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

 

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

 

f:id:yumeji773:20170116181811p:plain

 

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

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

 

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

 

f:id:yumeji773:20170116181958p:plain

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

 

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

 

f:id:yumeji773:20170116182238p:plain

 

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

 

f:id:yumeji773:20170116182504p:plain

 

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

 

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


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

f:id:yumeji773:20170116182706p:plain

 

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

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

 

f:id:yumeji773:20170116182923p:plain

 

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

 

f:id:yumeji773:20170116183013p:plain

 

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

 

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

 

f:id:yumeji773:20170116183109p:plain

 

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

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

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

 

f:id:yumeji773:20170116183258p:plain

 

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

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

 

f:id:yumeji773:20170116183341p:plain

 

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

 

f:id:yumeji773:20170116183432p:plain

 

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

 

f:id:yumeji773:20170116183553p:plain

 

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

 

f:id:yumeji773:20170116183727p:plain