ブログ記事の中で「表（table）」を使うと、PC画面では見やすくてもスマホなどのモバイル機器では変な改行が入ったりして大きすぎて崩れてしまうことがあります。特に、料金比較やスペック表を載せるとき横幅が収まりきらず読みにくくなるのはよくある悩みです。
そこで今回は、WordPressテーマ「SWELL」を使っている方向けに、モバイル（768px以下の画面サイズ）で閲覧しているときだけ表のフォントサイズを小さくする方法をご紹介します。
まずはSWELL子テーマの設定
なぜ子テーマでカスタマイズするべきなのか？
SWELLでは、直接親テーマのCSSを編集してしまうとアップデートの際に上書きされてしまいます。そのため、「子テーマ」のファイルをカスタマイズするのが安全です。
子テーマはSWELL公式サイトからダウンロード可能です。
- WordPressテーマのインストールについては他でたくさん解説されています。そちらを参照してください。
すでに導入している方は、次のステップに進みましょう。
カスタマイズは必ず子テーマ内で！
- 「親テーマを直接カスタマイズしてしまっている…」と不安に思っている方は以下の記事を参考にしてください。
[追加で記事を差し込む予定です]
子テーマの設定方法
管理画面 → 外観 → テーマから「SWELL CHILD」の有効化をクリック
styles.css の場所
子テーマを有効化している場合、WordPress管理画面から以下の場所で styles.css を編集できます。
- 管理画面 → 外観 → テーマファイルエディター
- 右側のファイル一覧から「style.css」をクリック
- 右上の「編集するテーマを選択」が「SWELL CHILD」に選択されていることを確認してください。
追加するCSSコード
以下のコードを style.css に追加してください（元々書かれてあるコードがあればその下へ）。
/* モバイル（768px以下）の記事内 table のフォントサイズを変更 */
@media (max-width: 768px) {
.post_content table {
font-size: 10px; /* 好みのサイズにカスタマイズしてください */
line-height: 1.6; /* 行間をゆったり */
}
}- 忘れずに画面下の「ファイルを更新」をクリックしてください。
コードの解説
@media (max-width: 768px)
→ 画面幅768px以下（スマホやタブレット）にのみ適用.post_content table
→ 記事本文内にある<table>要素に限定して適用font-size: 10px;
→ ここではフォントサイズを10pxに変更。PC表示では従来通りの大きさのまま！line-height: 1.6;
→ 行間を広めにとって、詰まりすぎないように調整
実際に適用したイメージ
- PC表示：通常の大きさの表で見やすい
- モバイル表示：文字が小さくなり、横スクロールや改行崩れが減って読みやすい
特に料金比較表やガジェットのスペック一覧などでは、読みやすさがグッと上がります。文字が小さくて見づらいという人でも自身のスマホを拡大すればキレイな表が見られます！
適用後
適用前
４列以上は横スクロールの設定＆表示横幅をpx指定した方がbetter
まとめ
SWELLを使っていると、記事に表を入れる機会は多いはずです。改行を工夫するなどして少しでも読みやすい表に仕上げる努力がベースにはあります。ですが、そのままだとスマホの表では「文字が大きすぎる」「表がはみ出す」といった根本的な問題があります。
今回紹介したように、子テーマのstyle.cssにCSSを追加するだけである程度は解決できます。
「モバイルだけ調整したい」という場合には、@media クエリを使った方法がとても便利です。
これでスマホユーザーにもストレスなく表を読んでもらえるようになりますので、ぜひ試してみてください。
いまはスマートフォン媒体で記事が見られることが多い時代です。少しでもモバイル読者のために読みやすく調整することで他の人と差をつけましょう！