サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2019年11月9日 23:01
いつもお世話になっております。
セル内の文字数が多くて幅が狭いと セルが縦に伸びすぎてしまうので、横幅を広げる方法を教えていただけないでしょうか。
添付画像の①は表のプロパティを
幅1600px
セル160px
②は
幅200％
セル20％
に設定したつもりです。
②の方は、セルが均一に広がらないのですが、指定の仕方が間違っているのでしょうか
また、いずれの場合も スマホでは表の幅が上手く広がりませんでした。
パソコン・スマホとも表の横幅（セルの幅）を広げて、横スクロールさせたい場合はどのようにしたらいいのでしょうか。
URLです
記事の最後にテーブルがあります
https://xn--w8jte276hx5vdnebu3f.com/dagashiya-shinjuku/
どうぞよろしくお願いします。
Topic starter
2019年11月9日 23:03
スマホですと、画像のようになってしまいます。
2019年11月10日 07:11
全部HTMLにwidthがはいってるようです。
- ①のほう
https://gyazo.com/e40e0be9cd4dc9120e8d2669995cc4fc
コチラはHTMLに指定があります。 width: 20%;
160pxになってません。
- ②のほう
https://gyazo.com/70be44df8a78cdfe101ad5397a4493ca
コチラはHTMLにwidth: 10%;がついてます。
<table style="height: 180px; width: 200%; border-collapse: collapse;" cellspacing="200%">
<tbody>
<tr style="height: 301px;">
<td style="width: 10%; height: 301px;">文が長いときは、セルの中で折り返しするようにしたい</td>
<td style="width: 10%; height: 301px;">文が長いときは、セルの中で折り返しするようにしたい</td>
<td style="width: 10%; height: 301px;">文が長いときは、セルの中で折り返しするようにしたい</td>
<td style="width: 10%; height: 301px;">文が長いときは、セルの中で折り返しするようにしたい</td>
<td style="width: 10%; height: 301px;">文が長いときは、セルの中で折り返しするようにしたい</td>
<td style="width: 10%; height: 301px;">文が長いときは、セルの中で折り返しするようにしたい</td>
<td style="width: 10%; height: 301px;">文が長いときは、セルの中で折り返しするようにしたい</td>
<td style="width: 10%; height: 301px;">文が長いときは、セルの中で折り返しするようにしたい</td>
<td style="width: 10%; height: 301px;">文が長いときは、セルの中で折り返しするようにしたい</td>
<td style="width: 10%; height: 301px;">文が長いときは、セルの中で折り返しするようにしたい</td>
<td style="width: 10%; height: 301px;">文が長いときは、セルの中で折り返しするようにしたい</td>
<td style="width: 18.8461%; height: 301px;">文が長いときは、セルの中で折り返しするようにしたい</td>
</tr>
<tr style="height: 45px;">
<td style="width: 10%; height: 45px;"> </td>
<td style="width: 10%; height: 45px;"> </td>
<td style="width: 10%; height: 45px;"> </td>
<td style="width: 10%; height: 45px;"> </td>
<td style="width: 10%; height: 45px;"> </td>
<td style="width: 10%; height: 45px;"> </td>
<td style="width: 10%; height: 45px;"> </td>
<td style="width: 10%; height: 45px;"> </td>
<td style="width: 10%; height: 45px;"> </td>
<td style="width: 10%; height: 45px;"> </td>
<td style="width: 10%; height: 45px;"> </td>
<td style="width: 18.8461%; height: 45px;"> </td>
</tr>
<tr style="height: 45px;">
<td style="width: 10%; height: 45px;"> </td>
<td style="width: 10%; height: 45px;"> </td>
<td style="width: 10%; height: 45px;"> </td>
<td style="width: 10%; height: 45px;"> </td>
<td style="width: 10%; height: 45px;"> </td>
<td style="width: 10%; height: 45px;"> </td>
<td style="width: 10%; height: 45px;"> </td>
<td style="width: 10%; height: 45px;"> </td>
<td style="width: 10%; height: 45px;"> </td>
<td style="width: 10%; height: 45px;"> </td>
<td style="width: 10%; height: 45px;"> </td>
<td style="width: 18.8461%; height: 45px;"> </td>
</tr>
<tr style="height: 45px;">
<td style="width: 10%; height: 45px;"> </td>
<td style="width: 10%; height: 45px;"> </td>
<td style="width: 10%; height: 45px;"> </td>
<td style="width: 10%; height: 45px;"> </td>
<td style="width: 10%; height: 45px;"> </td>
<td style="width: 10%; height: 45px;"> </td>
<td style="width: 10%; height: 45px;"> </td>
<td style="width: 10%; height: 45px;"> </td>
<td style="width: 10%; height: 45px;"> </td>
<td style="width: 10%; height: 45px;"> </td>
<td style="width: 10%; height: 45px;"> </td>
<td style="width: 18.8461%; height: 45px;"> </td>
</tr>
</tbody>
</table>
じぶんであれば、一括変更をするのが面倒なので、CSSで対応するかもしれません。
例えば
<table class="tw30">
イロイロなタグ略
</table>
tw30としてますが、別に他の文字列でも良いと思います。
tableのth：項目のタイトルの、ルの、td：その項目 の widthを30%にしたいと分かりやすいためです。あとclass属性はブロックディタを使ってる場合、高度な設定 追加 CSS クラス などで設定すればいいと思います。
https://gyazo.com/45528a35ffa403ae87a023b4994b0e4f
.tw30 th, .tw30 td { width: 30%;}
こんな感じでstyleを入れると適応されると思います。
Topic starter
2019年11月12日 03:27
かうたっくさん、すごく詳しく説明してくださりありがとうございます！
でも、どうしても上手くいきませんでした。何度も試してみたのですが…。
今は、以下のように かうたっくさんに教えていただいたセルの中で文字が折り返すcssを書いています
.scrollable-table td {
white-space: normal;
}
仕方がないので、こちらを消して、文字が多くなったときは自分で改行してセルの大きさを調整しようかと思っています。
お時間を割いて丁寧に教えてくださったのに、すみません＞＜
今後ともどうぞよろしくお願いします。
2019年11月12日 06:05
white-space: normal; のnormalに
pre-lineか、pre-wrapを指定してみてもダメですか？？
どのような状態で、どのように指定したいか。って事が、今明確に分からないので、以下リンク先の値を参考にして指定してみるとどうなるかなぁ？って思ったんです。
2019年11月12日 07:25
該当リンクを置き忘れ。
それとそのstyleですけど、キチンとした表：tableを作成したら結果が変わってくる可能性もある気がします！？
※テスト投稿だから、スペースだらけ。実際にはスペースだらけではないとおもわれますので。
って言うのは、HTMLに以下項目があったので、ぼーーーっと朝ご飯を食べながら思ったついでに書き込みました。※後だと書き忘れるので
Topic starter
2019年11月14日 15:52
かくたっくさん、ありがとうございます！
pre-line、pre-wrapを指定してみましたが（やり方が間違っていたのかもしれませんが…）状況は変わりませんでした。
最初に教えていただいた
.tw30 th, .tw30 td { width: 30%;}
は、ビジュアルエディターでは まだ文字を入れていないセルが小さくなり、小さくなったセルに文字を入れようとクリックしても、セルを指定できなくなってしまいます。
なので、テキストエディターにして文字を入れてみると、pcもスマホも表の幅が100％におさまった状態に作られてしまいます。
かうたっくさんに教えていただいたことを きちんと実践出来ていないのかも知れませんが… どうも上手くいきません。。
手動で改行させれば対応できるので、そうしていこうと思います。
いつも丁寧に教えてくださり感謝しています。
お時間をたくさん使っていただいたのに、上手く出来なくてすみませんでした＞＜
これからもどうぞよろしくお願いします。
This post was modified 5年前 2回 by kchan
2019年11月14日 17:22
https://xn--w8jte276hx5vdnebu3f.com/dagashiya-shinjuku/
とりあえず。ですが。
間違っている箇所があります。
クラスを追加する際の書き方がまちがってます。
tw50
のみ入れる感じです。
それからstyle.cssに追記してください。
.tw50 th, .td { width: 50%;}
赤字部分が間違ってる感じです。
<table class="wp-block-table .tw50 th, .td { width: 50%;}"><tbody><tr><td>親譲りの無鉄砲で子供のときから損ばかりしている</td><td>親譲りの無鉄砲で子供のときから損ばかりしている</td><td>親譲りの無鉄砲で子供のときから損ばかりしている</td><td>親譲りの無鉄砲で子供のときから損ばかりしている</td><td>親譲りの無鉄砲で子供のときから損ばかりしている</td><td>親譲りの無鉄砲で子供のときから損ばかりしている</td><td>親譲りの無鉄砲で子供のときから損ばかりしている</td><td>親譲りの無鉄砲で子供のときから損ばかりしている</td><td>親譲りの無鉄砲で子供のときから損ばかりしている</td><td>親譲りの無鉄砲で子供のときから損ばかりしている</td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></tbody></table>
わいひら reacted
Topic starter
2019年11月14日 21:15
かうたっくさん、ありがとうございます。
追加cssに以下のように書いても
.tw50 th, .tw50 td { width: 50%;}
更新（公開）時に↓このように書きかわってしまいます。
.tw50 th, .td { width: 50%;}
また、間違っていると教えていただいた赤文字の部分を
tw50
にしてみると、追加cssも連動してしまうのですが…
ブロックエディター、高度な設定の追加cssクラスに書いていたのですが、場所が間違っているのかも？と思い、ページのcss、カスタマイズのcssに
.tw50 th, .tw50 td { width: 50%;}
と、書いても出来ませんでした…
手動で幅を調整しながら一度 表を作ってみます。
何度も何度もすみませんでした＞＜
ありがとうございました。
This post was modified 5年前 4回 by kchan
2019年11月14日 21:29
.tw50 th, .td { width: 50%;}
また、間違っていると教えていただいた赤文字の部分を
tw50
にしてみると、追加cssも連動してしまうのですが…
ブロックエディター、高度な設定の追加cssクラスに書いていたのですが、
場所が間違っているのかも？と思いページのcss、カスタマイズのｃssに
.tw50 th, .tw50 td { width: 50%;}
と、書いても出来ませんでした…
この状況がよく分かりません。
さくらサーバーのキャッシュ・高速化や
プラグインのキャッシュ・高速化が影響しているなどないですか？？？
上記引用の以下部分
また、間違っていると教えていただいた赤文字の部分を
tw50
にしてみると、追加cssも連動してしまうのですが…
とりあえずHTMLにclass属性を追加するには
tw50
だけ追記してくださいね。
<table class="wp-block-table .tw50 th, .td { width: 50%;}">
このような追記をすれば、なんらかのエラーが別途出てくるかと思われますので。
順番にチェックしてくと解決すると思います。根気よくやれば。
もしそれがシンドイ。って感じるのであれば、プロの人にやってもらって、超絶やさしく・分かりやすく説明してもらえたら良いかもしれないです。
今後もtableタグはつかいますから。ねっ。
ちなみにstyle.cssを見ると10/29 5時14分からstyleの変更はされていないようです。
なので何らかの高速化が怪しい気もします？！
This post was modified 5年前 by かうたっく
Topic starter
2019年11月16日 18:59
かくたっくさん、ありがとうございます。
時間がある時にもう一度教えていただいたことを ひとつひとつ試してみます！
そのときに上手くいかなければ、プロに代わりにやってもらうことも考えてみます。
いつも丁寧に説明してくださり、本当にありがとうございます。
たくさんお時間を使わせてしまい、すみませんでした…
今後とも、どうぞよろしくお願いします。
わいひら reacted
2019年11月17日 00:23
気長にでも解決されて、サクサク表を作れるのがベストだなぁ。って思います。
tableってちょっと難しいのもあるかもですが、見やすいのもあるので。
陰ながら応援してますね ? ? ? ?
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。