質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

3030閲覧

ワードプレスのテーブル崩れ

Spin

総合スコア13

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/06/07 10:00

編集2017/06/16 01:53

ワードプレスでスポイラーの中にテーブルを作成したところモバイル端末での表示が崩れてしまいました。
スポイラーの中にあるテーブルにモバイルで表示されていることを認識させるためにはどうすればよいですか?

前提・実現したいこと

タブや開閉式のスポイラーの中に入れたテーブルを表示が崩れないモバイル表示にしたい。!

発生している問題・エラーメッセージ

スポイラーの中にいれたテーブルのモバイル表示が崩れる。
(スポイラーの中にあるコンテンツがモバイルで表示されているのにモバイルという認識をおこなっていない気がします。)

PCでは画面を小さくしても正常にレスポンシブで表示される。
タブやスポイラーの中にテーブルを入れているが、テーブルのみ、タブの中にテーブルを入れたときも正常に表示される。
スポイラーの中にはいっているテーブルがアイフォンなどの端末で見たときのみ表示が崩れる。
アイフォンで表示崩れが起きている画面を横や縦向きにして元に戻すと表示崩れが解消され正常に表示される。

補足情報(言語/FW/ツール等のバージョンなど)

ワードプレスのプラグインを使用してます。
TablePress(テーブル作成プラグイン)
FooTable(モバイル判定がでるとテーブルを一部折りたたみ見やすくしてくれるプラグイン)
Shortcodes Ultimate(タブやトグルをショートコードで簡単に設定できるプラグイン)

プラグインの変更やコードなどで実現できれば手段は何でも構いません。
全くの素人なのでわらにもすがる思いです。助言をいただけますと幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2017/06/07 12:30

ソースコードや該当の設定がわかる情報をご提示願います。この文章だけでは回答者側が何を基準にどう回答すればよいかわかりません。
Spin

2017/06/08 06:00

質問に不備があったので追記いたしました。ほかに掲載するべき情報がありましたらよろしくお願いします。本気で治したいとおもい素人ながら日々奮闘中です。
m.ts10806

2017/06/08 06:23 編集

問題の切り分けが必要ですね。結構細かくなりそうですが・・・。 色々書きましたが、こちらでは解決までの経緯がたどりにくいので回答に移行します。
m.ts10806

2017/06/11 20:56

同質問を再投稿されたようですので、こちらはどのような形でもよいので締めてもらえませんか?
guest

回答1

0

ベストアンサー

問題の切り分けが必要そうです。
下記、ご確認ください。

  • androidやタブレットでは表示はどうなっていますか?
  • FooTableでもっと簡単なテーブルを組んだ場合はきちんとモバイル判定してくれているでしょうか?
  • FooTableにも色々設定があるようですが、(参考にしたサイト)なんでもいいので「モバイルのみ非表示項目」を設定した場合はきちんと非表示になっていますか?(PC、スマフォ双方で確認してください)
  • ブラウザのデベロッパーツールなどのコンソールにてエラーが出ていないかも確認してみてください
  • 他のテーブルのレスポンシブ対応プラグイン、例えばResponsive Tablesなども検証してみてください

※手元にWordpressの実行環境がないため状況から考えられる確認事項を提示しています。

投稿2017/06/08 06:35

編集2017/06/08 06:36
m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Spin

2017/06/08 10:38

コメントありがとうございます。 androidやタブレットでは表示はどうなっていますか? →PCでタブレットサイズ、モバイルサイズにした場合は表示崩れが起きていない状況です。iphoneSE,iphone6sの実機で確認すると表示が崩れます。 FooTableでもっと簡単なテーブルを組んだ場合はきちんとモバイル判定してくれているでしょうか? →簡単なテーブルというより、スポイラーの中に組まなければ正常にモバイル判定してくれます。スポイラーの中にテーブルを入れることでモバイル判定をしてくれなくなります。 FooTableにも色々設定があるようですが、(参考にしたサイト)なんでもいいので「モバイルのみ非表示項目」を設定した場合はきちんと非表示になっていますか?(PC、スマフォ双方で確認してください) →PCでは正常に表示されます。スマホ実機の場合、表示崩れがおきます。 ブラウザのデベロッパーツールなどのコンソールにてエラーが出ていないかも確認してみてください →PCのモバイル表示では正常に反映されのでエラーが見当たりませんでした。スマホではコンソールの確認のやり方がわからないので未確認です。 他のテーブルのレスポンシブ対応プラグイン、例えばResponsive Tablesなども検証してみてください →Responsive Tablesなどほかのテーブル作成プラグインもためしたのですが、だめでした。 wikiのようなコンテンツページを作成したいのでどうしてまカテゴリごとに分けたくスポイラーの中にテーブルを作成したいと思っています。 質問に不備があるとおもうのでURL記載しておきます。 destiny2wiki.net こちらの防具DBのページにあるタイタンヘルメットが当該問題のテーブルになります。 ご助言頂けますと幸いです。 何卒よろしくお願いします。
m.ts10806

2017/06/08 21:49 編集

確かにパスワードフィールドに対する警告は出ますがエラーはないようなのでFootableを制御するJavascript等の動きには問題はないでしょうね。 > →PCでは正常に表示されます ん。それちょっと怪しいですね。こちらChromeとFireFox最新で見てますが、いずれもフル表示からひとつ狭くしたときにメインエリアからテーブルがはみ出しています。 結構狭めないとthに直接styleでwidthが入っているのが原因ではないでしょうか?デベロッパーツールはPCで使えるものなのでPCで試しましたが、ここのwidthをなくすとはみ出るのは解消できそうです。 こちらAndroidですが全体を横にスライドできる(外に空白ができる)のが気になります。全体の枠をはみ出るような幅を持った要素が中にありそうですね。 もちろん他にも怪しいところはあるかもしれませんが、画面レイアウトについては複合的な要因が絡んでくるので1つずつ潰していきましょう。
m.ts10806

2017/06/08 21:46 編集

でもこのテーブル動作変ですね。 PCブラウザで確認した感じですが、結構狭めないとヘッダー非表示設定がきかないし、ヘッダー非表示設定になってから広げると結構広げてもしばらく非表示設定のままついてくるし。 テーブルの仕様なんでしょうか・・・。
Spin

2017/06/09 01:46

回答ありがとうございます。 確認不足でした。たしかにPCでも狭めると不自然な挙動してしまいますね。 thに直接styleでwidthが入っているのが原因とのことなのでPC表示はそちらを試行錯誤してみます。 また、footableの動きには問題ないとのこと、複合的な要素がからんでいることが分かっただけでも、素人の僕には参考になります。 初めてサイトを作成しプラグインを多用しているので、細かい部分の不自然な動きに関しては今後ひとつづつ勉強しながら対処していこうと思います。 ただ今回のスマホでテーブルの表示が重なってしまうのはクリティカルなのでそこだけでも解決したいと考えています。 そのた情報を提示することで解決に近づけるのであればおっしゃっていただけますと幸いです。 本日は時間が作れそうなので他のテーブルプラグインを使用したりバックアップをとってから記述を試行錯誤で変更してみようと思います。 matsu1006さん親身にお答えいただきありがとうございます。
m.ts10806

2017/06/09 01:58

レスポンシブは基本画面幅によるレイアウトの自動調整機能なので、PCブラウザでモバイル表示くらいに幅を狭くして上手くいけば、おおよそ上手くいくものと思われます。もちろんスマートフォンのブラウザにも最適な表示のために独自の仕様を持っているパターンもありますが、フレームワークやCMS,プラグインがその辺りをうまく吸収してくれてるもんですね。もちろん全て網羅されているかどうかは分かりませんが。 プラグインって結構色々自動で入れ込んだり変換が入ったりしますからね。複数入れている場合は特に相互干渉が起きてもおかしくありません。そこで問題が起きた場合は1つずつ停止なり除外するなりでどこまで上手くいっているのかどうか、差分はどこかなど地道な問題の切り分けしかありません。 ここで乗り越えるとまたひとつ出来ることが増えることになります。がんばってください。 なお、やはり「全体の枠をはみ出るような幅を持った要素が中にありそう」というところが気になります。縦向き(横幅狭)にしたときになっているので、プラグイン側で本来は「狭い幅になった」と判断されるべきところが「まだ広いままだ」と判定されているのではと思います。
Spin

2017/06/09 03:11

>>プラグイン側で本来は「狭い幅になった」と判断されるべきところが「まだ広いままだ」と判定されているのではと思います。 ありがとうございます。この話はfootableのプラグインでしょうか?tablepressのプラグインでしょうか? また、phpファイルを書き直すとどういった記述にしたら改善の見込みがありますか? 質問ばかりでももうしわけありませんがよろしくお願いします。 また、上記URLに検証サンプルのテーブルを作成しました。ヘルメット・ガントレットの項目に作成 、検証用に同じテーブルをタブ外に設置しました。 時間がなかったので雑な作りですがご助言いただけますと幸いです。
m.ts10806

2017/06/09 04:27

tablepressはテーブルを作るためのプラグイン、footableはtablepressで作ったテーブルをレスポンシブ対応にするためのプラグインですよね。つまりfootableです。 PHPの話が急に出てきて若干困惑しているのですが、footableのレスポンシブはあくまでCSSとJavascriptのみで対応しています(というかほとんどのレスポンシブは同様です)PHPは全く関係ないと思います。 メディアクエリというやつですね。footableがやってくれているため現段階で使いこなす必要はありませんが、概念は知っておいて損はないです。 https://developers.google.com/web/fundamentals/design-and-ui/responsive/?hl=ja#css-media-queries 一言で言うと「画面幅が指定になったときにはこのCSSスタイルを適用というのをCSSだけで実現している」という意味です。 > 、検証用に同じテーブルをタブ外に設置しました。 検証用のものもやはりthに固定でwidthが指定されていますね。更に、幅を狭めたり広げたりすると固定幅が弊害となっているのか色々と不可解な動作をしています。
Spin

2017/06/16 01:54 編集

m.ts10806

2017/06/09 06:21

んー。ちょっとこれだけではなさそうですね。 ブラウザのデベロッパーツールなどを介してHTMLソースを見てもらえれば分かりますが、style="width:XXXpx;"のようにCSSで直に指定されているようなので、見る箇所がCSSファイルではなさそうです。 プラグイン側が何かしら判断するとか、またはjavascriptとかで指定してあるかもしれません。 今すぐ詳しくは見れませんので、まずはブラウザのデベロッパーツールなどで状況確認してみてください。
m.ts10806

2017/06/09 06:43

もしかしたらtablepressとfootableの設定(Wordpress上?)を見せてもらった方がいいかもしれませんね。そしたら同サイトとはいかないまでも同設定にて検証も可能ですし。
Spin

2017/06/09 08:05

大変お世話になっております。 tablepressとfootableのWordpress上の設定画面を質問欄に追記しました。 言葉で説明するよりも明瞭なのでスクリーンショットを掲載しました。 何卒よろしくお願いいたします。
m.ts10806

2017/06/10 00:00

widthの固定についてはtablepressのjavascriptの中で動的に書かれている感じがしますね。 ちょっと強引かもしれませんが、tablepressの機能でレスポンシブ設定してみてはどうでしょうか。 http://afireach.com/word-press/tablepress-responsive-support.html#a02 ※もうされてたらごめんなさい 私自身のローカル環境で超簡易的に作ってみた感じでは効いてるように見えますが、ご提示の環境でうまくいくかまではわかりませんので、まずはやってみましょう。
Spin

2017/06/10 05:10

お返事ありがとうございます。 過去に導入したのですがもう一度チャレンジしてみました。 [table id=11 responsive="all" /]   という風に記述したところ画像が入ってる部分からずれこんでしまいPC表示もきれいなテーブルにしあがりませんでした。footableのプラグインを停止してみても同じようなずれが出てしまいました。 念のため画像追記しておきます。
m.ts10806

2017/06/10 21:13

あれ?エクステンションというより横にスクロールバーが出る想定だったのですが・・・。footableは関係なさそうですね。(むしろレスポンシブで縦になったテーブルとは相性悪そう)
Spin

2017/06/11 17:28

長々とお付き合いいただき誠にありがとうございました。 週末全力を尽くしたのですが解決につながることができませんでしたので、プロの方(業者)に依頼することも検討いたします。 重ね重ねお礼申し上げます。
m.ts10806

2017/06/11 20:53

私の方も解決の糸口となるような回答を提示できず申し訳ないです。 この手の問題は悩んだり調べた手間に比べてちょっとしたことで解決したりして厄介なんですよね・・。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問