CSSデビュー！WordPress（ワードプレス）の表の文字サイズを簡単に一括で変更する方法

昨日「続・AliExpressアニバーサリーセールで買ったものと新たな発送方法（2021年）」という記事を書きました。そのページには、WordPress（ワードプレス）のブロックエディタで作れる表が3つあります。

スマホで自分のブログを見直した時、横書きで書いているはずのブログなのに、表が縦書きの日本語になっていて、とても見づらいことに気づき驚愕しました。。

それで、なんとか表の見映えをよくすべく、文字の大きさを変えられないか探したのですが、普通の文章しか変えられないみたいです。

文章のフォントの変え方

普通の文章のブロックであれば、右横に出てくる「タイポグラフィ」のフォントサイズを「デフォルト」からSmall、Regular、Large、Larger、カスタムから選ぶだけで変更できます。

ただし、ブロックごとの変更になるので、例えば同じブロックの中の「この部分だけ」という変更はできません。

こんな感じで表の文字もサイズを変えられるかなと思ったんですが、無理でした。。

表の文字サイズ変更前のスマホでの見え方

パソコンで見ている分には、そこまでおかしくなかったんです。

でも、自分の古くて小さいスマホで見てみると、スマホ幅に合わせるために表が細長く縦書きになってしまっていました。これではものすごく読みづらいですね。。

裏ワザ発見！CSSで簡単に一括変更

どうしたものかといろいろ検索していると、同じように悩んでいる人Q＆Aに行き着きました。

この回答がとても素晴らしいのでご紹介します。わたしのようなWordPress初心者でCSSを触ったことのない人でも大丈夫です。すごく簡単にできました！

Changing the font size in a table

WordPress.orgのサポートページに「Changing the font size in a table」という質問が出ていました。

hennesseystealth (@hennesseystealth)
1 year, 4 months ago

I have several pages that have both text and a table. I want the text to follow the theme but need to reduce font size in the table. This page is currently on a development site that I cannot install plug-ins on such as tinymce advanced. So, I am stuck with using css to change the font size, but since I am a newbie I have no idea if it can be done or how. Any suggestions would be greatly appreciated.

WordPress.orgサポートページより

プラグインを使わずに表のフォントサイズを変えたいという初心者からの質問に対する回答がとても簡潔で秀逸でした！

Steven Stern (sterndata) (@sterndata)
Forum Moderator & Support Team Volunteer

1 year, 4 months ago
This CSS

.wp-block-table td {
font-size: 90%;
}

To add or override CSS: use the “Additional CSS” option in the customizer. https://codex.wordpress.org/CSS#Custom_CSS_in_WordPress

Learn to use the Chrome Developer Tools or Firefox Developer Tools to help you see and test changes to your CSS.

WordPress.orgサポートページより

この方の回答によると、「Additional CSS」にオレンジ色の部分を入力するだけでいいとのことです！

「Additional CSS」の場所はどこ？

最初、右側にある「高度な設定」の中の「追加CSSクラス」のことかなと思いました。

この場所には、表をストライプにしているため、そのストライプにするためのコードが自動的に入っていましたが、ここに追加で入力してみても、何も起こりませんでした。

WordPressの左側の黒いメニューから、「外観」→「カスタマイズ」→「追加CSS」というところをクリックします。

こちらは「わたしのノート」全体を変更するためのものですね。なので、「この表だけ」という変更ではなく、ブログに表がいくつかあるなら、全部を一括して変更することになります。

フォントサイズ変更のビフォーアフター

.wp-block-table td {
font-size: 90%;
}

WordPress.orgの質問コーナーでは「90％」を例に回答されていましたが、わたしの表は文字が多いので「80％」にしてみました。（これ以上小さくすると、老眼の身にはちょっとキツイ感じです、、）

変更前（100％）と変更後（80％）で比べてみます。

スマホの場合

フォントサイズを80％にすると、まだ縦書きのままですが、読みづらさは少しましになったと思います！^^

こちらはまだまだ見づらいので、1つのセルの文章が長すぎるようですね。また今度修正しようと思います。。

パソコンの場合

パソコン版の場合は、違いが見えづらいかもしれませんが、例えば重さや金額が２段になってしまっていたのが1段で表示することができました！

ただ、ヘッダーの文字などはCSSでは小さくできません。

すると、ヘッダー指定をやめて、その他の文字と同じ扱いにしたら小さくできるんじゃないかな？

まとめ

「追加CSS」に簡単なコードを入力することで、表の文字の大きさを一撃で変更することができました！

CSSをいじるのは今回が初めてでしたが、こんなにあっさりできるとは嬉しい驚きです。

難しそうというイメージがありましたが、ちょっとハードルが下がったので、以前買ってあった本もちゃんと読んでみようかなと思います。

ただ、幅の狭い小さなスマホでは、文字のいっぱい書かれた表を幅に合わせて表示するのは無理があると思うので、横にスライドしたりして表示できないかとかも探してみたいと思っています。

WordPressについて書いたブログはこちらです：

2020/7/18「WordPress（ワードプレス）を始めました」
7/19「Gutenberg（グーテンベルク）とは？」
9/15「WordPressで行間に区切りやスペースを挿入する方法（ブロックエディタ）」
2021/3/9「WordPressの改ページの方法と目次を作る方法（ブロックエディタ）」
4/5「CSSデビュー！WordPress（ワードプレス）の表の文字サイズを簡単に一括で変更する方法」

（このブロックは、再利用ブロックです）