【必見】楽天スーパーセール中

THE SONIC 左セルを固定してスクロールできる表【カスタマイズ】

4 min

THE SONIC では 表(テーブル)の内容が横にいっぱいになってしまう場合にスクロールできる機能があります。

しかし、スクロールしたときに何についての説明なのか分かりにくくなってしまうことがありますよね。

そのような場合はエクセルのように一番左のセルを固定して、スクロール時にも表示すると見やすくなります。

カスタムHTMLを使わないので通常通り表を作るだけでオッケーです。

サービスや製品の性能比較などにぴったりのカスタマイズです。

スクロール表

デモはこちら

style.css に追記

THE SONIC 子テーマの 「style.css」に以下のコードを追記しましょう。

デフォルトのままだとセルの背景色が透過してしまうので、左に固定するセルの背景色を指定したほうが見やすくなります。

style.css

.is-comparison-table thead th:first-child, .is-comparison-table tbody tr td:first-child {
	position: sticky;
	position: -webkit-sticky;
	left: -1px;
	z-index: 2;
}

.is-comparison-table th:first-child {
	background: #D6EEF4; /*上部ヘッダーセル色*/
}

.is-comparison-table tbody tr td:first-child {
	background: #EFF8FA; /*固定セル背景色*/
	font-weight: 900;
}

カラーコードがわからない場合はこちらから

テーブルを作成

  1. 記事編集画面より 表ブロックを新規追加
  2. 好きな列、行数の表を作成
  3. 投稿画面右のブロック設定の「表をスクロール表示する」にチェック
  4. 高度の設定 > 追加CSSクラスに 「is-comparison-table」を追記
  5. ヘッダーセクションを追加

記事内に新しく表ブロックを追加しましょう。

表をスクロール表示する」にチェック、追加CSS にスペースをあけて「is-comparison-table」を入力してください。(これはテーブル作成後でも設定可能です)

テーブルを追加

表ができたら、表の設定からヘッダーセクション(表上部のラベル)にチェックをいれます。

ヘッダーセクション

一番左側のセルにはサービス名、製品名などが来るようにしましょう。

より見やすくカスタマイズ

  • セルにマウスホバーすると横列をハイライト
  • セルの内容を左寄せ

style.css

.is-comparison-table tbody tr:hover {
	background: #EFF8FA;
}

.is-comparison-table th, .is-comparison-table td {
	text-align: left;
}

ほかのデザインでも使えるようにする

デフォルトデザインの表のカスタマイズなので、他のデザインの表を使い分ける場合にセルの背景色が崩れてしまうことがあります。

ほかの表デザインでも使えるようそれぞれ背景色を指定しましょう。

  • is-style-stripes (ストライプ)
  • .is-style-table-simple (シンプル)
  • .is-style-table-pop (ポップ)

style.css

/*ストライプ*/
.is-style-stripes.is-comparison-table th:first-child {
	background: #D6EEF4; /*上部ヘッダーセル色*/
}

.is-style-stripes.is-comparison-table tbody tr td:first-child {
	background: #EFF8FA; /*固定セル背景色*/
}

/*シンプル*/
.is-style-table-simple.is-comparison-table th:first-child {
	background: #D6EEF4; /*上部ヘッダーセル色*/
}

.is-style-table-simple.is-comparison-table tbody tr td:first-child {
	background: #EFF8FA; /*固定セル背景色*/
}

/*ポップ*/
.is-style-table-pop.is-comparison-table th:first-child {
	background: #02A5C7; /*上部ヘッダーセル色*/
}

.is-style-table-pop.is-comparison-table tbody tr td:first-child {
	background: #CAE8F0; /*固定セル背景色*/
}

ストライプを使う場合はでホバーしても背景色が変わらないので、!importantをつけてください。

style.css

.is-comparison-table tbody tr:hover {
	background: #EFF8FA !important;
}

ポイント

スマホでは横幅が狭いので、左に固定するセルのテキストは長くならないように注意してください。

もちろんインライン画像を指定することもできます。

インライン画像

少し別のデザイン

現在このサイトで使用中のデザイン

製品名ユーザー数使いやすさ備考
Windows多い★★★
ソフトが豊富であらゆる環境で使用されている
Mac少ない★★デザインがすぐれている反面、ゲームなどには向かない
Linux少ない多数のディストリがありデスクトップ版も改良を重ねている
Android普通★★カスタマイズ性にすぐれ販売機種も多様
iPhone多い★★★世界中で高い人気を誇るスマートフォン

style.css

/*--------------------------------------
表 シンプル 製品比較
--------------------------------------*/
.is-comparison-table thead th:first-child, .is-comparison-table tbody tr td:first-child {
	position: sticky;
	position: -webkit-sticky;
	left: -1px;
	max-width: 25vw;
	overflow: hidden;
	box-shadow: 0 0 2px #71ADE2;
}

.is-comparison-table thead th {
	background: #71ADE1;
	color: #fff;
}

.is-comparison-table tbody tr td:first-child {
	background: #E3EEF9;
	color: #71ADE1;
}

.is-comparison-table tbody tr:hover {
	background: #E3EEF9;
}

.is-style-table-simple.is-comparison-table thead th:nth-child(even) {
	background: #71ADE1;
	color: #fff;
}

THE SONIC 関連記事

HTML / CSS を勉強するなら Udemy

udemy

HTML / CSS の基礎を勉強するなら Udemy (ユーデミー)の講座がおすすめです。買い切りなのでいつでも勉強ができます。

大幅に安くなるのでキャンペーン中に購入しましょう。

たにぐちまことさんの動画は初心者にも分かりやすいです。聞きやすくスッと頭に入ってきますよ。

ZIMA

気になるガジェットやサービスをレビュー!日常生活のアップデートを目標に役に立つ情報を掲載していきます。

仕事の依頼などはお問い合わせからどうぞ。

FOLLOW

カテゴリー:
関連記事

コメントを残す

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