こちらの記事では、WordPressのテーブル内のテキスト文字を上下中央に寄せる方法について解説しています。
テーブルセル内の縦列は中央寄せに簡単にできますが、初期状態ではセルの横列が上下の真ん中に寄らず、上や下のどちらかに偏るので見た目が悪くなってしまいます。
そこで今回は、HTMLで記事ごとに揃えるやり方や、CSSでサイトの全ページ揃えるやり方を紹介します。
テーブル内を上下中央寄せ
テキスト文字を上下揃えるやり方
テーブルのセル内にあるテキスト文字を上下中央寄せにするやり方は簡単です。
上下中央寄せにしたいセルのHTMLに「vertical-align: middle;」を追記するだけで出来ます。
vertical-align: middle;
上下中央に寄らないパターン
| iPhone | Android | |
| スマホ選びのポイント |
|
|
例として「スマホ選びのポイント」の部分が上下中央に寄らないパターンを修正してみます。
編集画面をビジュアルからテキスト画面に切り替えましょう。
▼テーブルのHTML
<tr>
<td style=”width: 33.3333%; text-align: center;”></td>
<td style=”width: 33.3333%; text-align: center;”><strong>iPhone</strong></td>
<td style=”width: 33.3333%; text-align: center;”><strong>Android</strong></td>
</tr>
<tr>
<td style=”width: 33.3333%; text-align: center;”><span style=”color: #ff0000;”>スマホ選びのポイント</span></td>
<td style=”width: 33.3333%;”>
<ul>
<li><strong>セキュリティ面で強い</strong></li>
<li><strong>おしゃれなケースが多い</strong></li>
<li><strong>Macとの同期が簡単</strong></li>
</ul>
</td>
<td style=”width: 33.3333%;”>
<ul>
<li><strong>リーズナブルな価格</strong></li>
<li><strong>機種端末が豊富</strong></li>
<li><strong>テレビを見ることができる</strong></li>
</ul>
</td>
</tr>
</tbody>
</table>
上下中央寄せにしたい部分を分かりやすいように赤字にしておきました。
それでは、赤字の部分に「vertical-align: middle;」を付け加えてみましょう。
vertical-align: middle;
▼HTMLの修正箇所
<td style=”width: 33.3333%; text-align: center;”><span style=”color: #ff0000;”>スマホ選びのポイント</span></td>
↓↓↓↓↓↓
<td style=”width: 33.3333%; text-align: center; vertical-align: middle;“><span style=”color: #ff0000;”>スマホ選びのポイント</span></td>
上下中央寄せにしたい部分に「vertical-align: middle;」を入れたので、上下中央に寄っているパターンをビジュアル画面で見てみましょう。
上下中央に寄っているパターン
| iPhone | Android | |
| スマホ選びのポイント |
|
|
該当するテーブルセルの部分に「vertical-align: middle;」を入れることで、上下中央寄せにすることができました。
※今後、当サイトの設定によって見た目が変わる可能性有り
サイト内をCSSで一括設定
HTMLで設定するのが面倒くさい方や、サイト全体をCSSで一括設定したい方は、下記のCSSを「追加CSS」に入力しましょう。
table tbody td{
vertical-align:middle;
}
赤字部分は、使用しているテーマやテーブルの設定によって変わることがあるので、分からない方はデベロッパーツールで確認してみましょう。
関連記事
Web制作
| ウェブ制作関連記事 | |
| ブログサイトの始め方 | ドメイン取得方法 |
| ドメイン取得～サイト作成手順 | 外観テーマ導入手順 |
| おすすめレンタルサーバー | おすすめテーマ |
| 記事内容(ジャンル)の選び方 | SSL化の設定方法 |
| 固定ページをトップページ変更 | おすすめプラグイン一覧 |
| サイト運営者ID確認 | 効率化ショートカットキー |
| 不要なCSS・JS特定 | ホームページの作り方 |
| スパムコメント対策 | |
▼Googleアナリティクス
| Googleアナリティクス関連記事 | |
| 複数サイト管理方法 | 旧バージョン(UA)設定 |
Googleアドセンス・アフィリエイト
| Googleアドセンス関連記事 | |
| アドセンス設置場所 | 広告単価の高い時期 |
| 広告クリック率確認 | 広告サイズ改善 |
| アンカー広告の固定化 | 広告が表示されない原因 |
| ads.txtファイル問題の修正 | ダブルレクタングル作成 |
| リクエスト処理エラー | Amazonアソシエイト |
| おすすめASP一覧 | 【クローズドASP】felmat依頼内容 |
サイトデザイン
| 関連記事 | |
| TOPページの割り当て | padding設定方法 |
| margin設定方法 | border設定方法 |
| 記事上の余白原因と消し方 | スマホ余白の原因と消し方 |
| 特定カテゴリー非表示 | perタグ内の改行方法 |
| ▶が文字化けする原因対策 | サイドバーのずれ修正 |
| コメント欄に絵文字 | サイドバータイトル非表示 |
| CSSが反映されない原因 | テーブル文字を上下中央揃え |
▼テーマ毎のデザイン
| THE THOR (ザ・トール) | |
| アイキャッチ画像を非表示 | グローバルメニューの出し方 |
エラー対策
| エラー対策の関連記事 | |
| style.cssエラー | functions.phpエラー |
| 画面表示がおかしい対処法 | 重大なエラー対処法 |
| サーバーでプラグイン削除 | エラーコード一覧 |
| 404エラー対策 | ー |
おすすめ関連記事
PR記事一覧
