THE THOR で テーブル スクロール をお知らせするカスタマイズを行いました。
テーマについてTHE THOR レビュー
ブログに挿入されたテーブル。スマホで見ていると横にスクロールするのかわかりづらいときが結構ありますよね。そんなときにスクロールが可能であることを表示するようにしました。
出来上がりは以下の通りです。点滅してるscroll >>>が追加したお知らせ。
| テーブル | 項目1 | 項目2 | 項目3 | 項目4 |
| サンプル1 | これはとても素晴らしい | ここはいまいちなんだけど憎めない | 普通 | 新しい何かが欲しい |
| サンプル2 | 比較的良い | これはとても素晴らしい | 普通だけど好きだ | 新しすぎてついていけない |
※PCのときは表示されません
THE THOR テーブルを横スクロールする機能
THE THOR には「スマホテーブル横スクロール機能」があります。これを使用するとテーブルが画面幅で改行せず横スクロールするようになります。
アイコンをクリックして出てきた枠のなかでテーブルを作成すればテーブルが横スクロールするようになる。使用したことない人は一度やってみるとわかりやすいかと思うので試してみてください。意外と便利です。
この記事のカスタマイズは THE THOR の「スマホテーブル横スクロール機能」を使用した場合のみ適用されます。
THE THOR テーブル スクロール を促すカスタマイズ
カスタマイズは追加CSSにコードをコピペします。
外観 → カスタマイズ → 追加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 の「スマホテーブル横スクロール機能」を使用した場合のみ適用されます。
関連記事スプレッドシートでテーブルを作成
以上で完成です。
スクロールするほどの表ではないのに「スマホテーブル横スクロール機能」を使用するとお知らせが表示されてしまうので注意しましょう。
※カスタマイズは自己責任でお願いします。