【WP】Cocoon 表 背景色

アイキャッチ ワードプレス

当ブログはワードプレスで構築、テーマはわいひらさんのCocoonを使わせていただいております。

表の背景色を変更したい

テーマがCocoonの場合、表を作るとデフォルトでは、下のように一行ずつ白とグレーが繰り返されます。

Cocoonデフォルトの表

当ブログのこちらのページから抜粋

上の表のように普通の表を表示する時、特に下に長い表の時には見やすくて便利なのですが、楽天市場の商品を紹介する時に下のような表示となり気になっていました。

楽天商品表示デフォルト

グレーの部分をなくし、背景を真っ白にするため、デフォルトで付いている表のグレーを白または塗り潰しなしにすればいいのかなと思いその方法を調べました。

表の背景をすべて白にする

下のウェブページを参照しました

テーブル セルの色付けについて
こんばんは 最近、テーブルで一覧表を作る機会が多くなりました 縦に結合すると、デフォルトでは背景色がまだらになってしまいますよね。そんなときは「td」をclassとカスタムCSSで背景色の変更をしています セルに一つ一つ色をつけるのは結構な面倒・・ セル結合に限らずビジュアルエディタから色が確認で...
セルの背景色を指定する
よろしくお願いいたします テーマとは直接関係がありませんが テーブルで任意のセル背景色を指定したいです  ~  上記のタグではcssが優先?されて背景色が変わりません アドバイスをご教示頂けないでしょうか

上記ウェブページを参照して、子テーマののCSSに

.table td {
       background: #fff;
}

と、記述すると、表の背景が真っ白くなることがわかりました。

特定のページだけに適用したい

子テーマのCSSに記述すると、今まで作った表すべての背景が真っ白になってしまいますが、それは避けたい!

今回やりたいことは、楽天の商品紹介のあるページだけに適用し、普通の表を作る時はcocoonデフォルトの一行おきに色づけること。

そんな都合のいいことできるのかなと思いきや、Cocoon標準機能「カスタムCSS」に記載すれば、そのページにだけ適用したいCSSが反映されるそう。

ちなみに、カスタムCSSは記事編集ページの下の方

記事編集画面

赤線で囲った辺りにカスタムCSSを記述する場所があるので


を記載します。

ここで注意
カスタムCSSに記述する時には最初の「.(ドット)」は書く必要がありません。

カスタムCSSに記載する場合

table td {
       background: #fff;
}

子テーマなどに記載する場合は

.table td {
       background: #fff;
}

ということで、カスタムCSSに

table td {
       background: #fff;
}

と、記載すると表示は

楽天商品表示


背景は白で統一されましたが、ボーダーがうすく見えています。これを消すために「border:none;」を追加、

カスタムCSS


とすると

希望通りに表示させることができました。

まとめ

ワードプレステーマCocoonを使っている時、特定のページのみ表の背景をすべて白くする方法を紹介しました。

すべてのページで白くしたいのであれば、子テーマのCSSに記述してあげると実現できるはず。

今回希望通りのカスタマイズができたのは、ひとえにワードプレスのテーマCocoonのおかげ。わいひらさんに感謝します・・・m(_ _)m


本文中で紹介した商品は、これから暑くなる季節にあると便利なネッククーラー。首に巻いてスイッチオンすると、2秒で冷たくなります。

冷蔵庫に使用される冷却装置を小型化した物で、首元を直接冷やします。

熱中症対策の一番は身体を冷やすことだと言われます。マスク着用で身体に熱がこもりがちになりますが、これだと好きな時に身体を冷やせますね・・・

コメント

タイトルとURLをコピーしました