スマホ表示だとテーブルが画面からはみ出てしまう…

どうも、穹音です。

 

早速ですが酷いミスをしていたので、

この場で告白したいと思います。

 

それがこれ…

 

 

テーブル

 

テーブルの画面でスマホ表示にしてみた所、

何とテーブルが大きすぎて、スマホ画面では切れてしまっています。

 

私はパソコンしか持っていないので

スマホについての認識を反省中ですが、

これは酷いですね…(汗)

 

「ライティングさえ磨けばデザインなんて些細な問題だ。」

 

なんて思ってましたが、肝心な文章が読めなければ話になりませんね。(苦笑)

 

 

 

 

☑原因はテーブルのサイズ指定…

 

縦横それぞれ400×700pxだとしたらその大きさがスマホにも反映された結果、

テーブルがみきれてしまうのが原因だと考えられますが、

これのせいでテーブルが使えなくなりました。

 

せっかくレスポンシブwebデザインなのに、

これでは本末転倒ですね。

 

 

☑解決法はテーブルプレスのプラグインだった。

 

基本的には「TablePress」 と言うプラグインと

TablePress Extension: Responsive Tables」

と言うテーブルプレスの拡張プラグインを導入する事で対処できますが、

テーブルプレスもカスタマイズしなければ枠すら無かったりして、

割と骨が折れます。(汗)

 

 

対処法はグーグルで検索をかけていただければたくさん出てきますよ。

 

 

 

既に優れたサイトがあるのでここでは説明しませんが

この検索ワードで調べておけば分かりやすいサイトが見つかります。

 

→グーグル検索 「テーブルプレス レスポンシブ」 

 

 

☑プラグイン導入後はこうなります。

 

このプラグインで改良するとこうなります。

 

テーブルプレス 導入後のテーブル

(画像はスマホ表示にしてあります。)

 

前回は画像からはみ出ていて、いかにも「ダサい」感じでしたが、

プラグインを導入すると上のようにスマホでも画像がはみ出なくなります。

 

ちなみにPC版はこうなります。

 

テーブル PC表示

 

画像が全く同じなので分かりにくい方もいるかもしれませんが、

こちらではサイドバーを見てもらえばPC表示だと言う事は分かっていただけると思います。

 

スマホデザインの情報商材やテキストは買ってないので初心者同然ですが、

こんな感じで苦労しながらどんどん見やすいサイトにしていきたいと思います。

 

それでは。

 

 

 

 

 

 

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

筆者紹介

穹音春海
    【穹音春海】

1995年に生まれた凡人です。

貧乏な家庭に生まれ、子供の頃からお金に困った生活をしていました。

高校の時に初めて人生を逆転するために有名国立大学を目指して勉強する事に決めましたが、理想はなかなか上手く行かないもので、勉強しても偏差値が伸び悩み、程遠い学力で第一志望に挑むも、結局ボーダーすら突破できず人生終了しました。

自宅浪人中は実質ニートな上、お金に困ってるわけですから、勉強しながらも稼げる方法を探しました。

そしてたどり着いたのが、

・学歴なし
・資格なし

の自由な世界でした。

覚える事もセンター試験より少ないうえ、パソコン1台で稼げるので、今では自由気ままな生活を送っています。

その方法を教える事で生計を立てていますから、
聞きたい事があればなんなりと質問してくださいね。

名刺

名刺

穹音の企画

チーム穹音



穹音の企画



穹音の企画02


推奨商材

『情報商材の白チャート的存在』


>>詳細はこちら


物販アフィリで稼ぐための初めの一歩

風花初芽


『書いた文章が伝わっていない方へ』


ミリオンライティングのイメージ

>>詳細はこちらをクリック


『メール1通で100万円稼ぐ現実的な方法とは』


>>詳細はこちらをクリック


『ツールに言われた事だけやってれば稼げる再現性の高いノウハウ』

ass[answer sheet system]

詳細はこちらをクリック

推奨無料商材

ダウンロード数100を突破してます。

宇崎恵吾のコピーライティングレポート

宇崎恵吾のコピーライティングレポートの詳細はこちらをクリック。


期間限定で
1000円⇒0円
まだ手に入れてない方は
早めに手に入れてください。

自由な人生を手に入れる教科書の詳細はこちらをクリック

特典を受け取れなかった方へ

特典が送付されてない、特典を受け取る事が出来なかったという方は、

「注文日」
「注文ID」

をご記入の上、コメント、またはメールを送ってください。
確認が取れ次第特典をメールに送付させていただきます。

推奨テンプレート

穹音春海愛用のテンプレート


FMテンプレート

>>詳細はこちらをクリック


「最高のSEOを誇る本格派テンプレート」


>>詳細はこちらをクリック

穹音春海のメール相談

ブログランキング(日本ブログ村)

日本ブログ村 ランキング


オススメポイントサイト

モッピー!お金がたまるポイントサイト

友達紹介のシステムと
2ティアシステムで
不労所得も可能に!?

詳しく知りたい方はこちらをクリック

アーカイブ

カテゴリー

▲トップへ戻る