表（テーブル）の罫線表示とTinyMCE Advancedの使い方

WordPressのテーマでcocoonを使っていると、編集ページでは罫線があるように見えるのですが、実際には罫線は表示されません。また背景色なども簡単に変えたいことが多いです。

htmlで直接罫線や背景色を指定するなどの選択肢はあるのですが、メンテナンスの容易性を考慮した時にできるだけその方法は取りたくありません。

「TinyMCE Advanced」をインストール

そこでエディタ拡張機能である「TinyMCE Advanced」をプラグインメニューから新規インストールし有効化します。

設定メニューにTinyMCE Advancedが追加されます。TinyMCE Advancedの設定メニューには、エディターの編集メニューを自分が使いやすいようにカスタマイズする機能があります。

ドラッグ＆ドロップでメニューを並び替えたり、下記のように追加したり、削除したりして、自分専用のエディタにすることができます。

表を３パターン作成しました。

編集ページではそれぞれ以下のように見えます。すべて枠線があるように見えます。

編集ページでは３つとも罫線があるように見えます。

しかし１番目の表には罫線はまったく表示されません。何も変更を加えていません。

２番目の表は外枠のみです。これも何も変更を加えていません。

３番目の表には、罫線が表示されるように変更を加えました。

まず、表全体（全てのセル）を選択します。

テーブルメニューのセルメニューから、セルのプロパティを選択します。

そうするとセルの設定を変更できる画面が出てきます。

「高度な設定」のタグに移動し、スタイルの所に

「border-color: #000000; border: 1px solid;」を設定します。これで上記3番目のような罫線が引けました。

罫線の色（border-color）に黒（#000000）、罫線（border）の幅を１に線のパターンに実線（solid）という内容です。

一般的な表のスタイルであればこれで良いと思います。

罫線だけであれば、他はいじらなくても良いです。

線のスタイルや色、背景色を変更したければ、同様にセルのプロパティの高度な設定を使用します。

線のスタイルを変更したければ「Border style」で選択します。スタイルに直接設定でもOKです。

以下が線のスタイルと見た目になります。

Solid	実線

Dotted	点線

Dashed	破線

Double	二重線

Groove	くぼみのある線

Ridge	隆起した線

Inset	囲まれたセルがくぼんだように表示される線。一部だけに指定しても立体感は出ません。

Outset	囲まれたセルが隆起したように表示される線。一部だけに指定しても立体感は出ません。