【WordPress】HTMLわからない!という初心者でも簡単に表組み(table)をつくる方法

SPONSORLINK

WordPressは簡単にサイトが更新できる仕組みなんだよ。という声をたくさん聞きますが、自分はそうは思いません。デフォルトの状態だと出来る機能は限られているし、結構WEBの知識がないとなかなか使いこなすのは難しいと思っています。

でも、WordPressにはそれを補ってくれる優秀なプラグインがたくさんあることも事実。プラグイン選びは非常に重要になるんですよね。

今回はWordPressで表組み(tableタグ)を比較的簡単につくる方法をプラグインを使ってご紹介したいと思います。

まず、表組み(table)って意外とむずかしい

以前個人ブログでWordPressの更新はビジュアルエディタを使ってますといった記事を書かせていただきました。普通にテキストを書いたり、それを見出しにするくらいであればデフォルトでも問題ないのですが、表組み(table)をしようと思ったらどうでしょう。タグの知識がないと結構難しいですよね。

例えば下の料金表のようなものを作ろうと思ったらどうでしょうか?

service price
素晴らしい落書き ¥100000
  • ※サンプルです

タグとしてはこんな感じになります。

<table>
	<tbody>
		<tr>
			<th>service</th>
			<th>price</th>
		</tr>
		<tr>
			<td>素晴らしい落書き</td>
			<td>¥100000</td>
		</tr>
	</tbody>
</table>

たったこれだけの表であっても、タグとしてみるとtr、th、tdなどたくさんのタグがあって、HTMLって何?という方にとっては意味不明です。このタグを書いて下さいというのは難しい話でしょう。ところがこんな表組み(table)を簡単に実装してくれるプラグインがあるんです。

TinyMCE Advancedというプラグイン

TinyMCE Advanced

TinyMCE Advancedというプラグインは表組み(table)をつくるための専用プラグインではなく、エディタをカスタマイズしていろいろ機能を追加してくれるプラグインです。

TinyMCE Advanced

できること

今回は表組み(table)の作り方がメインですが、簡単にTinyMCE Advancedでできることをご紹介。

  • ツールバーの内容を自分好みにカスタマイズできる
  • ビジュアルエディタのままソースコードを確認できる
  • 記事内の文言の検索&置換を行える
  • 印刷や日時を挿入など独自のボタンを追加できる
  • ビジュアルエディタのまま表組み(table)を使えるようになる

今回は最後に紹介した表組み(table)です。ここからTinyMCE Advancedを使った表組み(table)の作り方を紹介していきます。

1. 基本となる表を作成する

まず表の作り方ですが、これは非常に簡単。

TinyMCE Advanced表

この表のようなアイコンをクリックして列・行の数を決めます。ここでは横に2個、縦に2個のシンプルな表を作成。

と、言葉で書いてもわかりづらいのでアニメーションをつくってみましたのでそちらをご確認ください。

service price
素晴らしい落書き ¥100000
表のベースをつくる

これでシンプルな表ができあがりました。ですがこれだとどこが表の見出しとなるのかわかりません。タグてきにも表のデータを表す td というタグしか含まれていないので、表組み(table)としては不完全です。

2. 表の見出しを入れてみる

今度は表の見出しをつけてみましょう。といってもやることは簡単で、見出しにしたい部分を左上からドラッグして選択し、表のプロパティをいじってあげます。

先ほどのテーブルアイコンから、「セル > セルのプロパティ」と選んで、セルの種類をヘッダーセルに変えるだけ。

っと、こちらも結局アニメーションをつくりましたのでご確認ください。

service price
素晴らしい落書き ¥100000
tdをthに変換する

これでだいぶ表のようになりましたね!基本的にはここまでで十分かと思いますが、他にも色々とできることがありますのでついでに紹介しておきましょう。

他にできること

表を横幅いっぱいにする

「表のプロパティ > 幅 」の設定を100%とすることで横幅いっぱいにすることができます。

service price
素晴らしい落書き ¥100000
表を横幅いっぱいにする

列・行を増やす

列や行を増やすには、増やしたいセルの隣のセルを選択した状態で、行(列)の項目から「行を上に追加(列を左に追加)」とするだけ。これでタグをいじることなくテーブルセルを増やすことができます。

service price day
素晴らしい落書き ¥100000 金土日休み
まあまあの落書き ¥10000 同上
表の列行を増やす

セルを結合する

Excelなどにもある機能ですが、セルを結合することもできます。結合したいセル2つ以上を選択した後に「セル > セルの結合」とするだけ。

service price day
落書き 素晴らしい落書き ¥100000 金土日休み
まあまあの落書き ¥10000 同上
セルを結合する

などなど。

他にもいろいろとあるのですが、ここまでを覚えておけばあとは応用がきくと思いますのでいろいろとお試し下さい!

  • ちなみに今回はわかりやすくするために、表全体や見出し部分を選択したりしていますが、横幅を変更したり、行や列を追加する場合は、ドラッグで選択する必要はなくて、そのセル、もしくは表の位置にカーソルがあればOKです。
  • また表のデザインは使用しているテーマによって変わってきますのでサンプルの通りにはならないと思います。

まとめ

動画の撮影が意外と時間がかかって、最後の方が駆け足気味になってしまいましたがこのプラグインを使用すれば結構簡単に表組みを導入することが出来るのではないかと思います。

表組みの場合、TablePressというプラグインが有名かと思いますが、個人的にはTinyMCE Advancedの方がサクサク編集できるし、他にもエディタを使いやすくする機能がついてくるので好きで愛用しています。

今までWordPressで表組み出来なかった。表の時はタグ打ちしてた。でもそれ、面倒だなと思っていた。という方はこのプラグインを使用すると幸せになれると思います。

ぜひぜひお試し下さい〜。

TinyMCE Advancedはこちら

SPONSORLINK

\このサイトでつかってるのはこれ/

インパクトのあるアニメーション
WPテーマ「ハミングバード」

インパクトのあるアニメーションでブログを演出します。

新作!究極のモバイルファースト
WPテーマ「ストーク」

「新しいスマホビュー時代をつくろう」というのをコンセプトに、スマホでの見やすさ、操作しやすさにとことんこだわりました。

誰が使っても美しいデザイン
WPテーマ「アルバトロス」

シンプルかつ正統派のブログテーマです。

ABOUTこの記事をかいた人

香川県(うどん県)にてフリーランスWEBデザイナー/ディレクターとして活動。小規模なWEBサイト制作を得意とし、コンセプト設計からデザイン、コーディング、撮影にいたるまでのすべてをこなします。地方の良さを全国に広めていくお手伝いをしていきたいと思っています。