WordPress

テーブルの文字や文章が上部に寄ってしまう、中央に寄せたい(WordPress)

投稿日:

Pocket

 

WordPressで記事を書くときの、テーブル内に書いた文章(文字)が上部に寄ってしまうときの対処法メモ。

テーブルを2列や3列などにしている時、行数が同じなら特に気にならないが、行数が異なると中央に寄らず上部へ寄ってしまうことがある。

中央に寄せたい時の、CSS側での編集方法と応急処置用の対処法を下にメモしておきました。

 

もしこれをみてCSSの編集をする場合は、ご自身の責任でお願いします。

テーブルの文字や文章が上部に寄ってしまう、中央に寄せたい(WordPress)

中央に寄っていないテーブルの例

症状は下の画像のような感じのもの。

左側が一行で右側が3行だったりすると、左側の文字が上部寄ってしまい見た目がブサイクになっている。

中央揃えにしても文字または文章が中央に寄るだけなので、下のような編集をすることでうまく中央に寄せることができる。

 

記事編集画面でできる応急処置

記事でテーブルを作った時に「テキスト」の方に切り替えてテーブルのタグを確認すると、「<td style="width: 50%;"></td>」という文字列があると思うので、この中に「vertical-align: middle; 」を入れることで中央に寄せることができる。

「<td style="vertical-align: middle; width: 50%;"></td>」

入れたら上のようになるので、中央揃えにしたい部分の「<td style="」へ「vertical-align: middle; 」を入れる。

とりあえずこの記事のテーブルだけでも中央に寄せておきたいと言う場合はこれで十分です。

 

毎度「vertical-align: middle; 」を入れなくて良いようにする

CSSの方を編集することで、先に紹介した「vertical-align: middle; 」をテーブルタグ内に入れる必要なくテーブルを作るだけで上下中央寄りのものが作成できる。

いじるのはWordPress(自分のブログ)で使用しているテーマにある「table tr td {〜」という部分。

自分は親テーマで構わないので親テーマの方で編集したが、心配な方は子テーマの方に追記する形でやってみてください。

 

親テーマに「table tr td {」という項目があるので、そこの中の「vertical-align:top;」というところを「vertical-align:middle;」に修正する。

編集前

table tr td {
padding: 10px;
border-bottom-width: 1px;
border-left-width: 1px;
border-bottom-style: solid;
border-left-style: solid;
border-bottom-color: #999;
border-left-color: #999;
vertical-align:top;
}

編集後

table tr td {
padding: 10px;
border-bottom-width: 1px;
border-left-width: 1px;
border-bottom-style: solid;
border-left-style: solid;
border-bottom-color: #999;
border-left-color: #999;
vertical-align:middle;
}

これで終わり。

 

自分が使っているWordPressのテーマは「 WING(STINGER PRO2)」なので、それ以外のテーマは上の編集内容と異なる場合があります。

基本的にどのテーマでもやることは大して変わらないと思いますが、事前にCSSのバックアップを取っておくなり対応してからやってください。

 

テーブルを作って文章を改行すると何故か一番上の文字とそれ以外の文字の大きさが変わるのはなぜかわかりません。

これもまた直せたらと思うところで〜す。

-WordPress

Copyright© YOuTsk , 2019 All Rights Reserved Powered by STINGER.