0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Wordpressの表のCSSが反映されない時の対処法

Last updated at Posted at 2023-02-17

経緯

現在、Wordpressで情報発信をしています。

ある時、サイトの見た目を整えるのに、表のデザインを綺麗にしたいと考えました。
色々調べた結果、標準の表だけでは限界があるため、CSSに追記をしました。

CSSはよく分からなかったので、とりあえずネットに転がっているものをコピペ。

デザインとしては、タイトル(左側の列)に背景色が付き、内容(右の列)は白背景になるCSSです。

しかし、全く反映されません。

解決策

原因:htmlが対応していなかった

CSSだけでなく、htmlもど素人だった私は、CSSしかいじっていませんでした。

結論、htmlが私が表示させたいと思っていたコードになっていなかったのが原因でした。

対策:htmlを書き換える

UIから表を作成すると、タイトル部分は特に指定されず、全て”内容のセル”として作成されます。
これの必要なセル部分を、”タイトルセル”として指定してあげる(書き換えてあげる)必要があります。

⇨ htmlの"td"が内容セルなのですが、これをタイトルの"th"に書き換えてあげます。
 後ろの/tdも忘れずに!

具体的な手順

表の作成

まずは、表を作成します。
普通に、テーブルブロックを追加します。
クラシックエディターの中にテーブルを作成するでも問題ありません。

htmlとして編集する

テーブルのブロックを選択して、点々のところをクリックすると
「htmlとして編集する」のボタンが出てくるのでクリック。
※エディター全体を、ビジュアルエディタからコードエディタに変更して修正してもOK

スクリーンショット 2023-02-17 11.23.28.png

そうすると、htmlでの表記に変わります。
スクリーンショット 2023-02-17 11.26.56.png

よく見ると、タイトルにしたい箇所もtdで囲まれているので、これをthに変えます。
/thも忘れずに修正。

これで完了です。

htmlに慣れてない人は、ビジュアル編集のボタンを押すと、いつものビジュアルエディターに戻ります。

スクリーンショット 2023-02-17 11.31.00.png

編集のページでは、CSSで書いたビジュアルにはなりません。
しかし、プレビューモードで見てみると、ちゃんと反映されてます!
スクリーンショット 2023-02-17 11.32.43.png

無事、解決してよかったです。

【参考】実際のサイト:
https://career-saku.com/about-hays/

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?