ー スポンサード リンク ー

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

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


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

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

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

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

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

 

 

 スポンサードリンク


 

 

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


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

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

スクリーンショット 2016 03 21 15 12 34

 

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

スクリーンショット 2016 03 21 15 30 52

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

スクリーンショット 2016 03 21 15 26 44

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

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

色画面


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

スクリーンショット 2016 03 21 15 28 49

 

表の背景色を変える


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

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

スクリーンショット 2016 03 21 15 56 12
少しわかりやすくするために、このカラー「#9bcad0」を選択しました。

スクリーンショット 2016 03 21 15 56 48

 
プレビユーで見てみると、下図のように「表の背景色」が変わりました。
 
スクリーンショット 2016 03 21 16 11 10

 

カラーの選び方


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

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

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

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

 

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


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

スクリーンショット 2016 03 21 16 15 36

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

スクリーンショット 2016 03 21 16 16 02

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

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

スクリーンショット 2016 03 21 16 16 45

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

スクリーンショット 2016 03 21 16 17 25 1

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

スクリーンショット 2016 03 21 16 17 56

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

eac22595dc11a973b0c6cc796c29f840.jpg

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


 

表の枠線のカラー変更


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

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

スクリーンショット 2016 03 21 17 15 14

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

 

スクリーンショット 2016 03 21 17 15 45

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

スクリーンショット 2016 03 21 17 16 30

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

スクリーンショット 2016 03 21 17 16 46
背景色と同化され、あまり目立ちませんが、完成です。

スクリーンショット 2016 03 21 17 28 05

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