お問い合わせはこちら
WordPress

【WordPress】プラグインなし！横長の表をスクロールさせる方法

  /
ゆーきち
ゆーきち
こんにちは、ゆーきちです！

今回は、WordPressで表（テーブル）をつくるときのお話です。

Contents
  1. はじめに
  2. 完成イメージ
  3. 表を横スクロールさせる方法
  4. まとめ

はじめに

WordPressで表をつくろうとしたとき、こんなことを思ったことはありませんか？

  • 横長の表をつくりたいけど、画面からはみ出るのでスクロールさせたい
  • セル内の文字を1行で表示したい（意図しない折り返しを防ぎたい）
  • 文字数が多いところも少ないところも、セル幅を同じにしたい
  • プラグインは使いたくない

そんなあなたに向けてこの記事を書きました。
ぜひ参考にしてください！

本記事執筆時のWordPressバージョンは 5.9.3 です。
また、ブロックエディタ「Gutenberg」の使用を想定しています。

本記事の方法ではCSSにコードを書き込みます。
「バックアップを作成する」「子テーマを使用する」など、万一の場合に備えた対策をとっておくことを強くお勧めします。

完成イメージ

まずはこの記事で何をしようとしているのかを、図でお見せしますね。

B E F O R E
代初代2代3代4代5代6代7代8代9代10代11代12代13代14代15代
名前家康秀忠家光家綱綱吉家宣家継吉宗家重家治家斉家慶家定家茂慶喜
生誕1543年1579年1604年1641年1646年1662年1709年1684年1712年1737年1773年1793年1824年1846年1837年
星座みずがめ座おうし座しし座おとめ座うお座ふたご座しし座いて座みずがめ座ふたご座さそり座かに座おうし座かに座さそり座
享年73歳52歳46歳38歳62歳50歳8歳66歳49歳49歳67歳60歳34歳20歳76歳

（参考： 徳川将軍家 全15人の性格、特徴、趣味、嗜好などをまとめた雑学的プロフィール｜ダレトク雑学トリビア ）

「テーブル」ブロックから打ち込んだものです。

表の幅を画面いっぱいにしても入りきらないため、折り返される部分がたくさんあります。

代初代2代3代4代5代6代7代8代9代10代11代12代13代14代15代
名前家康秀忠家光家綱綱吉家宣家継吉宗家重家治家斉家慶家定家茂慶喜
生誕1543年1579年1604年1641年1646年1662年1709年1684年1712年1737年1773年1793年1824年1846年1837年
星座みずがめ座おうし座しし座おとめ座うお座ふたご座しし座いて座みずがめ座ふたご座さそり座かに座おうし座かに座さそり座
享年73歳52歳46歳38歳62歳50歳8歳66歳49歳49歳67歳60歳34歳20歳76歳

あるいはこのように、記事エリアからはみ出してしまうこともあるでしょう。

A F T E R
代初代2代3代4代5代6代7代8代9代10代11代12代13代14代15代
名前家康秀忠家光家綱綱吉家宣家継吉宗家重家治家斉家慶家定家茂慶喜
生誕1543年1579年1604年1641年1646年1662年1709年1684年1712年1737年1773年1793年1824年1846年1837年
星座みずがめ座おうし座しし座おとめ座うお座ふたご座しし座いて座みずがめ座ふたご座さそり座かに座おうし座かに座さそり座
享年73歳52歳46歳38歳62歳50歳8歳66歳49歳49歳67歳60歳34歳20歳76歳

どうでしょう？やりたいことができていませんか？

表がスクロールできる
折り返したくない文字列を1行で表示している
同じ列幅にしたい2列目以降を揃えている

では続いて、この「完成イメージ」をつくる方法について、解説していきます！

表を横スクロールさせる方法

「スクロールできる表」をつくる手順は、以下のとおりです。

手順
  1. CSSをコピー
  2. 表を作成
  3. 表のHTMLをちょっといじる

順番に分かりやすく解説していきますね！

CSSをコピー

まずは、次のCSSをコピーしてください。
（コードエリアの右上に「Copy」ボタンがあります。）

/* 表で文字を折り返さず1行で表示 */
.scroll-table {
	white-space: nowrap;
}

/* 表「layout-table」のデザイン変更 */
table.layout-table {
	table-layout: fixed;
	text-align: center; /* 各セル内の文字の横位置 */
}
table.layout-table tr td:nth-child(1) { /* 1列目 */
	width: 60px; /* 列幅 */
	background: #f4f4f4; /* 背景色 */
}
table.layout-table tr td:nth-child(n+2) { /* 2列目以降 */
	width: 100px; /* 列幅 */
}
table.layout-table tr:nth-child(1) { /* 1行目 */
	background: #f4f4f4; /* 背景色 */
}

コメントなしのコードはこちら

.scroll-table {
	white-space: nowrap;
}

table.layout-table {
	table-layout: fixed;
	text-align: center;
}
table.layout-table tr td:nth-child(1) {
	width: 60px;
	background: #f4f4f4;
}
table.layout-table tr td:nth-child(n+2) {
	width: 100px;
}
table.layout-table tr:nth-child(1) {
	background: #f4f4f4;
}

コピーしたCSSを、次の2つの場所のどちらかに貼り付けます。

子テーマのスタイルシート（style.css）

  • 「外観」>「テーマファイルエディター」と進む。
  • 子テーマ（私の場合、jin-child）のスタイルシート（style.css）に貼り付ける。
  • 「ファイルを更新」をクリック。

追加CSS

  • 「外観」>「カスタマイズ」>「追加CSS」と進み、貼り付ける。
  • 「公開」をクリック。

なお、「追加CSS」ではコメントアウトが使えませんので、上の「コメントなしのコードはこちら」をご利用ください。

表を作成

表を作成していきます。

次の2つの方法のいずれか簡単な方で作成してください。

「テーブル」ブロック

WordPressに標準で搭載されている「テーブル」ブロックを使います。

  • 左上の「＋」をクリックし、「テーブル」を選択。
  • 「カラム数（列数）」「行数」を入力し、「表を作成」をクリック。
  • セルにデータを入力していく。

「表の編集」から、行や列の挿入・削除ができます。

Excel

Excel（などの表計算ソフト）であらかじめ作成した表を、WordPressに取り込むことができます。

  • Excelで表を作成する。
    この時点では中央揃え・罫線などは指定せず、データだけを入力していく。
  • 表全体を選択し、コピーする。
  • WordPressに移り、左上の「＋」をクリックし、「クラシック」を選択。
  • コピーしておいた表を貼り付ける。
  • 「ブロックへ変換」をクリック。

「表の編集」から、行や列の挿入・削除ができます。

表が作成できたら、右欄「ブロック」の一番下の「高度な設定」の中にある「追加CSSクラス」に、次の文字列をコピーして貼り付けておきましょう。

scroll-table

表のHTMLをちょっといじる

あと一息です！ここから表のHTMLをいじっていきます。
簡単なので、ご安心を。

まずは次のコードをコピーしておいてください。

<table class="layout-table">
  • 表を選択して、メニューバー「︙」から「HTMLとして編集」を選択。
  • <table>（</table>ではありません！）をコピーしておいたコードに書き換えます。
  • 枠外をクリックします。
    すると、「このブロックには、想定されていないか無効なコンテンツが含まれています。」という物騒な表示が出ます（焦らないで、手順どおりです）。
  • 「ブロックのリカバリーを試行」ボタンの横にある「…」から「HTMLに変換」を選択。

以上で完成です、お疲れ様でした！

保存をして、「プレビュー」や「投稿を表示」から出来栄えを見てみましょう！

まとめ

今回は、横長の表をスクロールさせる方法について解説しました。

CSSをさらに細かく設定すれば、デザインや読みやすさをアップできます。
いろいろ試してみてください！

＼ 実際にこの記事で「横長の表」を載せてるよ ／

4・9がないホテルは全部で何部屋？ 今回は、ホテルの部屋数に関するトリビアをご紹介したいと思います。 4と9がないホテル みなさんはホテルに泊...
ゆーきち
ゆーきち
今回も最後まで読んでいただき、ありがとうございました！
WordPress ブログ
RELATED POST