山と映画を愛する男の『趣味』と『実益』を兼ねたブログです。

そこに山と金があるから

WordPressでスマホ表示で途切れてしまうテーブル(表)を簡単に横スクロール表示にする方法!

更新日:


PC基準で作成したテーブル(表)は、スマホに収まる幅なら問題はないのですが、スマホ画面より大きなテーブル(表)の場合、スマホで表示するとスマホ画面からはみ出す部分は表示されず、切れてしまいます。

イライラ!

現在一般的なブログの訪問者比率は、PC60%、スマホ40%のようです。ブログを運営するうえで、スマホから来ていただける40%の訪問者の為にも、絶対に改善しなければいけない問題です。

 

ブログ運営は大変です。時間をかけて一生懸命に記事を書いても、その記事に問題が発生して、解決策を探すのにも時間を費やされる。せめてその問題をすぐに解決することが出来たら、どれだけ楽になるのだろう…

 

ということで、自分が直面し、解決した問題しか説明することは出来ませんが、少しでも同じ悩みを持つ皆さんの役に立てればと思い、簡単に横にスクロールするテーブル(表)にする方法をお教えします!

PCならこのように普通に表示されるテーブル(表)ですが、

 

これをスマホで表示すると画面に入りきらなかった右側のテーブル(表)が途中で切れてしまい、見ることが出来なくなってしまっています。これでは大事な部分を見ることのできない意味のない表になってしまいます。これを改善する方法は、

今回は私の愛用する『AFFINGER4』を使います。
AFFINGER4を使用していない方も、その便利さを知る為に見ていただければ嬉しいです。

 

投稿画面の『フォーマット』⇨『スタイル』⇨『table横スクロールボックス』をクリックします。すると、

 

テキストに下のようなコードが表示されます。このコードの>ココ<に表を作ります。

既に表を作ってしまっている方は、表の始まりに最初の長い方のカッコを、表の終わり短い方のカッコを移動するだけでOKです。

これで終了です。簡単でしょ!

 

スマホで確認してみましょう!

左側しか表示されなかった表が、

 

右側にもスクロールできるようになりました!

ふうっ、一件落着♪

お役に立てましたでしょうか?
私が愛用しているAFFINGER4は面倒でややこしいhtmlなどを入力する必要がなく、クリック1つで簡単に横スクロールにしてくれる優れたテーマです。

 

AFFINGER4は現在8,500円かかりますが、皆さんの面倒だと思うことを、クリック1つで可能にする素晴らしいテーマです。

無料テーマに比べれば、有料でしかも結構高価です。

しかし、最大のメリットは『悩む時間が殆ど無くなった』というところです。

ややこしく面倒なhtmlを調べるのに、1時間2時間無駄にしたことは皆さん必ずあると思います。で結局反映されなくて諦めた経験もあると思います。

私はお金を払ってAFFINGER4というテーマを購入したのではなく、『時間』を購入したと思っています。
皆さんも無駄な時間を費やす前に、初期投資と思ってAFFINGER4を使用してみてはいかがでしょうか!
SEO対策も勿論無料テーマの比ではありません。
使えば分かる『アフィンガー4』お勧めします!



-WordPress
-,

Copyright© そこに山と金があるから , 2017 All Rights Reserved Powered by AFFINGER4.