ビジュアルエディタの表機能（table）をカスタマイズする

ここではこのサイトで使っているビジュアルエディタの表に関する設定方法と使い方を解説します。

1.TinyMCE Advancedの設定

このサイトの「TinyMCE Advanced」のバージョンは 5.3.0です。

私が設定している「設定→TinyMCE Advanced」のテーブル設定は下記になります。

設定後は必ず「変更を保存」ボタンを挿入して下さい。

以上でビジュアルエディタで自由に表作成ができる様になります。

2. ビジュアルエディタの表機能だけを使った表作成

2-1.ビジュアルエディタのCSSに下記を追加します。

本テーマのビジュアルエディタのCSSは「editor-style.css」から「my-editor-style.css」に変更しています。

理由は下記ドキュメントを参照してください。

  ブロックエディタ時代にビジュアルエディタを使う方法

 ­親テーマが「editor-style.css」の時のスタイル機能の使い方

＜my-editor-style.cssの設定＞

/******************************************************************/
/* tableの基本設定 */
/*******************************************************************/
table {
	border:1px dotted #444;                                                                       /* 表の枠線を標準文字色に合わせる */
	background--color:#fff;                                                                          /* 表の背景色を白にする */
	color:#444;                                                                                           /* 表内文字色を標準文字色に合わせる */
	font-size:14px;font-size:0.875rem;line-height:1.5em;letter-spacing:0.8pt; /* 表の下の余白を文字の半分のサイズを指定 */
	margin-bottom:7px;                                                                               /* 表の下の余白を文字の半分のサイズを指定 */
	word-break:break-all;                                                                             /* 表の幅が狭くなった場合は英単語の途中でも改行する */
}
td {
	border:1px dotted #444; /* セルの枠線を標準文字色に合わせる */
	color:#444;                    /* セル内文字色を標準文字色に合わせる */
	padding:2px 7px;            /* セルの上下は2px　左右は7pxの余白を */
}
/* tableスタイルのCSS */
.____table_________{}                                       /* スタイルの区切り記号 */
table.border{border:1px solid #444;}                    /* 表の外枠線 */
td.border-left{border-left:1px solid #444;}             /* セルの左線 */
tr.border-bottom{border-bottom:1px solid #444;}   /* セル行の下線 */

■表やセルの枠線の色指定を標準文字色と同じ色に設定しています

■枠線の作画はTinyMCE Advansedでも可能ですが操作性があまり良くありません。

そこで枠線はスタイル定義とし「表の外枠線」、「セル行の下線」、「セルの左線」を用意しています。

2-2.style.css には上記内容を少し変更した形で同様の内容を定義します。

/****************************************
tableの基本設定 
*****************************************/
.entry-content table {
	border:none;   /* ビジュアルエディタで破線表示していたののは表示なしにしている */
	background-color:#fff
	color:#444;
	font-size:14px;font-size:0.875rem;line-height:1.5em;letter-spacing:0.8pt;
	margin-bottom:7px;
	word-break:break-all; }
.entry-content td {
	border:none;　 /* ビジュアルエディタで破線表示していたののは表示なしにしている */
	color:#444;
	padding:2px 7px;}
/* ｔableスタイルのCSS */
.entry-content table.border{border:1px solid #444;}
.entry-content td.border-left{border-left:1px solid #444;}
.entry-content tr.border-bottom{border-bottom:1px solid #444;}

■ビジュアルエディタでは表に破線枠が表示されますが、この破線枠はHTML表示では「枠線なし」に変更しています。

ビジュアルエディタ機能だけの表作成の方法

1.表のボタンから表を作成します。

表の作成でマウスで３×3の表を作成します。

画面枠一杯に破線の表が表示されますので、マウスで適当な幅の表にして下さい。

＜表示例＞

■セルのプロパティによる幅操作

セルを選択して「テーブル→セル→セルのプロパティ」を実行すると下図のダイアログが表示されます。

これを利用して幅を「PX」や「%」で指定できます。

■%指定：画面サイズに合わせて自動で縮小します。（※推奨）

■PX指定：画面サイズは関係なく固定幅になります。

2.各セルに文字列を入力します

＜表示例＞

文字入力の時に利用できるキー

3.罫線を引く

＜表示例＞

■表枠：表を選択し、スタイルから「table.border」を実行します

■下線：行を選択し、スタイルから「tr.border-bottom」を実行します

■左線：列１及び列２を選択し、スタイルから「td.border-left」を実行します

4．文字装飾及び位置指定する

＜表示例＞

■文字の横配置：

■文字色や太字：

５．背景色や文字の縦位置を指定する

＜表示例＞

■セルのプロパティ（テーブル→セル→セルのプロパティ）の一般タブ

文字の横配置、縦配置が指定できます。

■セルのプロパティ（テーブル→セル→セルのプロパティ）の高度な設定タブ

文字の背景色の指定ができます。

６．表のインデント操作

表のインデントには下記の設定が必要です。

 ­ビジュアルエディタでインデントが利用できる様にする

＜表全体をインデントする方法＞

①表の何処かをクリックする。

するとビジュアルエディタの左下の方に下記がガイドが表示されます。

※上記が表示されない場合は、表示オプションを開いて「最大行表示エディターと集中執筆モード機能を有効化します」の✔を外して下さい。

②上記のtableを選択する。

③下記のインデントボタンを挿入してインデント操作をする。

以上でビジュアルエディタの表機能だけを使った罫線付きの表作成ができました。

上記の設定を使った表のサンプル

①表枠を教示しないサンプル

下記は２×２の表ですが、枠線は表示していません。

DOPPELGANGER　Libero Series 411（見えない枠を使ったサンプルです）
私は右のロードバイクで図書館に通いながらこのサイトを構築しています。 ロードバイクの購入は2台目で今回購入した４１１は前輪にサスペンションが付いており、今までのロードバイクよりは乗り心地が良くなっています。 ギヤはシマノの21段ですが、実際の走行で使うのは7段で十分と思っています。 またブレーキは前輪がディスクブレーキ、後輪はダブルピボット式キャリパーブレーキなのでブレーキの効きは問題ありません

②一部の表枠を表示したサンプル

＜ビジュアルエディタでの表示は下記になります＞

＜httpで表示した場合＞

破線は罫線が引かれないので下記の様になります

→

→

2.bootstrap機能を使った枠線や背景色付け方

項番１で説明した様にビジュアルエディタの基本機能で枠線や背景色を付ける事ができます。

しかしBootstrapの表機能クラスを利用するともっと簡単にこれらの事が行えるようになります。

これを行う為にはBootstorapを導入する必要があります。下記URLを参照してください。

 ­ビジュアルエディタでBootstrap3を利用する為の設定

2-1.my-editor-style.cssに下記を追加します。

/* BootStrapの定義とCSS変更 */
.____BT_table_________{}  /* スタイルの区切り記号 */
table.table{margin-bottom:7px;}
table.table td{
 border:1px solid #444 !important; /* 枠線カラーの変更 */
 color:#444 !important;;                /* 文字色の変更 */
}
table.table-bordered.table{}          /* 縦横線付きの表 */
table.table-condensed{}                /* セル内の余白を半分にする */
tr.danger()                                   /*Table rowの設定*/
tr.warning{}                                
tr.info{}
tr.success{}
tr.active{}
td.danger{}                                 /*Table Dataの設定*/
td.warning{}
td.info{}
td.success{}
td.active{}

2-2.Style.cssには下記を設定します。

BootstarpのCSSをロードしているので、基本的に設定は不要です。

しかしBootstarpの仕様で変更したい箇所のみを下記で記述しています。

/* BootStrapのCSS変更 */
.entry-content table.table{margin-bottom:7px;}
.entry-content table.table td{
	border:1px solid #444 !important;
	color:#444 !important;

Bootstrap表クラスの使い方

①スタイルの「table.table」

表を作成し、表にカーソルを入れスタイルから「table.table」を指定すると枠線が引かれます。

②スタイルの「table.table-condensed」

①の表にスタイルから「table.table-condensed」を追加すると表内の余白が半分になります。

③スタイルの「tr.danger」

②の表の1行目にカーソルを入れ、スタイルから「tr.danger」を追加すると1行目に背景色が付きました

④その他の色

■tr.××：行（TR：Table Row）に背景色を付けます。

■td.××：セル（TD：Table Data）に背景色を付けます。