テーブルブロックがなんかおかしい…
左端の列に色が勝手に付いて変更できない。
色々いじり過ぎて何が原因かも分からない。
CSSもいじってしまっている。
これってバグ?と頭を悩ませていませんか。

その原因は「レスポンシブルテーブル」の設定かもしれません。
- WordPressを使っている
- テーマはcocoon
- テーブルブロックのデザインがおかしくて困っている
- 原因が分からない

基礎的な内容ではありますが、私自身がデザインを変更するときに躓いた経験をもとに書いています。
結論:cocoonのレスポンシブルテーブルが原因
原因はレスポンシブルテーブルの設定の「テーブル1列目を固定表示する」という機能をオンにしていることです。
レスポンシブルテーブルはテーブル(表)に横スクロール機能を追加してくれます。端末に応じて自動設定してくれるので、スマホでも簡単に見やすい表を作ることができます。
WordPress初心者向けのサイトでもオススメされていることが多いです。
「1列目を固定表示」とは一番左の列をスクロールしても動かないように、見出しの設定をしてくれる機能です。
大きな表を作る時には便利な機能ですが、見出し列を必要としない場合はデザインに合わないことも多いです。
オフにしてしまうのがオススメです。
設定方法:所要時間5分
設定方法はカンタンです。
①Wordpressの管理ページにログインする。
②サイドメニューから『cocoon設定』を開く。

③横メニューから『本文』を開く

④下にスクロールして、テーブル設定欄の『テーブルの1列目を固定表示する』のチェックを外す

⑤最下部、『変更をまとめて保存』ボタンを押す

ボタンを押した時、『閲覧できません』などのエラーが発生する場合は、WAFというサイトのセキュリティ機能が邪魔をしている可能性があります。
レンタルサーバーの管理画面にログインして、一時的にWAFをOFFにして保存をしてみてください。
大抵の場合はセキュリティ系のページに含まれています。

編集が終わったら必ずONに戻しましょう。ファイアウォールという、外部からの攻撃を防御する機能です。
まとめ
テーブルブロックの1番左の列の色がおかしい時の対処法でした。
レスポンシブテーブルの設定を変更してから時間が経っていると、設定したことすら忘れてしまう方が大半だと思います。
「もしかして」と気付ける一助になっていると嬉しいです。
最後までお読みいただきありがとうございました。



