【SWELL】テーブル(表)ブロックの文字の縦軸を中央にするCSS

SWELLは他のテーマと違い、テーブルの文字が上揃えになっています。

上揃えにも利点はありますが、縦幅のあるセルだとなんだか不格好ですよね?。

セルが複数行になると…←こんな感じに
文字が上揃えになってしまいます
セルが1行だけなら問題ありません

横軸はエディター上で変えられますが、縦軸は指定する方法がありません。ということで、CSSを使ってテーブル内の文字の縦軸を中央寄りにしていきましょう

目次

テーブルの文字の縦方向を中央に寄せるCSS

横軸を指定する”text-align”と同じように、縦軸を指定するプロパティも存在します。それが”vertical-align”です。SWELLではこのプロパティが top(上揃え)になっているので、これをmiddle(中央揃え)に変更します。

本来はこのプロパティを表の<td>に追記するだけで良いのですが、SWELLの場合はテーブルに色々とデザインが適用されているため、競合して上手くいきません。

なので、スタイルシートに記入して、テーブル全てに適用させてしまいましょう。CSSはこちらです。

.post_content td, .post_content th{
	vertical-align : middle;
}

そのままコピペでstyle.cssに貼り付けましょう。

適用後はこのようになります。
※エディター上では反映されないので、プレビュー画面で確認してみてください

CSS適用後のSWELLのテーブルブロック
スッキリしましたね

内容としては、投稿(post)のテーブルセルとテーブルヘッダーの縦軸を中央揃えにしています。もし、テーブルヘッダーだけに適用したい場合は、”.post_content td”は消してしまってください。(逆も然り)

ちなみに、ブロックエディターのテーブルは機能がまだ充実していないので、凝ったテーブルが作りたい場合は、「Flexible Table Block」を使用するのがオススメです。

あとがき

表の文字が上に寄ってようが中央に寄ってようが、どうでもいいことのように感じますよね。でも、ユーザビリティはこういう細かいことの積み重ね。

少しでもストレスなく綺麗な記事が作れるように改善していきましょう!

その他のSWELLの関連記事

目次
目次
閉じる