TinyMCE Advanced を使って投稿の表に背景色をつける方法

TinyMCE Advanced を使って投稿の表を作ることは、できたのだが
ヘッダーの背景色や、表全体の背景色を変えたい。

実は僕も知らなくて、こまっていた。知ってしまえば簡単にできます。

簡単に表を作るのは「ビジュアルエディタ」に、まずは
『 TinyMCE Advanced 』がインストールされていることが
前提になります。

もしまだ入っていない場合は、プラグインのインストールより
『 TinyMCE Advanced 』インストールしましょう。

表の作り方は下記を参照してください。
WordPressの「TinyMCE Advanced」 を使って投稿に表を挿入する方法
https://tomio23.com/archives/7024

 

 

 スポンサードリンク

 

 

ヘッダーや表の背景色を変える方法

テーブル（表）ができました。ここから枠線や、背景カラーを
変えていきましょう。

まずビジュアルモードにきりかえて「TinyMCE Advanced」の
テーブル（表）をクリックします。

 

ヘッダーの背景色を変えてみます。
表の背景色を変えたい、ヘッダー部分を選択します。
テーブルから、セル → セルのプロパティに行き、クリックします。

 
セルのプロパティ画面より、詳細 → 背景色をクリックします。

 
背景色を選ぶ画面からカラーを選びます。

僕の場合ブログにカラーが、ついておりますので、そのカラーに
合う色「#dd9dbf」を指定しました。

 
下図のようにヘッダー部分の背景色が変わりました。
表示自体は僕のブログカラーです。

 

表の背景色を変える

やり方としては、ヘッダーの背景色を変えるの似ています。

背景色を変えたい箇所を選択します。
表のプロパティより、詳細を選び、背景色を選択して入れます。

少しわかりやすくするために、このカラー「#9bcad0」を選択しました。

 
プレビユーで見てみると、下図のように「表の背景色」が変わりました。
 

 

カラーの選び方

今回は僕のホームページに、あう色を選ぶ方法を、ご紹介しましょう。

Google機能拡張から「Color Zilla」を使って、知りたいカラーを
ピックアップして表の枠線のカラーを選びたいと思います。

注意：「Color Zilla」がない人は、Google機能拡張から
インストールしましょう。無料です。

WordPressサイト作成で僕が使用している、Google機能拡張これは欠かせない。
を参照ください。
https://tomio23.com/archives/4457

 

カラーを選ぶ方法としてColor Zilla使う

Color Zillaを使用してブログに、あうカラーを選びます。

 
Color Zilla より「Pick Color From Page」をクリックし
ページ上の知りたい色の所にPick、しに行きます。

 
知りたい、カラー上にPick Color （スポイド）を合わせクリックします。
赤の囲み枠に、知りたい色が表示されています。

OKでしたらクリックします。

 
再度Color Zillaの（スポイド）マークをクリックすると
認識しています。

 
Pick Colorをクリックするとカラー「# 723855」が表示されます。
今回はこのカラーコード「# 723855」を使って表の枠線カラーを
変更します。

 
その他カラーコードを知りたい場合は「原色大辞典さん」の
ページをよく使います。

原色大辞典さんのホームページです。

 

表の枠線のカラー変更

Color Zillaでブログに合う色を知ったら、このカラーを使って
表の枠線を変えてみたいと思います。

表全体を、全選択し、表のプロパティをクリックします。

 
表のプロパティより詳細、そして枠線の色をクリックします。

 

 
先ほど「Pick Color」で選んだカラーコード「723855」を
入力しOKをクリックします。

 
枠線の色が反映されました。

背景色と同化され、あまり目立ちませんが、完成です。

 
このようにプロパティから詳細をクリックすると「枠線の色」や
「背景色」を変えることができます。