ラフに、タフに、成長

LAFTAF

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;">

 

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

スターバックス ドトール
お店選びの基準
  • 店内がオシャレ
  • 若い人が多い
  • 種類が豊富
  • 全面禁煙
  • 気軽に入れる
  • 客層が若すぎない
  • 価格が安い
  • 喫煙可能

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

 

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

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

  1. 追記する場合は「" "」の中に納めること
  2. HTMLやCSS等のプログラミングコードを入力する際は「半角英数」が基本
  3. 全角で文字を記入、改行、スペースを入力した場合はレイアウトが崩れたり、反映されなくなる
  4. 英文の誤字・脱字には注意。よく確認すること

 

最後に

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

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

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

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

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

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

それではまた！

  • B!