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

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

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

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

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

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

表の作り方は下記を参照してください。
WordPressの「TinyMCE Advanced」 を使って投稿に表を挿入する方法
https://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機能拡張これは欠かせない。
を参照ください。
https://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

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

 

 

スポンサーリンク

この記事を読んだなら、以下記事もおすすめ!

   

ー 商品 リンク ー

健康に良い食材商品リンク
完全無欠朝食バター コーヒーで使用 健康に良い 食用油オイル 体に良いハチミツ 食品に関する 書籍
HARIO (ハリオ) ハリオール ブライト コーヒー & ティー フレンチ プレス 4杯用 THJ-4SV

バージンココナッツ オイル

マヌカハニーMGO400+ 500g ジョコビッチの生まれ変わる食事
HARIO (ハリオ) ミルク 泡立て器 クリーマーゼット CZ-1  ブラウンシュガーファースト 有機エキストラバージンココナッツオイル  マヌカハニー バイオアクティブ 20+(UMF20+) 500g マヌカドクター【海外直送】 (1個) [並行輸入品] シリコンバレー式 最強の食事
業務用5kg フォンテラ社グラスフェッドバター バージン オリーブオイル エキストラバージン オリーブオイル 酸度0.3%以下 250ml ココナッツ癒しパワー 健康で、美く
ニュージランド産 グラスフェットバター無塩1kg 冷凍 安全ですばらしい 亜麻仁油 フジッコ カスピ海 ヨーグルト 「腸の力」であなたは変わる: 一生病気にならない、脳と体が強くなる食事法 (単行本)
ギー・イージー 100g  MCTオイル グルテンフリー食品 はじめてのオーガニック手帖
コーヒー豆 プレミアムブレンド 100g レインフォレスト  ココナッツオイル100% ココヤシの泉 ナチュレオ 912g 【生活科学研究会】 オーガニック ココナッツ&ギー(グラスフェッドバター)325ml混ぜるだけでバターコーヒー(完全無欠コーヒー)にEU有機認証 

からだの中から若返るグリーンスムージー健康法

携帯出来る MCTオイル (20g×10包)  グルテンフリーパン 

あなたは半年前に食べたものでできている 実践編

 マウントハーゲン オーガニック フェアトレード インスタントコーヒー100g 携帯用日本製粉 アマニ油 ミニパック 5g 30袋  グルテンフリーパスタ