AFFINGER ブログ運営

TinyMCE Advancedで作成したテーブルがレスポンシブにならない時の対処法

更新日:

ども、とんじるです。ぶっひん。

とんじるはWordPressでブログを書いてます。テーマはAffinger 5。痒い所に手が届く、とっても素晴らしいテーマなんですが、ときどき困ったことがあったりもします。今回は作ったテーブル(表組み)が、スマホで正しく見られなくなっちゃったんですが、結構あっけなく解決できちゃいましたのでその話です。

困った!スマホでテーブルが途切れて表示されている!

つい先日公開された記事をスマホで確認したみたところ、なんだかテーブル(表組み)の表示が変なのです。パソコンで見る分には問題ないのですが、スマホで見ると表の右半分がはみ出てしまって見られない。横にスクロールすることもできないし、隠れたところは全然見ることができないのです…

とんじる
Affingerは完全レスポンシブデザイン対応のはずなのに。なぜ?

右側が切れちゃって、横スクロールもできない…

解決!結構あっけなく

表組みの制作はプラグインのTinyMCE Advancedで行っています。

とりあえず投稿画面に入って問題のテーブルを選択した状態で「テーブル」の「表のプロパティ」を調べてみます。

すると、「幅」の欄に「700」という数値が。これはひょっとして幅を700pxに固定するってことでしょうか?

じゃあこれをなんとかすれば直るのかしら?と思ったものの、どうすりゃいいのかわかりません。とりあえず700の数値を消してみて更新したところ…

あらら、直っちゃいました。

スマホでも途切れずに表示されるようになりました。

というわけで、表がレスポンシブにならない時は、テーブルの幅が固定になってる可能性がありますから、数値をクリアすれば直りますよ。っていう単純な話でした。

とんじる
でも、何もしないでもちゃんと表記される表もあるんですよねえ… 気まぐれ?

若干すっきりしないまま、とりあえず問題が自分で解決できたのがうれしい初心者とんじるでした。

そんじゃまた。ぶっひん。

この記事が気に入ったら
いいね ! しよう

-AFFINGER, ブログ運営

Copyright© merumae〈めるまえ通信〉 , 2019 All Rights Reserved Powered by AFFINGER5.