はぴまむ

子育て中もハッピーに日々を過ごしたい主婦がお仕事のことや役に立った情報などをつづっています。

初心者でも簡単!WordPressの使い方ー表(テーブル)を挿入するー

time 2015/06/29

これまでの記事

初心者でも簡単!WordPressの使い方ー記事を投稿するー
初心者でも簡単!WordPressの使い方ー記事を見やすくするー

で基本的な記事の投稿はバッチリだと思います。

今回は記事の内容をさらにわかりやすく、見やすくできる 表(テーブル) の挿入方法を覚えていきましょう。

今回もビジュアルエディタ機能を快適に使用するためにTinyMCE Advancedというプラグインをいれた状態で説明しています。
TinyMCE Advancedプラグインがまだはいってない!という方はWordPress初心者にオススメなプラグイン3選ーはぴまむ編ーをご覧ください。

sponsored link

表(テーブル)を挿入してみよう

wordpress-table01
テーブル→テーブルを挿入を選択すると、どんな数でテーブルを作成するか選べます。
今回は3×6の表を作成してみます。

wordpress-table02

基本的な表(テーブル)はこれだけで完成です。

表の中の1マスをセル、横の並びを行、縦の並びを列といいます。
これからの説明で重要になるのでしっかりと覚えておいてください。

それではこれからこの基本的なテーブルをカスタマイズしてみたいと思います。

行・列の追加や削除をしてみよう

まずはちょっと行や列が多かった…少なかった…という時に使える、行・列の追加や削除の方法を覚えましょう。

行・列の追加をしてみよう

今回は行を追加してみたいと思います。

wordpress-table03

まずはじめに、追加したい行の基準となるセルを選びます。

今回は発達の行の下にあらたに行を追加してみたいと思うので、発達のセルをクリックして選択。
テーブル→行→行を下に挿入 を選びます。

wordpress-table04

すると一番下に新しい行が追加されました。

先ほどの操作で行の上に挿入を選ぶと、基準として選んでいたセルの上にあたらしい行が挿入されます。

列の場合も、行と同様の操作で追加挿入することができます。
違うのは、行を選んでいた操作で列を選ぶだけです。

行・列を削除してみよう

次は、ちょっと行が多かった時に削除する方法です。

wordpress-table05

削除したい行のセルをクリックで選択し、テーブル→行→行を削除 を選択するだけ。

wordpress-table06

選択した行だけきれいに削除できました。

列の場合も 行ではなく列を選ぶ だけで削除することができます。

セルとセルをくっつけてみよう

単純な表を作成するだけなら基本のテーブルで十分なのですが、少し複雑な表を作りたいときには困りますね。

そんな時はセルの結合で自由に表の形を変えてみましょう。

wordpress-table15

くっつけたいセルをドラッグで選択します。

テーブル→セル→セルの結合を選択すると選択したセルがくっついて1つのセルになります。

wordpress-table16

セルの結合を使えばどんな形の表でも作成できて便利です。

表(テーブル)を装飾してみよう

基本的な表のままでは少し味気ないし見辛いかな?なんて時には、表を装飾してみましょう。

セルのプロパティで見出し部分とデータ部分をわかりやすく区別してみよう

wordpress-table07

まずは見出し部分をドラッグして選択し、 テーブル→セル→セルのプロパティ を選択します。

wordpress-table08

セルの種類から、ヘッダーセルを選択してOKを押すと、見出しの設定は完了です。

この見出し、テーマのCSSによって表示の仕方が大きく異なります。

wordpress-table09

今回使用しているBizvektorというテーマでは見出し設定をしてもあまり変化がありませんね。

そんな時は、文字の装飾で覚えた 太字や文字色 を使って見やすくなるよう工夫してみましょう。

また、この見出しは行単位だけではなく列でも使用できます。

セルのプロパティで表の中の文字位置を設定してみよう

wordpress-table11

次は文字位置の変更です。

変更したい箇所をドラッグして選択し、文字位置を変更するボタンをクリックします。

今回は全体を中央によせたいので、全体を選択して中央よせのボタンをクリック。

wordpress-table12

 

すると表の中の文字全体がセル内の中央に配置されました。

この操作はセルのプロパティでもできます。

wordpress-table13

 

 

変更したい箇所をドラッグで選択テーブル→セル→セルのプロパティ内の 横配置 で好みの位置を選択。

今回は右よせにしたいので右を選択し、OKを押します。

すると全体の文字がセル内で右によりました。

wordpress-table14

セルのプロパティからできる操作一覧

上で紹介した以外の操作はあまり使うことはないと思いますが、どのようなことができるのか、プロパティでできることを一覧で説明します。

項目名 できること
セルの横幅は全体のバランスなどを見て自動で設定されるようになっているが、自動ではなく指定したいときにここで指定することができる。
高さ セルの高さを指定したいときにここで指定する。
セルの種類 見出しの設定ができる。
範囲 どのデータに対する見出しなのかを指定することができる。
横配置 セル内での水平方向の文字位置を指定することができる。
縦配置 セル内での垂直方向の文字位置を指定することができる。
スタイル セルのスタイルを直接指定することができる。
枠線の色 セルの枠線の色を指定することができる。
選択した色はスタイルに反映されて記述される。
背景色 セルの背景色を指定することができる。
選択した色はスタイルに反映されて記述される。

スタイル・枠線の色・背景色はセルのプロパティを開いたときに左上にあるタブで 詳細 を選択することで設定できます。

表のプロパティで表全体の装飾をしてみよう

先ほどのセルのプロパティでは、セル単位・行単位・列単位で装飾ができました。

表のプロパティでは表全体の装飾を行えます。

wordpress-table17wordpress-table19

テーブル→表のプロパティを選択。

今回は枠線と背景色を変更してみたいと思うので、詳細タブをクリックしてそれぞれの色を選択、OKボタンを押します。

wordpress-table20

すると、全体の色が変わりました。

セルのプロパティの方でも、全体を選択してから操作すると表のプロパティで指定したのと同じように全体を変更できるので、表のプロパティはあまり使用しないかもしれません。

ですが、表のプロパティは全体を選択しなくても表すべてに作用するので、選択するという工程が1つ減る分便利です。

表(テーブル)の装飾内容をリセットしてみよう

楽しくて装飾をやりすぎたらなんだか余計にごちゃごちゃしてわからなくなってしまった。。

もうどこをどう直したらいいのかわからない。。

なんてことになったら、一回リセットしてしまいましょう。

 

wordpress-table21

どのセルでもいいのでクリックしてみると、左下に table という文字が現れると思います。

この文字をクリックすると表全体が選択できるので、選択したら 書式設定をクリア でリセット完了です。

wordpress-table22

ですがこの方法、プロパティから設定したヘッダーセルなどはリセットできないので、それもリセットしたい場合はプロパティから設定しなおしましょう。

表(テーブル)を挿入してみよう まとめ

以上を覚えれば、だいたいの表は作成できるはずです。

タグを覚えなくても比較的自由に表が作成できるので、ぜひ覚えてみてください。

今回覚えたことを組み合わせて、より見やすい表・記事を作成しましょう。

sponsored link

コメント

  • こんにちは
    wordpressで表を挿入したいとググっているとこのサイトに行きつきました。
    説明を見ていると簡単に見えたので、いざ作業と思ったのですが
    私のwordpress画面では、ファイル、編集、挿入、・・・テーブル、ツール等が記載されている行が見当たりません。
    これを表示する方法を教えていただければと思いましてコメントしました。
    よろしくお願い致します。

    by cyapu €2016年1月6日 8:54 AM

    • cyapuさん、コメントありがとうございます!
      表示されていないのは一番上の段でしょうか?
      もしそれでしたら、記事内でもご紹介させていただいているTinyMCE Advancedというプラグインをインストールすることで解決するかと思います。
      http://yuicreate.com/happymom/plugin-3/#TinyMCE_Advancedの記事を参考に導入してみてください^^

      by ゆいくり €2016年1月20日 2:32 AM

down

コメントする




sponsored link

sponsored link

はぴまむの中の人

ゆいくり

ゆいくり

30代の子育て中主婦。在宅勤務OK!という理解ある会社に拾っていただき、そこで働きながらフリーランスとしても活動中。webサイト製作などを中心に活動しています。 [詳細]