THE THOR ザ・トール テーブル の スクロール をお知らせ

THE THOR で テーブル スクロール をお知らせするカスタマイズを行いました。

テーマについてTHE THOR レビュー

ブログに挿入されたテーブル。スマホで見ていると横にスクロールするのかわかりづらいときが結構ありますよね。そんなときにスクロールが可能であることを表示するようにしました。

出来上がりは以下の通りです。点滅してるscroll >>>が追加したお知らせ。

※PCのときは表示されません

THE THOR テーブルを横スクロールする機能

THE THOR には「スマホテーブル横スクロール機能」があります。これを使用するとテーブルが画面幅で改行せず横スクロールするようになります。

アイコンをクリックして出てきた枠のなかでテーブルを作成すればテーブルが横スクロールするようになる。使用したことない人は一度やってみるとわかりやすいかと思うので試してみてください。意外と便利です。

この記事のカスタマイズは THE THOR の「スマホテーブル横スクロール機能」を使用した場合のみ適用されます。

THE THOR テーブル スクロール を促すカスタマイズ

カスタマイズは追加CSSにコードをコピペします。

@media screen and (max-width : 480px){
.tableScroll:before {
	content: "scroll >>>";
	font-size:80%;
	font-weight:800;
	color:#0268b7;
	position: relative;
	position: -webkit-sticky;
	position: sticky;
	left: 0;
	animation: yokoSC 1.5s ease-in-out infinite alternate;
}
}
@keyframes yokoSC{
	0% {opacity:.2;}
	100% {opacity:1;}
}
@-webkit-keyframes yokoSC{
	0% {opacity:.2;}
	100% {opacity:1;}
}
@-moz-keyframes yokoSC{
	0% {opacity:.2;}
	100% {opacity:1;}
}

scroll >>>が表示される文字になります。良い文が思い浮かばなかったので暫定的にこれ。なにか良い文があれば教えてもらえると嬉しいです。

480px以下をスマホのブレイクポイントとしているので各サイトにあわせて変更してください。

テーブルはスプレッドシートからコピペする方法等もありますが、このカスタマイズは THE THOR の「スマホテーブル横スクロール機能」を使用した場合のみ適用されます。

関連記事スプレッドシートでテーブルを作成

以上で完成です。

スクロールするほどの表ではないのに「スマホテーブル横スクロール機能」を使用するとお知らせが表示されてしまうので注意しましょう。

※カスタマイズは自己責任でお願いします。