Web関連 WordPress

表(テーブル)が枠内から飛び出してしまう

投稿日:2017年2月20日 更新日:

どうも、ヨシです。

2017年2月15日に「wordpressでブログを始めよう」という記念すべき1つ目の記事を公開しました。初めてのブログ画像

普段はPCで記事を確認してるんですが、昨日はスマホで自分の記事を確認したんです。

おぉ、フォントが違う!いつかPCも自分の好きなフォントに変えれるようにしたいなー。
なんて思いながら下にスライド。

あ、あれ?なにこの余白??
おそるおそる下にスライドしていくと。

原因はこの表(テーブル)でした。

PCでは画面のサイズが違うので分かりませんでしたが、どうやら記事をビジュアル編集のテーブル(表)を使って作成し、その表のサイズをマウスで伸ばしたり縮めたりしてしまうと表のサイズが決まってしまうみたいです。

ちなみにこのテーブルというタグはデフォルトのビジュアルモードには無くて、TinyMCE Advancedというめちゃ便利なプラグインにあります。
またオススメプラグインは今度紹介するとして。

この表も自動で調整(レスポンシブデザイン)して、画面内に収まって欲しいですよね?
じゃあやっていきましょう。

CSSを調べる

とりあえずCSSに必要なタグがあるか確認しましょう。

ワードプレスの設定画面

「外観」から「テーマの編集」をクリック。

ワードプレスでCSS編集

表示されている画面がスタイルシートなのを必ず確認して
「Shift+F」で検索キーワードに「table」と記入して決定キー(Enter)を押す。

CSSの中の「table」を見つけたら「table-layout:fixed;」と「width:100%;」があるか確認する。
なければ、table{}の中に記入する。

左下の「ファイルを更新」をクリックしてCSSを保存する。

いらないstyleを消す

次は自動で作られたHTMLを確認します。
記事の編集画面の右上「ビジュアル」と「テキスト」があるので「テキスト」をクリック。
すると、表記が変わるのでそのまま表「テーブル」のあるページまでスクロールする。

ワードプレスの表を編集

<tr style=”○○”>と<td style=”○○”>のstyle=”○○”を消していく。

テーブルの余計な文字を削除

間違いがないか確認して、問題なければプレビューで確認する。

自分のサイト確認

あれ?変わってない??

履歴を削除する

そうなんです、CSSを変えたりしたら「キャッシュ」を削除しないと画面に反映しない事があるんですね。これはかなり重要で「CSS変えたけど間違ってるのかな」と悪戦苦闘した結果、キャッシュ消したら見事に反映されていたってのはあるあるだと思います。(僕だけかな)

とりあえず、ブラウザーの履歴から「キャッシュを削除」

キャッシュを消したら直った

おぉ!画面を縮めたり、伸ばしたりしたら勝手に動くぞ!

まとめ

ちなみに僕のワードプレスのテーマは「Twenty Sixteen」ですが、ワードプレスのテーマによっては、バージョンが違ったりして上手くいかないなんて事もあるかもしれません。

その時は連絡下さい。
下手ながらも頑張って答えを出せるようにしときます。
こうやって自分のサイトの改良を記事にしていきますので、これからもよろしくお願い致します。

読んで頂きありがとうございました。

-Web関連, WordPress
-, ,


comment

メールアドレスが公開されることはありません。

jpeg/png/gifのみ

関連記事

wordpressのプラグイン

ワードプレス初心者なら必須のプラグイン

どうも、ヨシです。 ワードプレス関連で調べたらいろんな記事があり、いろんなプラグインがあって迷いますよね。 しかも書かれてるのは全部オススメって書いてるから全部入れたらありえない量になるという…。 と …

記事を読む

【WordPress】検索結果で画像だけのページが表示される原因と対策

どうも、ヨシです。 今までこの現象は分かっていても原因が分からず放置していたんですが、やっぱり気になり過ぎたので調べまくってみました。 もしこの悩みを抱えている方がいらっしゃったら参考にして下さい。 …

記事を読む

ワードプレスのテーマを「Tortuga」に変えてみた

どうも、ヨシです。 今回すでにテーマを決めて稼動をしている状態から、新たなテーマに変えたいと思います。 今までワードプレスのテーマ「Twenty Sixteen」を使って色々カスタマイズしてたんですが …

記事を読む
no image

このブログについて

はじめまして、ヨシといいます。 まだ私もこのサイトも未熟な状態ですが、少しずつ更新して良くしていければと思ってます。 レイアウトの変え方も、フォントの変え方も分からないこの状態からどれだけ成長出来るか …

記事を読む

スマホにはサイドバーを表示させない

どうも、ヨシです。 以前STINGER8のカスタマイズ集で説明した「スマホ」と「PC」で違うものを表記する方法でスマホにサイドバーを表示させないようにしたので詳しくご説明します。 なぜサイドバーを非表 …

記事を読む

プロフィール

初めまして、ヨシだよ!
このブログはだいたい音楽やゲーム、アニメ、面白い動画なんかをメインに紹介してたまに自分のアピールをするよ。
それからサイトをちょくちょくいじるので、基本エラー画面が僕のトップページだと思って欲しい。
今WordPressを勉強中なので、便利なコードやプラグインなんかを自分で使ってみて良かったら紹介するよ!

pagetop