Cocoonのテーブル横スクロールで影が無い部分を修正する

WordPressテーマ「Cocoon」のテーブル横スクロールで影が無い部分をCSSで修正する方法です。

Cocoonテーブル横スクロール時の影の問題点

Cocoonでは大きなテーブルをスマホでも表示できるように、テーブルに横スクロールを設定できます。

そして、テーブルを横スクロールを設定するとテーブル右側に影が表示されるようになります。

しかし、色の付いた行では影が表示されず見た目が残念なことになってしまってます。これは色付きの行が影の上に表示されているのが原因です。

この問題は以下のCSSで修正できます。

table tr:nth-of-type(2n+1) {
    background: rgba(221, 228, 234, 0.14);
}

内容としては単純で、色付き行のカラーを半透明にして影が見えるように、その分色が薄くなるので半透明化前の色と同じく見えるように濃くしただけです。

CSSを変更しても何かしらの致命的な問題にはなりません。追加した部分を消せば完全に元に戻ります。

WordPress管理画面の「外観→カスタマイズ→追加CSS」からCSSを貼り付けてください。