人気の記事
【Diver図解マニュアル】表の横スクロール設定と表作成の時短テクニック

ひろにゃん
表を入れるとスマホで上手く表示されないんだけど・・

ともにゃん
Diverを使っていれば簡単に表示させることが出来るよ!

ワードプレスで表を入れるとスマホで表示したときに全て表示されない!!というケースが多くあります。
Googleで検索するとスタイルシートをいじったり、プラグインを入れる方法が紹介されています。

ひろにゃん
スタイルシートをいじるのはちょっと勇気がいるから他の方法は無いの?
 スタイルシートを安易にいじると意図しない変更がされることがあります

プラグインは入れすぎるとサイトが重くなります。
最低限だけ入れて10個、多くても15個に収めておきたいところです。

Diverは標準機能にあるので、スタイルシートをいじる必要も、プラグインのインストールも必要はありません。

この記事では横スクロールの表作成と表作成の時短テクニックを紹介します!

スマホで表が表示されない問題

PCでは表示されるけど、スマホでは表が見切れてしまうことがあります。

1月 2月 3月 4月 5月 6月 7月 8月 9月 10月
1,000円 2,000円 4,000円 8,000円 16,000円 32,000円 64,000円 128,000円 256,000円 512,000円

ワードプレスの表は通常だとレスポンシブ対応していない為、別途設定が必要となります。
スタイルシートをいじって表示がおかしくなるのも怖いし、バックアップを取って復元するのも大変です。
Diverであれば標準機能で対応可能なので手順を紹介します!

スポンサーリンク

Diverなら標準機能で横スクロールが可能

初心者にオススメしたい方法は入力補助の囲い枠を使う方法です!


枠は好きなものを選んで問題ありませんが、タイトルなどが不要であれば下記を選択すれば問題ないです。
テキストは仮のものを入れておきましょう。

入力したものをビジュアルで表示すると下記のようになります。

仮で入力したテキスト部分に表示させたい表をコピペします!
今度はテキストモードの表示に切り替えてコードを探します。表のコードは

<table></table>

で囲まれている部分になります。
テキストを置き換えると下記のように表示されます!

1月 2月 3月 4月 5月 6月 7月 8月 9月 10月
1,000円 2,000円 4,000円 8,000円 16,000円 32,000円 64,000円 128,000円 256,000円 512,000円

表作成の時短テクニック

最後に表作成の時短テクニックを紹介します!
表の作成で項目がたくさんあるものを作るのは大変ですよね。
特にワードプレスのビジュアル画面から作るのは時間がかかります!

表作成の時短テクニック
Excelなど表作成ソフトを開きます。
入力したい内容を作成しコピーします。

ビジュアルモードで貼り付けます。

売上 利益
1月 ¥1,000 ¥500
2月 ¥2,000 ¥1,000
3月 ¥4,000 ¥2,000
4月 ¥8,000 ¥4,000
5月 ¥16,000 ¥8,000
6月 ¥32,000 ¥16,000
7月 ¥64,000 ¥32,000
8月 ¥128,000 ¥64,000
9月 ¥256,000 ¥128,000
10月 ¥512,000 ¥256,000
11月 ¥1,024,000 ¥512,000
12月 ¥2,048,000 ¥1,024,000

表の文字数や行数によっては見にくいことがあります。
その場合は表のどこかをクリックし、表のプロパティから幅の数値を空白にしてOKをクリックします。

まとめ

表作成はブログのジャンルによってはよく使う機能です!
特に最近はスマホでの読者が多いので、しっかり表示されるかを確認を忘れないようにしましょう!

スポンサーリンク
初心者でも上級者でも満足できるWordpressテーマ「Diver」

このブログのテーマは「Diver」です。これからブログを始める人は間違いなく長く愛用できるテーマです!他のテーマから変更をしたい中級者の方にも満足頂けるでしょう。私も別のテーマから移行しました。実際に使ってみると実感できると思いますが、デザインやレイアウトに関する悩みはなくなりました。操作性も抜群でもう他のテーマに変更は出来ません!

おすすめの記事