「表」を見ながら作成できる!html知識不要のWordPressプラグイン「Table Tag Generator」セル結合もできちゃいます

「表」を見ながら作成できる!html知識不要のWordPressプラグイン「Table Tag Generator」セル結合もできちゃいます

:2014/10/19 webサービス Wordpress

伝えたいことをわかりやすく伝えるためには表や図はとても重要。
記事の質を左右すると言っても過言ではありません。

でもhtmlでの表作成ってなかなか大変なんですよね。相当慣れていないとExcelのようにセルを結合したり、部分的に色を変えたりなんてことはできません。

今回はそんな表作成をカンタンにしてくれる便利なプラグインをご紹介します。
いっさいコードを触らずに表を作成できるのでhtmlの知識がなくても好みのものが作れますよ。

視覚的に表を作れるプラグイン

このプラグイン最大の特徴は完成した表を見ながら作成ができること。これが本当に便利なんです!
プラグインをインストールすると投稿画面に「table」ボタンが追加されます。

tableボタンがエディターに追加

ボタンを押すとこんな画面がポップアップ。ここで表を見ながら好みのモノを作れるんですね。

こんな画面がポップアップ

セル結合に、td,th変更、個別class指定まで!

マウスドラッグでセルを選んで細かい設定もできちゃいます。

マウスドラッグでセルを選択

▼好きなセルを結合したり

好きなセルを結合できる

▼tdとthの入れ替えもワンタッチ

td,thの入れ替えもワンタッチ

▼なんとセルごとにclassの設定もできちゃいます!
セルごとにclassの設定ができます

なおcssは自分で設定が必要です。とりあえず使ってみたいという方はこちらのcssをコピペして使ってください。
※web版のデフォルトからwidthの設定を除いたモノです

table , td, th {
	border: 1px solid #595959;
	border-collapse: collapse;
}
td, th {
	padding: 3px;
	height: 25px;
}
th {
	background: #f0e6cc;
}
.even {
	background: #fbf8f0;
}
.odd {
	background: #fefcf9;
}

他のエディタを使っているならWeb版を!

このプラグインはもとはWebサービスだったもの。
「Wordpressエディタ使ってないよ!」という方はこちらからWeb版をお使いください。

Web版ではcssの設定も同時に行えるので、色味も見ながら作成できます。

あとがき

コードを触らず表を作れるのはとても便利。すばやくキレイな表を作れます。
いざというとき役立つツールなのでぜひ入れてみてください。

最後まで読んでいただきありがとうございました。
Jimon(@jimon_s)でした。

jimon


-webサービス, Wordpress
-

CATEGORY
この記事のカテゴリ
webサービスの親カテゴリ

親カテゴリはありません

更新チェックはこちらから!