HOME  /WordPress(応用)
 /ビジュアルエディタの表機能をカスタマイズする
2020年03月28日

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

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

1.TinyMCE Advancedの設定

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

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

項目 選択 解説
マウスのドラッグでのテーブル、行、列のサイズ変更を可能にする セルの幅や高さをマウスで変更できる様になります
テーブル挿入時の HTML 枠線属性を1に設定 なし 枠線は他の方法で行うので、一律にありなしのこの設定はOFFにしています
テーブルを挿入する際、マウスでドラッグして行と列の数を選択できるグリッドを表示 選択にするとテーブルの縦横指定がマウスで指定できる様になります
テーブルを編集中にタブキーを押して次のセルに移動

表操作にTabキーがつかえるようになります。

最終セルでtabを使うと行追加ができます

テーブル属性のダイアログに詳細タブを表示 表及びセルのプロパティで高度な設定タブが利用できるようになります

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

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

 

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;                                                                               /* 表の下の余白を文字の半分のサイズを指定 */
}
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;}
.entry-content td {
	border:none;  /* ビジュアルエディタで破線表示していたののは表示なしにしている */
	color:#444;
	padding:2px 7px;}
/* tableスタイルの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×3の表を作成します。

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

<表示例>

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

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

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

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

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

 

 

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

<表示例>

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

キー 動作
Tab 次のセルに移動。
最終セルの場合は行を下に追加します
Shit+Tab 前のセルに移動
↑↓キー 上下のセルに移動
← → 

左右に移動

文字列先頭や文字列最後の場合はセル移動

 

3.罫線を引く

<表示例>

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

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

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

 

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

<表示例>

■文字の横配置:

■文字色や太字:

 

5.背景色や文字の縦位置を指定する

<表示例>

セルのプロパティ(テーブル→セル→セルのプロパティ)の一般タブ

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

 

セルのプロパティ(テーブル→セル→セルのプロパティ)の高度な設定タブ

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

 

6.表のインデント操作

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

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

 

<表全体をインデントする方法>

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

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

②上記のtableを選択する。

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

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

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

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

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


DOPPELGANGER Libero Series 411(見えない枠を使ったサンプルです)

私は右のロードバイクで図書館に通いながらこのサイトを構築しています。

ロードバイクの購入は2台目で今回購入した411は前輪にサスペンションが付いており、今までのロードバイクよりは乗り心地が良くなっています。

ギヤはシマノの21段ですが、実際の走行で使うのは7段で十分と思っています。

またブレーキは前輪がディスクブレーキ、後輪はダブルピボット式キャリパーブレーキなのでブレーキの効きは問題ありません

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

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

<httpで表示した場合>

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

 

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

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

しかし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」

  列1 列2
行1 行1列1  行1列2
行2 行2列1 行2列2
行3 行3列1 行3列2

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

 

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

  列1 列2
行1 行1列1  行1列2
行2 行2列1 行2列2
行3 行3列1 行3列2

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

 

③スタイルの「tr.danger」

  列1 列2
行1 行1列1  行1列2
行2 行2列1 行2列2
行3 行3列1 行3列2

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

 

④その他の色

スタイル(××) カラーコード(参考)
danger   #f2dede
warning   #fcf8e3
info   #d9edf7
success   #dff0d8
active   #f5f5f5

tr.××:行(TR:Table Row)に背景色を付けます。

td.××:セル(TD:Table Data)に背景色を付けます。

 メモ

以上でこのドキュメントの説明は完了です。

関連ドキュメントはメニュの「WordPress(応用)タブ」か下記の関連記事一覧から探して下さい。

又、このサイトには、Google広告が掲載されています。

この記事が貴方の参考になりましたら、広告もご覧頂ければ幸いです。


<関連記事一覧>

ビジュアルエディタのCSS「editor.style.css」を充実させると操作性は良くなりますが、「style.css」を維持する事が大変になります。ここではその管理方法の一例を紹介しています。

親テーマのビジュアルエディタのCSSが「editor-style.css」でない場合はTinyMCE Advancedプラグインを利用するのに一工夫が必要になります。
ここではその解決方法を解説しています。

ビジュアルエディタでBOXを作成する方法は①表機能を使う②スタイルで設定したBOXを使うがありますが、ここでは表機能を使ってリンクBOXを作成する方法を解説しています。

TinyMCEで画像を取り扱うポイントは、画像に枠を付ける場合はどうするのか?と画像のレスポンシブ化は、どの様に実現するか?になります。ここではこれらの設定方法と使い方を解説しています。

TinyMCEではリストとして、オーダリスト

    とアンオーダーリスト

      が用意されていますが、決して使い易いものではありません。そこでこのサイトではTinyMCE Advancedのスタイル機能を使って半角2文字リスト、半角4文字リストを作成する事により、文字種を選ばないリストを作成しました。

2018年末にリリースされたWordPress5.0から標準エディタは「ブロックエディタ(Gutenberg)」に変更になりました。しかし「ビジュアルエディタ(TinyMCE)」を使い続ける方法を解説しています。

ビジュアルエディタで文書を作成した際にどのフォントを使うか?は悩ましい所です。
以前のサイトはあまり意味もわからず作成しましたが、この辺の意味が判ってきたのでここで解説します。

TinyMCEのデフォルト設定ではインデントが使えない。またCSSを更新した時にスーパリロードしないと画面が更新されない等との問題があります。ここではこれらの問題点を解決して使い易いTinyMCEの設定方法を解説しています。

TinyMCEの仕様は親テーマのeditor-style.cs、子テーマのeditor-style.cssの順番に読み込みます。ここでは子テーマのeditor-style.cssだけを使う方法を解説しています。

Bootstrapはグリッドデザインやボタン及びナビゲーション等の色々な機能を持っており、これを利用するとかなり自由なデザインが可能になるツールです。このBootstrapをダウンロードし、HTTP画面やビジュアルエディタで使う方法を解説しています。