- このトピックには4件の返信、2人の参加者があり、最後に
により10年、 1ヶ月前に更新されました。
-
投稿
-
-
わいひらさま
いつもありがとうございます。上記に関して質問です。
小テーマのstyle.cssに以下のコードを追加しました！pcでは問題無く良いバランスなんですが……携帯では、はみ出してしまいます。同じようなバランスで、はみ出さない良い方法はありますか？
良い方法はありますか？ちなみにテストでこのアドレスの下の方にtableをはってみました！
初歩的質問ですが、大変申し分けありませんがよろしくお願いします。.article table{ border-collapse: collapse; margin: 14px 0; line-height: 130%; } .article table td, .article table th { padding:10px 10px; } -
「同じようなバランスで」というのが、どういった状態を指すのかがちょっとわからないのですが、モバイルでスタイルを調節するならmobile.cssでスタイルの調節を行うと良いかもしれません。
「完全レスポンシブ」機能が有効な時は、responsive.cssに書きます。ただ、横幅が広いテーブルを挿入した時、現状では完全に対応する方法はありません。例えば、極論で言うと、列が100列とかあるテーブルを挿入するとスタイルを調整しようがもうどうしようもありません。
どうしても、完全対応させるには、以下のようなテーブルのレスポンシブ化をするしかないかもしれません。
WordPressでテーブルのレスポンシブ化を「Basic Table」jQueryプラグインを用いて実装する方法
レスポンシブWebデザインでテーブルを使う時の小技 │ Design Spice
テーブル（table）のレスポンシブWebデザイン スマートフォンで表示を変更するには | モバイル・スマホ対策のSEO塾.com -
わいひらさま
早速、返事ありがとうございます。
＞「同じようなバランスで」というのが、どういった状態を指すのかがちょっとわからないのですが……
わかりづらくてすみません。モバイルの時は、縦の幅はそのままで、横幅のみギリギリでも入るように調整したいのですが……
mobile.cssになにを書けば良いのかがわからないんです……ごめんなさい
とりあえず、テストサンプルでモバイルの時にギリギリで入るようにするにはどうすれば良いですかね？完全対応に関しては、実力不足のため考えてません！笑 すみません！
-
わかりづらくてすみません。モバイルの時は、縦の幅はそのままで、横幅のみギリギリでも入るように調整したいのですが……
テーブルの列の幅は、定まった数ではないので、完全に対応させるには、前回のレスリンクに書かれた方法などを行うしかないかもしれません。
毎回列の数が以下のテーブルと同じというのであれば、
taiwan55.com/new-info/
mobile.cssなどに以下のよう調節するように書くと少しは見やすくなるかもしれません。.article table td, .article table th { font-size: 13px; padding: 2px; }ただ、単純なCSSのみで書く方法だと、いずれにせよ完全には対応できないかもしれません。
-
わいひら様
見やすくなりました！そして、理解も出来ました。
ありがとうございます。これからもよろしくおねがいします！
-
- フォーラム「テーマファイルのカスタマイズに関する質問など」には新規投稿および返信を追加できません。