< WordPressで表が画面からはみ出た時の対処法

窓際マルチインカマーが真面目に効率的に0から資産を増やす

仕事できない窓際人間が、家電・完全食で時短を図り、マルチインカムで経済的時間的自由を達成していきます

アフィリエイト

WordPressで表が画面からはみ出た時の対処法

投稿日:2018年10月8日 更新日:

表

ワードプレスの表は、列が増えると(横にのびると)画面に表示されず途中で切れてしまいます。

その改善方法を記事にしました。

WordPressで表を作成すると、機種によっては画面からはみ出ることがある

記事を作成した後、私はパソコンとスマホ両方できちんと作成した記事が表示されているかチェックしています。特に表を作成した場合は入念に確認作業を行います。

パソコンでは表が画面に収まっていても、スマホで見るとはみ出ていることが多々あるからですね。

結論として、「表の列を5列までにすればスマホでもはみ出さずに見れる」ということに気づき、表を作成するときは5列までに収まるようにデータを編集していました。

しかしながら、他人のスマホで同じ画面を見ると、なんと表が画面からはみ出ているじゃないですか!

つまりおなじスマホでも機種によって表が画面からハミ出たり収まっていたりしているわけです。

これは何とかしないといけません。

WordPressで表を作成して、画面からはみ出てしまった時の対処方法

この表が画面からハミ出るという事態に対応する方法は2つあります。

  • 表を画像として保存し、メディアの追加をする
  • HTMLとCSSをいじる

それぞれ見て行きましょう

画面からはみ出る場合は表を画像化させて、画像として貼りつける

エクセルで表を作成し、その表を画像として保存し、WordPressのメディアとして追加する方法です。

エクセルで表を作成する⇒その表を選択して、コピー⇒図として貼りつける⇒その図を再度コピー⇒形式を選択して貼りつけ⇒図(JPEG)

ここまでは全てエクセルのシート内での作業になります。

図として貼りつける時は、ホームタブの貼りつけの下矢印を押すと、図として貼りつけることができます。

図として貼りつけることにより、その図をJPEGやPNGなど画像形式で再度貼りつけることができるようになります。

画像形式で貼りつけが終わったら、一旦そのエクセルファイルを保存します。

保存したファイルの形式をzip形式に変更します。失敗したときのことを考え、ファイルを一旦コピーしてからzip形式にすると良いでしょう。

zip形式のファイルを右クリックで開く⇒開いた中に「XL」というフォルダがあるので開く⇒mediaフォルダを開く⇒その中に先ほど保存した画像ファイルがある。

その画像ファイルをWordPressのメディアとして追加する。

以上で終わりです。

画面からはみ出る場合、HTMLとCSSをいじる

WordPressの管理画面より、外観⇒テーマの編集⇒style.cssに以下のコードを追加します。

これで.scroll-boxクラスの表は全て、スクロール(スクロールバーがついて、見えない部分はスクロールすること)が可能になります。

.scroll-box {
overflow: auto;
margin-bottom:10px;
white-space: nowrap;
}
.scroll-box::-webkit-scrollbar {
height: 5px;
}
.scroll-box::-webkit-scrollbar-track {
border-radius: 5px;
background: #F3F3F3;
}
.scroll-box::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #CCCCCC;
}
@media only screen and (min-width: 414px) {
.scroll-box {
white-space: normal;
}
}

次に、WordPressの管理画面より外観⇒テーマの編集⇒functions.phpに以下のコードを追加します。

これは、全ての表を.scroll-boxクラスにしてしまうコードです。

function table_scroll_func($content)
{
$search = array(‘<table’, ‘</table>’);
$replace = array(‘<div class=”scroll-box”><table’, ‘</table></div>’);
return str_replace($search, $replace, $content);
}
add_filter(‘the_content’, ‘table_scroll_func’);

この2点を行うことにより、作った表すべてがスクロール可能な状態になります。

WordPressで表が画面からはみ出た時の対処法まとめ

方法論としては2点あります

  • 表を作成して、画像化することで対応する
  • HTMLとCSSをいじる

画像で貼りつける場合は正確には「表を作る」とは言い難いかもしれません。

また手順も多いですので、できればHTMLとCSSで対応したいところです。

-アフィリエイト
-,

執筆者:


comment

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

関連記事

悩む女性

STINGER8でauthorがありませんが頻発した時の対応

この記事はいたってシンプルです。Google Search Consoleの「検索の見え方」⇒構造化データで「authorがありません」というエラーが出た場合の対応方法を記事にしています。 細かい理論 …

googleadsenseの審査に受かった

Google Ad sense の審査を通過した時の記事数

今回は、WordPressでアフィリエイトを開始して、2.5カ月後の状況を報告していきたいと思います。訪問者数はほぼゼロのままですねw Google Ad senseの審査に合格しましたので、主にその …

電球

アフィリエイトブログを始めると決めたらするべき事、始め方

今回は副業として、アフィリエイトブログの話をさせていただきます。今、ご覧になっているこのサイトもアフィリエイトを目的の1つとして作成しています。 「WordPressで新しくアフィリエイトブログを始め …

WordPressでアフィリエイト

WordPress開始直後にやること3点

今回は、WordPressでアフィリエイトブログを開始してすぐにやるべき事を3つ書きたいと思います。 現在のことろ、絶賛訪問者数が0継続中ですが、果たして訪問者が増える日はやってくるのでしょうか・・? …

プロフィールを作成

STINGER8のサイドバーをカスタマイズ、プロフィールを追加

今回はSTINGER8のサイドバーをカスタマイズして、プロフィール画像と紹介文を追加する方法を書いていきます。 今やテンプレ化しつつあるブログのトップページですが、多くの方はプロフィール写真と簡単な紹 …


管理人の「たぬ」です。
株式投資・不動産投資・オプション取引をメインに日々最も安全かつ効率的な投資方法を模索しています。

どのように資産を増やしていくのか、具体的手法をお話していきたいと思います。