経緯
現在、Wordpressで情報発信をしています。
ある時、サイトの見た目を整えるのに、表のデザインを綺麗にしたいと考えました。
色々調べた結果、標準の表だけでは限界があるため、CSSに追記をしました。
CSSはよく分からなかったので、とりあえずネットに転がっているものをコピペ。
デザインとしては、タイトル(左側の列)に背景色が付き、内容(右の列)は白背景になるCSSです。
しかし、全く反映されません。
解決策
原因:htmlが対応していなかった
CSSだけでなく、htmlもど素人だった私は、CSSしかいじっていませんでした。
結論、htmlが私が表示させたいと思っていたコードになっていなかったのが原因でした。
対策:htmlを書き換える
UIから表を作成すると、タイトル部分は特に指定されず、全て”内容のセル”として作成されます。
これの必要なセル部分を、”タイトルセル”として指定してあげる(書き換えてあげる)必要があります。
⇨ htmlの"td"が内容セルなのですが、これをタイトルの"th"に書き換えてあげます。
後ろの/tdも忘れずに!
具体的な手順
表の作成
まずは、表を作成します。
普通に、テーブルブロックを追加します。
クラシックエディターの中にテーブルを作成するでも問題ありません。
htmlとして編集する
テーブルのブロックを選択して、点々のところをクリックすると
「htmlとして編集する」のボタンが出てくるのでクリック。
※エディター全体を、ビジュアルエディタからコードエディタに変更して修正してもOK
よく見ると、タイトルにしたい箇所もtdで囲まれているので、これをthに変えます。
/thも忘れずに修正。
これで完了です。
htmlに慣れてない人は、ビジュアル編集のボタンを押すと、いつものビジュアルエディターに戻ります。
編集のページでは、CSSで書いたビジュアルにはなりません。
しかし、プレビューモードで見てみると、ちゃんと反映されてます!
無事、解決してよかったです。
【参考】実際のサイト:
https://career-saku.com/about-hays/