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のみ

関連記事

no image

このブログについて

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

記事を読む

コピペで使える!STINGER8のお手軽カスタマイズ集

どうも、ヨシです。 STINGER8を使っていく上でこれは知っておいた方がいいと思うことを紹介していきます。 まだまだ新しいテーマなので解決策が載ってるページが少ないんですよね。 中には間違った情報も …

記事を読む

A8.netのバナー広告がなんかおかしい

どうも、ヨシです。 僕はたまに自分の過去記事を見てミスや変更がないか確認するんですが、バナーに変な点が付いてるのを見つけました。 なんやこれ? 前はこんなの無かったはず…。とりあえず開発者ツールで確認 …

記事を読む

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

どうも、ヨシです。 ついこないだワードプレスのテーマを「Twenty Sixteen」から「Tortuga」に変えたとこなんですけど。 いろんな記事を見てたら見つけちゃったんす… STINGER8をね …

記事を読む

【WordPress】いつの間にかアドセンスのプラグインがサービス終了してた…

どうも、ヨシです。 さっき何気にプラグインのGoogle AdSenseを開こうとしたらサービス終了してました。 なのでこれからの対応や、自分で広告を掲載する方法をご紹介します。 目次 Google …

記事を読む

プロフィール

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

pagetop