WordPress 備忘録

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

投稿日:

こんにちは!ロドニ@tonri55です。

本日は備忘録。

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

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

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

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

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

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

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

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

 

 

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

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

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

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

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

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

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

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

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

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

 

1.リストの該当部を探します。

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

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

 

2.vertical-align: middle;を追記

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

 

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

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

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

 

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

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

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

 

最後に

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

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

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

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

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

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

それではまた!

-WordPress, 備忘録

Copyright© 五黄の寅ログ , 2018 All Rights Reserved.