WordPress

【WordPress】TinyMCE Advancedでテーブルの背景色を変更する方法!

【WordPress】 TinyMCE Advancedでテーブルの 背景色を変更する方法!ビジュアルエディターの拡張機能としてよく使われるTinyMCE Advanced

 

TinyMCE Advancedを使うと表(テーブル)が簡単に設置することが出来ます。

 

今回は表(テーブル)の背景色を変更する方法を紹介します!

TinyMCE Advancedでテーブルを表示する方法

わかる方は飛ばしてください!

 

詳しい方法は【WordPress】記事内に表を挿入する方法を紹介!という記事で紹介しています!

 

表の挿入方法

碁盤の目のようなアイコンがあるため、そこをクリックし「テーブル」をクリックします。

TinyMCE Advanced

すると、テーブルが出てくるので、設置したい行×列を選択します。

 

今回は4×4になるように選択しました。

 

設定したいところの「□」をクリックすると、このように表が現れ挿入が完了します。

TinyMCE Advanced

テーブルの背景色の変更

まずはテーブル全体の背景色の変更する方法を紹介します。

 

作るのは青一色の表です。

 

表のプロパティをクリックします。

TinyMCE Advanced テーブル 背景色の変更

 

高度な設定を選択して、背景色をクリックします。

TinyMCE Advanced テーブル 背景色の変更2

 

すると色が設定できるようになるので設定したい色を決めましょう。

 

僕はいつも色を決めるときは原色大辞典を使用しています。

TinyMCE Advanced テーブル 背景色の変更3jpg

色が決まったらOKをクリックします。

 

背景色のところに先ほど選んだ色が表示されていることを確認してOKをクリックします。

TinyMCE Advanced テーブル 背景色の変更4

注意ポイント

背景色に選んだコードのローマ字が小文字になっていることを確認してください。大文字だと反映されません。

 

これで完成です!

TinyMCE Advanced テーブル 背景色の変更5

行の背景色の変更

次は行ごとに色を変える方法を紹介します!

  • 1行目:赤
  • 2行目:黄
  • 3行目:青

 

行のプロパティをクリックします。

TinyMCE Advanced 行 背景色の変更1

 

高度な設定を選択して、背景色をクリックします。

TinyMCE Advanced 行 背景色の変更2

 

すると色が設定できるようになるので背景色にしたい色を決めましょう。

TinyMCE Advanced 行 背景色の変更3

色が決まったらOKをクリックします。

 

背景色のところに先ほど選んだ色が表示されていることを確認してOKをクリックします。

TinyMCE Advanced 行 背景色の変更4

注意ポイント

背景色に選んだコードのローマ字が小文字になっていることを確認してください。大文字だと反映されません。

 

これで完成です!

TinyMCE Advanced 行 背景色の変更5

 

セルの背景色の変更

最後は1つのセルごとに色を変える方法を紹介します!

 

これを使ると下記の様な表も作れるようになります。

 

セルのプロパティをクリックします。

TinyMCE Advanced セル 背景色の変更

 

高度な設定を選択して、背景色をクリックします。

TinyMCE Advanced セル 背景色の変更2

 

すると色が設定できるようになるので背景色にしたい色を決めましょう。

TinyMCE Advanced セル 背景色の変更3

色が決まったらOKをクリックします。

 

背景色のところに先ほど選んだ色が表示されていることを確認してOKをクリックします。

TinyMCE Advanced セル 背景色の変更5

注意ポイント

背景色に選んだコードのローマ字が小文字になっていることを確認してください。大文字だと反映されません。

 

これで完成です!

TinyMCE Advanced セル 背景色の変更7

 

【WordPress】TinyMCE Advancedでテーブルの背景色を変更する方法のまとめ

今回はTinyMCE Advancedでテーブルの背景色を変更する方法を紹介しました!

 

ちょっとしたカスタマイズですが、これを1つやるだけで表の見やすさが変わるので是非使ってみてください!

 

では、また次の記事で会いましょう!!

-WordPress

Copyright© kane blog , 2020 All Rights Reserved.