Lightning でテーブルのタイポグラフィ(フォントサイズ)を使えるようにするには

ブロックエディターのタイポグラフィ

現在のブロックエディターはタイポグラフィの設定欄を使ってブロックのフォントサイズを変更できるようにようになっています。

これは便利な機能ですが、この記事を書いている2023年1月10日の時点で Lightning の場合、テーブルブロックでタイポグラフィを使ってフォントサイズを変更することができません。　※近日中にできるようになるかもしれません (^^♪

なぜ設定できないのか

Lightning ではテーブルのフォントサイズが本文よりも小さめになるように以下の CSS が設定されています。

table td, table th {
  font-size: var(--vk-size-text-sm);
}

td, th {
  font-size: 14px;
}

ブロックエディターのタイポグラフィの設定がこの CSS に負けているために設定が効かなくなっているんです。

現在、ベクトルさんが [ 対応検討中 ] とのことですが、既存のテーブルへの影響が出ないようにするのはちょっと厄介な作業になるかもしれません。

.wp-block-table:where(:not([class*=font-size])) {
    font-size: var(--vk-size-text-sm);
}

.wp-block-table, table td, table th {
  font-size: unset;
}

タイポグラフィで設定できるようにするには

とりあえず、子テーマの style.css などに以下の CSS を追加すればタイポグラフィの設定が反映されるようになります。

table td, table th {
  font-size: unset;
}

この場合、既存のテーブルのフォントサイズが大きく(本文と同じ大きさに)なりますので、それが困る場合はこの方法は使えません。

以下に該当するのであれば、このやり方がおすすめです。

サイト運営者プロフィール

対馬 俊彦魚沼情報サービス (新潟県南魚沼市)

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、お手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

≫メールでのお問い合わせはこちら

最新の投稿

この著者の記事一覧

• WordPress2024年11月24日ベクトルの公式テクニカルパートナーになりました🎉
• WordPress2024年11月24日観光案内のホームページのデモサイトを追加しました
• WordPress2024年11月5日スターターパックのモバイルナビのボタンが日本語表記に対応しました
• WordPress2024年10月28日スマホでちょうど画面幅いっぱいになるようにフォントサイズを自動調整する

Lightning テーマ使用

中小企業様、個人事業主様向け

最適なホームページ

を制作いたします

制作費用	クオリティを落とさずに 価格を抑えたサイトを制作します
必要十分	お問い合わせフォーム、新着情報など 必要なものが最初から揃っています
サポート	1年間のサポートがついて安心 初めてでもホームページを活用できます

もっと詳しく