オススメ記事
Diverで表の横スクロールを簡単に作れる裏技
Diverの囲い枠の中に表を作ると横スクロールになります

この記事で分かること

  • 簡単に表の横スクロールを作る方法

簡単に表の横スクロールを作る方法

Diverユーザーであれば、横スクロールの表を簡単に作れます。通常は横スクロールにする際はCSSをいじって、表の前後にHTMLコードを入れるやり方が一般的です。

例えばこのような表だと、画面からはみ出てしまいます。

1月 2月 3月 4月 5月 6月 7月 8月 9月 10月 11月 12月
5,000円 14,500円 13,800円 8,000円 12,000円 16,500円 29,000円 28,000円 9,500円 17,700円 10,500円 20,000円

この表を囲い枠の中に作成してみましょう。

分かりやすいように枠線を表示しています
1月 2月 3月 4月 5月 6月 7月 8月 9月 10月 11月 12月
5,000円 4,500円 3,800円 8,000円 12,000円 6,500円 9,000円 28,000円 9,500円 7,700円 10,500円 20,000円

簡単に横スクロールで作成が出来ます!

囲い枠の中に表を作る方法

手順はたったの3ステップです!

  1. 表をExcelなどで作成
  2. 入力補助機能から囲い枠を入れる
  3. 表をコピペする

表をExcelなどで作成

元の表を作成する方法はExcelをオススメします!Excelが無くても似たような表作成ソフトがあれば、それで問題ないことも多いです。

表の横スクロール作成手順1

WordPressエディタにあるテーブル機能は使わない方が良いです。Excelで作ってコピペしたほうが時短になります!

Wordpress編集画面 テーブル

入力補助機能から囲い枠を入れる

入力補助機能から囲い枠を入れます。枠を表示したい場合はお好みの色に、表示したくない場合は枠色を背景と同じ色にしましょう。

入力補助機能 囲い枠

枠のデザインはお好みですが、単に表を横スクロールにしたいだけであれば、タイトルの無いタイプを選びます。

ここに表を入れます

表をコピペする

囲い枠の中に表をコピペします。「Ctrl」+「C」でコピー、「Ctrl」+「V」でペースト(貼付)です。するとこのようになります。

1月 2月 3月 4月 5月 6月 7月 8月 9月 10月 11月 12月
5,000円 4,500円 3,800円 8,000円 12,000円 6,500円 9,000円 28,000円 9,500円 7,700円 10,500円 20,000円

金額が2段になっていて気になる!という人は細かい設定をしていきましょう。設定したい表の中でクリックし、テーブルの中にある表のプロパティをクリックします。

表の横スクロール作成手順2

幅を調節しましょう。「空欄」「pt」「px」「%」での指定が出来ます。最初は「空欄」にしてプレビューで見てみるのが良いと思います。

表の横スクロール作成手順3

「空欄」で上手く表示されない場合は「px」で数値を指定してみましょう。下記の表は1500pxに設定しました。

1月 2月 3月 4月 5月 6月 7月 8月 9月 10月 11月 12月
5,000円 4,500円 3,800円 8,000円 12,000円 6,500円 9,000円 28,000円 9,500円 7,700円 10,500円 20,000円

まとめ

この記事では表の横スクロールを簡単に作る方法について解説しました。Excelで元の表を作ってしまえば、後は囲い枠の中に表を入れるだけなので簡単です!

もし分からないことがあればお気軽にコメントを頂けると幸いです。

当サイトはDiverを使用しています
ワードプレステーマ【Diver】
使いやすさとデザインの豊富さが魅力
入力補助機能による圧倒的な使いやすさは初めてテーマを購入する人はもちろん、今までに他のテーマを購入した人でも必ず満足できます!
デザインの豊富さも魅力です。見出し・ボタン・アイコン・リストなど多くのデザインとカスタマイズ可能な配色設定でサイトの統一感を一層際立たせることが出来ます!
  • 17,980円(税込)
  • 複数サイトに使用可能
  • サポートが無期限・無制限
  • 今でも未完成、常に進化を続けている

Twitterでフォローしよう

おすすめの記事