WordPressのテーブルリスト内の文字を上下中央に寄せる方法！

こんにちは！ロドニ＠tonri55です。

本日は備忘録。

WordPressのテーブルリストって非常に便利ですよね。

クリック一つですぐにリストが作れるんだから。

記事の執筆を続けている中で、テーブルリストにして説明したいことが多くなってくるでしょう。

簡単に作成できるとは言え、問題が出てきます。

ん？セルの縦列を結合して文字の中央寄せはできたけど・・・

上下が中央に寄らないやんけーーー！

こんなことが出てきます。

HTMLとCSSを理解していればスグに解決できるますが、わからない場合はこれを参考にしてみてください。

テーブルリストの上下中央寄せのやり方。

やり方は非常に簡単です。

上下中央寄せしたいセルのHTML部分に、

vertical-align: middle;を追記するだけです。

HTML・CSSを理解してないとは言っても、解決するにはそこをいじらなければいけません。

例題として以下を修正していきます。

「お店選びの基準」が左右の中央寄せはできていますが、上下の中央寄せができていませんね。

それではいじってみましょう。

投稿画面をビジュアル➞テキスト画面に切り替えてください。

１．リストの該当部を探します。

修正する部分は「お店選びの基準」の部分です。

<table style="width: 721px; height: 125px;">
<tbody>
<tr>
<td style="width: 142px;"></td>
<td style="width: 241px; text-align: center;">スターバックス</td>
<td style="width: 294px; text-align: center;">ドトール</td>
</tr>
<tr>
<td style="width: 142px; text-align: center;">お店選びの基準</td>
<td style="width: 241px;">
<ul>
 	<li>店内がオシャレ</li>
 	<li>若い人が多い</li>
 	<li>種類が豊富</li>
 	<li>全面禁煙</li>
</ul>
</td>
<td style="width: 294px;">
<ul>
 	<li>気軽に入れる</li>
 	<li>客層が若すぎない</li>
 	<li>価格が安い</li>
 	<li>喫煙可能</li>
</ul>
</td>
</tr>
</tbody>
</table>

該当するセルはここになります。

<td style="width: 142px; text-align: center;">お店選びの基準</td>
<td style="width: 241px;">

２．vertical-align: middle;を追記

このtext-aligh:center;の後にvertical-align: middle;を追記します。

<td style="width: 142px; text-align: center; vertical-align: middle;">お店選びの基準</td>
<td style="width: 241px;">

３．追記したらプレビューで表示して確認

これで上下左右の中心寄りの修正が完了です。

コード追記で注意すること！

以下の部分は初心者に限らず、中級者以上でも注意が必要です。

最後に

WordPressを利用することで簡単にWebサイトやブログを運用出来るとは言え、

自分好みにカスタマイズしたい！

細かい装飾をいじりたい！

こうなったら基本的なHTMLやCSSを学ぶ必要がでてきます。

ガッツリとやる必要はありませんが、ある程度の基礎を理解すれば良いのです。

困ってから解決するまでの時間を短縮できますよ。

それではまた！