前回紹介したWP-Table Reloadedで、娘は表組み作成に成功したようです。が、混乱の元になると思って細かい設定やカスタマイズについて何も触れていなかったら「表組みのセル内を右寄り、左寄りとか、太字にするとか、そういうのはどこで出来るの？」と言ってきたのでした。というコトで追加の記事です。
まず先に、前回説明を省いた部分の説明を少々……。
１．編集項目が表示
ツール → WP-Table Reloadedの「テーブルのリスト」
・横罫で区切られたそれぞれの枠内にオンマウスすると、エクスポートやプレビューなどができます。
２．テーブルをインポートする 情報をエクセルで管理している場合はとても便利！
ツール → WP-Table Reloadedの「テーブルをインポートする」
・エクセルやHTMLで組まれたテーブルをインポートできます。
インポート フォーマットを選ぶ：CSV HTML XML
テーブルを追加しますか、置き換えますか？：新規 上書き
インポートファイルのソースを選ぶ：「マニュアル入力」が便利な気がします。
※この項目にチェックを入れると入力パレットが開きます。エクセル上の目的のエリアをそこにコピペ。）
いよいよテーブルのカスタマイズです
３．ツール → WP-Table Reloadedの「プラグイン オプション」
「カスタム CSS」のパレットに、スタイルを書きます。例えば……
| スタイルオプションの「テーブル ヘッド」に チェックを入れると、この行が項目行となる。 項目行は他の行とは違う背景色となる。 | ◆項目行のテキスト位置 デフォルト 左寄せ th {text-align:center} センターにする th {text-align:right} 右寄せにする |
|---|---|
| ◆項目行以外のセルのテキスト位置 | デフォルト 左寄せ td {text-align:center} センターにする td {text-align:right} 右寄せにする |
| ◆テーブル内のフォントサイズを調節 | th, td {font-size:12px} |
| ▼ 以下、WP-Table Reloadedのルール | |
| ★★5行目の背景色を赤、テキストを白 | .wp-table-reloaded-id-1 .row-5 td { background-color: #ff0000!important; color:#fff; } |
| ★★6行目の2列目のセル背景色を赤、テキストを白 | .wp-table-reloaded-id-1 .row-6 .column-2 { background-color: #ff0000; color:#fff; } |
★★は設定を反映させています。cssがまるっきりわからないと難しいですね、やっぱり。一応説明すると
.wp-table-reloaded-id-1 .row-6 .column-2 {
background-color: #ff0000;
color:#fff;
}id-1 …… 数字がテーブル番号
row-6 …… 6行目
column-2 …… 2列目
background-color: #ff0000; …… 背景色 赤
color:#fff; …… テキスト色が白（#ffffff ＝ #fff）
※WP-Table Reloadedのルールは、プラグインのFAQページにあります。
ただ、テーブル内をいろいろ装飾するととても見にくくなります。多くの場合、見やすくするための表組みですから……。体裁を統一した方がきれいなページに仕上がる気がします。
多く見られる体裁は、項目行は他と違う背景色でテキストはセンター。それ以外のセルはすべて左寄り、かな？
凝った体裁が必要な場合は、「TinyMCE Advanced」が便利です。ただし当たり前ですが、セルやセル内のテキストを装飾するたびに、スタイルのソースがドンドン増えて、かなり嬉しくないです。ついでなので、次回はTinyMCE Advancedの使い方を紹介します。
この記事の前編「
