ども、wordpress初心者で悪戦苦闘を毎日繰り広げてる
(システム言語とかコードの知識が皆無です。)
エラワロット(https://twitter.com/erawarot＿labo)です
結論からいうと、ウェブ上にChrome以外で自分のサイトページを表示させてそれを
コピーして貼り付けたらレスポンシブ化出来ました。(何故かはわからない…)
そして、Twitter上で質問したところお優しい出張ホスト【エテルナ】さんが丁寧に画像付きで教えてくれました！！
コードがまだまだ理解出来ない私にも丁寧にTwitter上で教えてくれました(T^T)
今回は、wordpressでの表がレスポンシブ化出来ずスマホで表示した時に見切れてて二日ほど
表のために時間を費やした話をしたいと思います。
目次
スマホでサイトを見ると表が見切れる！
私は、レスポンシブ化という言葉も知らず、たまたま表を使った自分の記事
をスマホで見てたのですが表が見切れててものすごい見にくかったんです。
いろいろ調べたところレスポンシブ化という作業が必要との事。
(レスポンシブ化とは、異なるデバイス、スマホ、タブレット、PCでも見やすいよう最適化すること。)
『wordpress 表 レスポンシブ化』とか『wordpress 表 スマホ』
などで調べるとたくさん方法があるので簡単そうなのから試して
行きましたが全部だめでした...
方法.1 ビジュアルエディタからレスポンシブ化
wordpressでの、ビジュアルエディタでテーブル→表のプロパティを開いて
幅を100％にする、もしくは空白にすることによってレスポンシブ化
(サイズを指定しない事で)出来るとの情報がたくさんあったのですが何回試しても
レスポンシブ化が出来ておらずスマホで対応してなくて見にくかったです...
ただ、この方法が恐らく一番ベタで解決する方法だと思うので試してみてください！
ポイント
・テーブルから表のプロパティを開く
・幅の設定を100％もしくは空白に設定する。
方法.2 コードエディタからレスポンシブ化
先ほど、紹介した出張ホスト【エテルナ】さんがわざわざ書いてくれた
記事です。詳しく、画像付きで開設されているのでわかりやすいです！
ただ、わたしには実力不足で宝の持ち腐れにしてしまいました...
こんな感じのコードになってそれが、まずかったみたいです。
コードなど詳しい人はぜひ、出張ホスト【エテルナ】さんの記事を読んでみてください！
方法.3 【私の解決方法】ページをコピーしてレスポンシブ化
この方法は、たまたま試行錯誤していて解決できた方法です！
(なぜこの方法で治ったのかはわからないです(-_-;)詳しい人教えて...)
該当するページをChrome以外のウェブサイトで表示させてコピーするという方法です。
このように、コピーしてwordpressに張り付けるだけです！すると
このコードが、、
このようなコードに代わっていてレスポンシブ化がされました！
ポイント
・該当するページをChrome以外のウェブサイトで表示する
・レスポンシブ化したい表をコピーしてwordpressにて張り付ける
上記の方法でレスポンシブ化が出来ました！
まとめ
表をレスポンシブ化するために二日ほど費やしてしまいました...
もっと、コードや、ウェブデザインを勉強せねばと反省です。
今回みたいに、こうしたいと思ったことを実現するのがすごい億劫だったりするので、
ひとつづつ進めていきたいなと思いました。
最後に詳しく説明してくれた出張ホスト【エテルナ】さんありがとうございました！！
ではではエラワロットでした～
