【AFFINGER6】スマホで表が見にくい・崩れる問題を一発解決するカスタマイズ方法

ガジェットブロガーとして記事を書いていると、どうしても書かなければならないもの。それは『スペック表』だ。しかし、スペック表は結構書くことが多くて、表の中で改行しまくったりしてかなり見にくいことがある。

今回は俺が使っているWordプレスのブログテーマ『affinger6（アフィンガー6）』で、表をパソコンで見た際は大きく表示しつつ、スマホで見る場合は文字を小さくして表を見やすくする方法を解説していく。

こっちもおすすめ

: 【チャンネル登録者1000人】YouTubeにこれから挑戦する人たちへ
続きを見る

: 【楽天モバイル】三木谷キャンペーンで14,000pt還元
続きを見る

: 【2026年6月版】スマホを安く買う方法と各通信キャリアのお得なキャンペーン
続きを見る

この記事の目次

ブログの表をいい感じに見やすくしたい
（解決）Gemini3.1Proならコードが出力できた
（本題）「AFFINGER6（アフィンガー6）」スマホで表示する表の大きさを小さくする方法
まとめ

ブログの表をいい感じに見やすくしたい

ブログを書いている人なら誰でも考えることだとは思うのが「表を見やすくすること」だと思う。特に「パソコンで見た表」と「スマホで見た表」は結構見え方に違いがある。

このブログは一応ガジェットブログなので、スペック表を多用する。そしてスペック表は情報量が多いから改行されて見えづらくなりがち。特にスマホだと意味不明なほど改行されたりする。

そういう「あ、このサイト素人だ」とか「このサイトいまいち」と思われてしまったら最後。せっかくブログにたどり着いた読者は二度と来訪することはない。逆に「このブログ見やすい」とか「ちゃんとしている」って思われると、勝手に情報の信頼性もあがったりして、またブログに足を運んでくれる可能性が高くなる。これはチャンス。

AIツールで作表してみる

そうは言っても、俺はプログラマーでもSEでもないから、具体的なことはわからないし、HTMLもXMLもコードも全然わからない。でも現代にはチャットGPTをはじめとしたAIツールでコードの作成が可能だ。便利な世の中になった。

そう簡単にはいかない

ところがどっこい。チャットGPTやGeminiに何度聞いてもいい感じに表が小さくならないし。追加CSSを変えたり、個別に直してみたりしても全然ダメ。もしかしてAFFINGER6だとできないの？

AFFINGER6でも絶対設定できる

ただ俺には『AFFINGER6（アフィンガー6）』の場合でも、スマホで見た際に表を小さくする方法が必ずあるという確信があった。

とはいうのも、俺が日頃から大変参考にさせていただいている「変な仮面を被った禿げた関西弁を話すおっさんのブログ」のスペック表をスマホで見てみるといい感じに表が小さく、そして見やすくなっているからだ。このブログはAFFINGER6で構成されている。つまり俺のブログでも同じことが必ずできるはず。

そもそも表を画像にすればいいんじゃね？

ただ、繰り返しにはなるんだけど、何回Geminiに聞いてもいい感じのコードは作成されない。日を変えて何度試しても上手くいかない。じゃあ、そもそも表にこだわらなくても、そのスペック表を画像にして張っちゃえば良くね？パソコンでもスマホでも勝手に拡大縮小されて見やすいじゃん？って思った。でもそれはブログを書く上ですごく良くないことだと思われる。

画像で代替するとSEO的に不利になりそう

とはいうのも、表の代わりに画像で済ませた場合、SEO的にとっっっっっても不利になりそう。というか99%不利。表の場合はそこに書いてあることが全て「検索の対象」になりえる。

しかし、画像の場合はただの１枚画でしかない。せっかく「スペック表」という検索にひっかりそうな情報の宝庫をみすみす逃すわけにはいかない。でも見やすさは追求したい。どうしよう。

（解決）Gemini3.1Proならコードが出力できた

どうしても表を見やすくするコードが欲しかったので、有料版のGeminiを利用して再度コードを抽出。何回か壁打ちをするといい感じのコードがやっと出力された。そこからもう少し使いやすいコードに改良することができたので、ここからはそのコードを示しつつ、使い方を解説していく。

（本題）「AFFINGER6（アフィンガー6）」スマホで表示する表の大きさを小さくする方法

というわけでここから本題。スマホで表示する表の大きさを小さくする方法の手順は次の通り。

外観の追加CSSにコードを入力
小さくしたい表の「高度な設定」にコード入力

それぞれ解説をしていこう。

「外観」の追加CSSにコードを入力する

AFFIGERの管理画面から「外観」＞「カスタマイズ」＞「追加CSS」と進み、次のコードを追加する。

@media screen and (max-width: 599px) {

    /* ▼ 8px用の設定 */
    .sp-table-8 table { width: 100% !important; }
    .sp-table-8 table th, .sp-table-8 table td {
        font-size: 8px !important; line-height: 1.3 !important; padding: 3px 1px !important; word-break: break-all !important;
    }

    /* ▼ 9px用の設定 */
    .sp-table-9 table { width: 100% !important; }
    .sp-table-9 table th, .sp-table-9 table td {
        font-size: 9px !important; line-height: 1.3 !important; padding: 3px 1px !important; word-break: break-all !important;
    }

    /* ▼ 10px用の設定 */
    .sp-table-10 table { width: 100% !important; }
    .sp-table-10 table th, .sp-table-10 table td {
        font-size: 10px !important; line-height: 1.3 !important; padding: 4px 2px !important; word-break: break-all !important;
    }

    /* ▼ 11px用の設定 */
    .sp-table-11 table { width: 100% !important; }
    .sp-table-11 table th, .sp-table-11 table td {
        font-size: 11px !important; line-height: 1.3 !important; padding: 4px 2px !important; word-break: break-all !important;
    }

    /* ▼ 12px用の設定 */
    .sp-table-12 table { width: 100% !important; }
    .sp-table-12 table th, .sp-table-12 table td {
        font-size: 12px !important; line-height: 1.3 !important; padding: 5px 3px !important; word-break: break-all !important;
    }

    /* ▼ 13px用の設定 */
    .sp-table-13 table { width: 100% !important; }
    .sp-table-13 table th, .sp-table-13 table td {
        font-size: 13px !important; line-height: 1.3 !important; padding: 5px 3px !important; word-break: break-all !important;
    }

    /* ▼ 14px用の設定 */
    .sp-table-14 table { width: 100% !important; }
    .sp-table-14 table th, .sp-table-14 table td {
        font-size: 14px !important; line-height: 1.3 !important; padding: 6px 4px !important; word-break: break-all !important;
    }

    /* ▼ 15px用の設定 */
    .sp-table-15 table { width: 100% !important; }
    .sp-table-15 table th, .sp-table-15 table td {
        font-size: 15px !important; line-height: 1.3 !important; padding: 6px 4px !important; word-break: break-all !important;
    }
}

ちょっと長いけどそのままコピーして貼り付けて大丈夫。これで第一段階は終了。

小さくしたい表の「高度な設定」にコード入力

次に各記事で作った表を指定して。「高度な設定」＞「追加 CSS クラス」と進み、「sp-table-10」と入力をする。例えば次の表を例にしてみよう。この表の追加CSSクラスは何もいじっていない状態。スマホで見てみると中々見えづらいと思う。（パソコンだと見え方は一緒）

追加CSSクラスをいじらない場合の見え方

スペック項目	Xiaomi 17T	Xiaomi 17T Pro
通常価格	89,980円（12GB/256GB） 109,800円（12GB/512GB）	119,800円（12GB/256GB） 139,800円（12GB/512GB）
SoC	Dimensity 8500-Ultra	Dimensity 9500
AnTuTu	約210万点	約320万点
ディスプレイ	6.59インチ有機EL (120Hz)	6.83インチ有機EL (144Hz)
本体サイズ	H157.6mm / W75.2mm / T 8.17mm	H162.2mm / W77.5mm / T 8.25mm
重さ	200g	219g
バッテリー	6,500mAh	7,000mAh

次に「追加 CSS クラス」に「sp-table-10」と入力した場合の見え方が次の通り。

「sp-table-10」と入力した場合の見え方

スペック項目	Xiaomi 17T	Xiaomi 17T Pro
通常価格	89,980円（12GB/256GB） 109,800円（12GB/512GB）	119,800円（12GB/256GB） 139,800円（12GB/512GB）
SoC	Dimensity 8500-Ultra	Dimensity 9500
AnTuTu	約210万点	約320万点
ディスプレイ	6.59インチ有機EL (120Hz)	6.83インチ有機EL (144Hz)
本体サイズ	H157.6mm / W75.2mm / T 8.17mm	H162.2mm / W77.5mm / T 8.25mm
重さ	200g	219g
バッテリー	6,500mAh	7,000mAh

どうだろう。文字が小さくなってだいぶ見え方が変わったんじゃないかと思う。これでも十分な進歩だが、もうちょっと改良したい。とはいうのも、文字の大きさを表ごとに変えることができたら、もっと見やすい表になるんじゃなかろうか。

表ごとに文字の大きさを変更する

ここでもう一度さっきのコードを見てみてほしい。カンの鋭いあなたなら何となく何が書いてあるのかわかるはずだ。

@media screen and (max-width: 599px) {

    /* ▼ 8px用の設定 */
    .sp-table-8 table { width: 100% !important; }
    .sp-table-8 table th, .sp-table-8 table td {
        font-size: 8px !important; line-height: 1.3 !important; padding: 3px 1px !important; word-break: break-all !important;
    }

    /* ▼ 9px用の設定 */
    .sp-table-9 table { width: 100% !important; }
    .sp-table-9 table th, .sp-table-9 table td {
        font-size: 9px !important; line-height: 1.3 !important; padding: 3px 1px !important; word-break: break-all !important;
    }

    /* ▼ 10px用の設定 */
    .sp-table-10 table { width: 100% !important; }
    .sp-table-10 table th, .sp-table-10 table td {
        font-size: 10px !important; line-height: 1.3 !important; padding: 4px 2px !important; word-break: break-all !important;
    }

    /* ▼ 11px用の設定 */
    .sp-table-11 table { width: 100% !important; }
    .sp-table-11 table th, .sp-table-11 table td {
        font-size: 11px !important; line-height: 1.3 !important; padding: 4px 2px !important; word-break: break-all !important;
    }

    /* ▼ 12px用の設定 */
    .sp-table-12 table { width: 100% !important; }
    .sp-table-12 table th, .sp-table-12 table td {
        font-size: 12px !important; line-height: 1.3 !important; padding: 5px 3px !important; word-break: break-all !important;
    }

    /* ▼ 13px用の設定 */
    .sp-table-13 table { width: 100% !important; }
    .sp-table-13 table th, .sp-table-13 table td {
        font-size: 13px !important; line-height: 1.3 !important; padding: 5px 3px !important; word-break: break-all !important;
    }

    /* ▼ 14px用の設定 */
    .sp-table-14 table { width: 100% !important; }
    .sp-table-14 table th, .sp-table-14 table td {
        font-size: 14px !important; line-height: 1.3 !important; padding: 6px 4px !important; word-break: break-all !important;
    }

    /* ▼ 15px用の設定 */
    .sp-table-15 table { width: 100% !important; }
    .sp-table-15 table th, .sp-table-15 table td {
        font-size: 15px !important; line-height: 1.3 !important; padding: 6px 4px !important; word-break: break-all !important;
    }
}

そう、このコードは表の文字の大きさを「8px～15px」まで指定して変更することができる。つまり、さっきは追加CSSに「sp-table-10」と入力したので、表の文字の大きさが「10px」になったが、「sp-table-8」と入力すれば表の文字の大きさを「8px」にできる。しかも表ごとに変更が可能だ。

各フォントでの見え方の違い

最後に各フォントごとの見え方の違いを示して終わりたい。

8px	Xiaomi 17T	Xiaomi 17T Pro
通常価格	89,980円（12GB/256GB） 109,800円（12GB/512GB）	119,800円（12GB/256GB） 139,800円（12GB/512GB）
SoC	Dimensity 8500-Ultra	Dimensity 9500
ディスプレイ	6.59インチ有機EL (120Hz)	6.83インチ有機EL (144Hz)
本体サイズ	H157.6mm / W75.2mm / T 8.17mm	H162.2mm / W77.5mm / T 8.25mm

9px	Xiaomi 17T	Xiaomi 17T Pro
通常価格	89,980円（12GB/256GB） 109,800円（12GB/512GB）	119,800円（12GB/256GB） 139,800円（12GB/512GB）
SoC	Dimensity 8500-Ultra	Dimensity 9500
ディスプレイ	6.59インチ有機EL (120Hz)	6.83インチ有機EL (144Hz)
本体サイズ	H157.6mm / W75.2mm / T 8.17mm	H162.2mm / W77.5mm / T 8.25mm

10px	Xiaomi 17T	Xiaomi 17T Pro
通常価格	89,980円（12GB/256GB） 109,800円（12GB/512GB）	119,800円（12GB/256GB） 139,800円（12GB/512GB）
SoC	Dimensity 8500-Ultra	Dimensity 9500
ディスプレイ	6.59インチ有機EL (120Hz)	6.83インチ有機EL (144Hz)
本体サイズ	H157.6mm / W75.2mm / T 8.17mm	H162.2mm / W77.5mm / T 8.25mm

11px	Xiaomi 17T	Xiaomi 17T Pro
通常価格	89,980円（12GB/256GB） 109,800円（12GB/512GB）	119,800円（12GB/256GB） 139,800円（12GB/512GB）
SoC	Dimensity 8500-Ultra	Dimensity 9500
ディスプレイ	6.59インチ有機EL (120Hz)	6.83インチ有機EL (144Hz)
本体サイズ	H157.6mm / W75.2mm / T 8.17mm	H162.2mm / W77.5mm / T 8.25mm

12px	Xiaomi 17T	Xiaomi 17T Pro
通常価格	89,980円（12GB/256GB） 109,800円（12GB/512GB）	119,800円（12GB/256GB） 139,800円（12GB/512GB）
SoC	Dimensity 8500-Ultra	Dimensity 9500
ディスプレイ	6.59インチ有機EL (120Hz)	6.83インチ有機EL (144Hz)
本体サイズ	H157.6mm / W75.2mm / T 8.17mm	H162.2mm / W77.5mm / T 8.25mm

13px	Xiaomi 17T	Xiaomi 17T Pro
通常価格	89,980円（12GB/256GB） 109,800円（12GB/512GB）	119,800円（12GB/256GB） 139,800円（12GB/512GB）
SoC	Dimensity 8500-Ultra	Dimensity 9500
ディスプレイ	6.59インチ有機EL (120Hz)	6.83インチ有機EL (144Hz)
本体サイズ	H157.6mm / W75.2mm / T 8.17mm	H162.2mm / W77.5mm / T 8.25mm

14px	Xiaomi 17T	Xiaomi 17T Pro
通常価格	89,980円（12GB/256GB） 109,800円（12GB/512GB）	119,800円（12GB/256GB） 139,800円（12GB/512GB）
SoC	Dimensity 8500-Ultra	Dimensity 9500
ディスプレイ	6.59インチ有機EL (120Hz)	6.83インチ有機EL (144Hz)
本体サイズ	H157.6mm / W75.2mm / T 8.17mm	H162.2mm / W77.5mm / T 8.25mm

15px	Xiaomi 17T	Xiaomi 17T Pro
通常価格	89,980円（12GB/256GB） 109,800円（12GB/512GB）	119,800円（12GB/256GB） 139,800円（12GB/512GB）
SoC	Dimensity 8500-Ultra	Dimensity 9500
ディスプレイ	6.59インチ有機EL (120Hz)	6.83インチ有機EL (144Hz)
本体サイズ	H157.6mm / W75.2mm / T 8.17mm	H162.2mm / W77.5mm / T 8.25mm

どうだろう。パソコンでの見え方は一切変わらないのに、スマホでの見え方の違いは一目瞭然だ。このフォントの大きさを変更しつつ、各セルの文字数を調整したり、表の幅を調整したりすることでスマホでも見やすい作表が可能になる。嬉しい。

まとめ

というわけで最後にまとめ。今回はaffinger6で作表した際に、パソコンでもスマホでも見やすい表を作る方法を解説してきた。この方法を編み出す前までは、表を画像に直していたり、横スクロールで対応したりしていたんだけど、もっと見やすい表を作れればブログとしての信頼度があがるんじゃないかと思ってずっと試行錯誤してきた。

結果としてGeminiの有料プランに加入することでサクッと解決してしまった。AIってマジで凄い。使いこなせればこんなにも優秀なツールはないものだと改めて感じさせられた。

AFFINGER7（WordPressテーマ）