真面目に効率的に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

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

関連記事

ノートパソコンと手

パンくずリストを作成するには?そのSEO効果と共に解説

「パンくずリスト」という言葉を聞いたことがあるでしょうか?無いかたも多いのでは?この「パンくずリスト」アフィリエイトブログを行うにあたり、割と重要な機能なのです。 「パンくずリスト」が何なのか、またど …

プロフィールを作成

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

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

電球

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

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

楽天のモーションウィジェット

楽天のモーションウィジェットをスマホとパソコンで上手く表示する方法

楽天のモーションウィジェットを、パソコンとスマホで上手く表示できる方法記事にしました。 アフィリエイトをしていると、パソコンとスマホでそれぞれアフィリエイト画像の大きさを使い分けないといけないので面倒 …

WordPressでアフィリエイト

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

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