【WordPress】Simplicityで表がページの横幅を超える時の対処法

シェアする

スポンサーリンク

ども、かわん@双極性障害&社交不安障害ブロガー(@kawan_clb)です!

当ブログはWordPressを使用している。テーマは「Simplicity」を使用中。このテーマは、SEO対策済みのテーマで、WordPressやSEO初心者の僕でも簡単に使うことができる。

また、パソコンとスマホで自動的に表示を切り替えることが可能で重宝している。しかし、本日、ある問題に直面した。

スポンサーリンク

iPhoneで表を表示した時に横幅を超える

上述したように、Simplicityではスマホに最適化された状態でサイトを表示できるようになっている。

しかし、表を表示させたら下記のような形に・・・

【WordPress】Simplicityで表がページの横幅を超える時の対処法

表がiPhoneの画面幅を超えてしまっている。横スクロールすれば表の内容を確認することができるのは良いことだが不細工である。

これを治すために、WordPress管理画面にログインしテーマの編集で以下を編集することにした。

.article table {
border-collapse: collapse;
margin: 15px 0;
}

最初からSimplicityに記載されているtableのCSS。ここに以下のCSSを追記した。

width:100%;
table-layout:fixed;
word-break:break-all;

【WordPress】Simplicityで表がページの横幅を超える時の対処法

これで上のキャプチャのように、iPhoneの画面幅に合わせて表が表示されるようになる。僕と同じように、Simplicityで表が画面幅を超えてしまっている方は試してみてほしい。

WordPress管理画面の右側が真っ白な場合の対処法
WordPress管理画面の右側が真っ白な場合の対処法
ども、かわん@双極性障害&社交不安障害ブロガー(@kawan_clb)です! 当ブログはWordPressを使用してブログを運営しているのですが、本日、WordPress管理画面の右側が真っ白になる不具合に遭遇しました。 原因を調べるべくGoogle先生に質問したところ以...
スポンサーリンク

シェアする

フォローする