当ブログはワードプレスで構築、テーマはわいひらさんのCocoonを使わせていただいております。
表の背景色を変更したい
テーマがCocoonの場合、表を作るとデフォルトでは、下のように一行ずつ白とグレーが繰り返されます。
上の表のように普通の表を表示する時、特に下に長い表の時には見やすくて便利なのですが、楽天市場の商品を紹介する時に下のような表示となり気になっていました。
グレーの部分をなくし、背景を真っ白にするため、デフォルトで付いている表のグレーを白または塗り潰しなしにすればいいのかなと思いその方法を調べました。
表の背景をすべて白にする
下のウェブページを参照しました
上記ウェブページを参照して、子テーマののCSSに
.table td {
background: #fff;
}
と、記述すると、表の背景が真っ白くなることがわかりました。
特定のページだけに適用したい
子テーマのCSSに記述すると、今まで作った表すべての背景が真っ白になってしまいますが、それは避けたい！
今回やりたいことは、楽天の商品紹介のあるページだけに適用し､普通の表を作る時はcocoonデフォルトの一行おきに色づけること。
そんな都合のいいことできるのかなと思いきや、Cocoon標準機能「カスタムCSS」に記載すれば､そのページにだけ適用したいCSSが反映されるそう。
ちなみに、カスタムCSSは記事編集ページの下の方
赤線で囲った辺りにカスタムCSSを記述する場所があるので
を記載します。
ここで注意
カスタムCSSに記述する時には最初の「.(ドット)」は書く必要がありません。
table td {
background: #fff;
}
子テーマなどに記載する場合は
.table td {
background: #fff;
}
ということで、カスタムCSSに
table td {
background: #fff;
}
と、記載すると表示は
背景は白で統一されましたが、ボーダーがうすく見えています。これを消すために「border:none;」を追加、
とすると
|
|
希望通りに表示させることができました。
まとめ
ワードプレステーマCocoonを使っている時、特定のページのみ表の背景をすべて白くする方法を紹介しました。
すべてのページで白くしたいのであれば､子テーマのCSSに記述してあげると実現できるはず。
今回希望通りのカスタマイズができたのは、ひとえにワードプレスのテーマCocoonのおかげ。わいひらさんに感謝します･･･m(_ _)m
本文中で紹介した商品は、これから暑くなる季節にあると便利なネッククーラー。首に巻いてスイッチオンすると、2秒で冷たくなります。
冷蔵庫に使用される冷却装置を小型化した物で、首元を直接冷やします。
熱中症対策の一番は身体を冷やすことだと言われます。マスク着用で身体に熱がこもりがちになりますが、これだと好きな時に身体を冷やせますね･･･
コメント