支援者募集中！仕事依頼はこちら

見出し固定、さらにスクロールヒントを表示させるテーブルをコピペで作る

見出し固定スクロールヒント付きテーブルの作り方
スポンサーリンク

ブログやWebサイトに必要不可欠なテーブル！

データをまとめる時などに使いますがデータ量が多いとまぁ入りきらないですよね。

パソコンで見たときは入っていてもスマホで見るとぐちゃぁと崩れてることもしばしば。

そんな時の対処法は「横スクロールを可能にして見えないところは隠す」がメジャーかと思います。

今回はそれの発展バージョンです。デモはこちら！

スクロールできます
上部見出し上部見出し上部見出し上部見出し上部見出し上部見出し上部見出し
1行目:見出し1行目:ここにテキストor画像1行目:ここにテキストor画像1行目:ここにテキストor画像1行目:ここにテキストor画像1行目:ここにテキストor画像1行目:ここにテキストor画像
2行目:見出し2行目:ここにテキストor画像2行目:ここにテキストor画像2行目:ここにテキストor画像2行目:ここにテキストor画像2行目:ここにテキストor画像2行目:ここにテキストor画像
3行目:見出し3行目:ここにテキストor画像3行目:ここにテキストor画像3行目:ここにテキストor画像3行目:ここにテキストor画像3行目:ここにテキストor画像3行目:ここにテキストor画像

特徴をまとめると以下の通りです。

  • 左の見出し固定
  • スクロールヒント表示

スクロールヒントは指のやつです。スクロールできるかどうか一発でわかりますね！

注意点としてはInternetExplorerでは見出し固定がされません。InternetExplorerのシェアは10%強ですがPCユーザーが多いサイト以外はそんな気にする必要ないと思います。

コピペで簡単にできるようになってるのでテーブルに困ってる方はぜひやってみてください。

この記事はWordPressユーザー向けに書いています。
スポンサーリンク

見出し固定、かつスクロールヒントを表示させるテーブル

手順は以下の通りです。

手順
  • STEP1
    CSSコピペ
    style.cssにコードをコピペ
  • STEP2
    function.phpコピペ
    スクロールヒント使いたい人限定
  • STEP3
    HTMLコピペ
    投稿画面でHTMLコピペ

STEP1：CSSをコピペ

下記CSSをコピペしていきます。

メモ

「外観→テーマエディター→style.css(子テーマ)」。もしくは、「外観→カスタマイズ→追加CSS」に貼り付けてください。

CSSが反映されない場合はスーパーリロード(Ctrl+F5orShift+F5)してください。

右上に出てくるマークを押すとコピペしやすいです

  1. /************************************
  2. ** 横長テーブル
  3. ************************************/
  4. .p-sticky-table{
  5. white-space: nowrap;
  6. line-height:1.6;
  7. }
  8. .p-sticky-table table{
  9. border:none;
  10. border-left:1px solid #dedede;
  11. border-right:1px solid #dedede;
  12. border-bottom: 1px solid #dedede;
  13. border-collapse: collapse;
  14. word-break: break-all;
  15. table-layout: fixed;
  16. display:block;
  17. overflow:scroll;
  18. }
  19. .p-sticky-table th{
  20. background:#f0f9ff !important; /* 見出し背景色 */
  21. color: #666;/* 見出し文字色 */
  22. font-weight: 500 !important;/* 見出し文字太さ */
  23. font-size:13px !important; /* 見出し文字サイズ */
  24. }
  25. .p-sticky-table td{
  26. font-size: 13px !important; /* 文字サイズ */
  27. color:#555; /* 文字色 */
  28. }
  29. .p-sticky-table thead th:first-child,.p-sticky-table tbody th:first-child{
  30. position: -webkit-sticky;
  31. position: sticky;
  32. left: 0;
  33. z-index: 1;
  34. border:none;
  35. }
  36. .p-sticky-table tr{
  37. border-top:1px solid #dedede;
  38. border-bottom:none !important;
  39. }
  40. .p-sticky-table tr:last-child{
  41. border-bottom:1px solid #dedede;
  42. }
  43. .p-sticky-table th, .p-sticky-table td {
  44. vertical-align:middle !important;
  45. border: none !important;
  46. background:#fff;
  47. text-align:center;
  48. padding:12px !important;
  49. }
  50. .p-sticky-table img{
  51. margin:0;
  52. padding:0;
  53. max-width:70px !important; /* 画像最大サイズ */
  54. }
  55. /* スマホ */
  56. @media screen and (max-width: 560px) {
  57. .p-sticky-table th{
  58. font-size:11px !important; /* スマホ見出し文字サイズ */
  59. }
  60. .p-sticky-table td{
  61. font-size: 11px !important; /* スマホ文字サイズ */
  62. }
  63. .p-sticky-table thead th:first-child,.p-sticky-table tbody th:first-child{
  64. white-space:normal;
  65. min-width:80px; /* スマホ見出し横幅 */
  66. }
  67. .p-sticky-table th, .p-sticky-table td {
  68. padding:8px !important;
  69. }
  70. .p-sticky-table img{
  71. max-width:50px !important; /* スマホ画像最大サイズ */
  72. }
  73. }
/************************************
** 横長テーブル
************************************/
.p-sticky-table{
	white-space: nowrap;
	line-height:1.6;
}
.p-sticky-table table{
	border:none;
	border-left:1px solid #dedede;
	border-right:1px solid #dedede;
	border-bottom: 1px solid #dedede;
    border-collapse: collapse;
	word-break: break-all;
	table-layout: fixed;
	display:block;
	overflow:scroll;
}
.p-sticky-table th{
	background:#f0f9ff !important; /* 見出し背景色 */
	color: #666;/* 見出し文字色 */
	font-weight: 500 !important;/* 見出し文字太さ */
	font-size:13px !important; /* 見出し文字サイズ */
}
.p-sticky-table td{
	font-size: 13px !important; /* 文字サイズ */
	color:#555; /* 文字色 */
}
.p-sticky-table thead th:first-child,.p-sticky-table tbody th:first-child{
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 1;
	border:none;
}
.p-sticky-table tr{
	border-top:1px solid #dedede;
	border-bottom:none !important;
}
.p-sticky-table tr:last-child{
	border-bottom:1px solid #dedede;
}
.p-sticky-table th, .p-sticky-table td {
	vertical-align:middle !important;
	border: none !important;
	background:#fff;
	text-align:center;
	padding:12px !important;
}
.p-sticky-table img{
	margin:0;
	padding:0;
	max-width:70px !important; /* 画像最大サイズ */
}
/* スマホ */
@media screen and (max-width: 560px) {
	.p-sticky-table th{
		font-size:11px !important; /* スマホ見出し文字サイズ */
	}
	.p-sticky-table td{
		font-size: 11px !important; /* スマホ文字サイズ */
	}
	.p-sticky-table thead th:first-child,.p-sticky-table tbody th:first-child{
		white-space:normal;
		min-width:80px; /* スマホ見出し横幅 */
	}
	.p-sticky-table th, .p-sticky-table td {
		padding:8px !important;
	}
	.p-sticky-table img{
		max-width:50px !important; /* スマホ画像最大サイズ */
	}
}

色や大きさを変更したい場合はコメントに書いてある通りに数値やカラーコードを変更してください。(!importantは残してね)

STEP2：function.phpにコードコピペ

スクロールヒントを表示させたい人限定です。アップルップルのライブラリを使って表示させます。

下記コードを子テーマのfunction.phpにコピペしてください。

必ず手元に編集前のfunction.phpを残しておくこと！
アップ後サイトに繋がらなくなったらすぐに戻してね！

右上に出てくるマークを押すとコピペしやすいです

  1. function p_table_func() {
  2. echo <<< EOM
  3. <link rel="stylesheet" href="https://unpkg.com/scroll-hint@1.1.10/css/scroll-hint.css">
  4. <script src="https://unpkg.com/scroll-hint@1.1.10/js/scroll-hint.js"></script>
  6. <script>
  7. window.addEventListener('DOMContentLoaded', function(){
  8. new ScrollHint('.js-scrollable', {
  9. remainingTime: 3000,
  10. i18n: {
  11. scrollable: 'スクロールできます'
  12. }
  13. });
  14. });
  15. </script>
  16. EOM;
  17. }
  18. add_action( 'wp_footer', 'p_table_func' );
function p_table_func() {
echo <<< EOM
<link rel="stylesheet" href="https://unpkg.com/scroll-hint@1.1.10/css/scroll-hint.css">
<script src="https://unpkg.com/scroll-hint@1.1.10/js/scroll-hint.js"></script>

<script>
    window.addEventListener('DOMContentLoaded', function(){
        new ScrollHint('.js-scrollable', {
        remainingTime: 3000,
      i18n: {
        scrollable: 'スクロールできます'
      }
});
    });
</script>
EOM;
}
add_action( 'wp_footer', 'p_table_func' );

「remainingTime: 3000」は自動で非表示になる時間です。スクロールするまで常時表示させておきたい人は消してください。デモはわかりやすいように消してあります。

「スクロールできます」は表示される文章です。好きに変更して大丈夫です！

ちなみに指の背景色を白に変えるには「remainingTime: 3000,」の下に

  1. scrollHintIconAppendClass: 'scroll-hint-icon-white',
scrollHintIconAppendClass: 'scroll-hint-icon-white',

を入れればOK！

STEP3：HTMLをコピペ、入力

ここまでで準備は整ったのであとは投稿画面でHTMLを入力するのみです。

AddQuicktagなどに登録しておくといつでも使えます。

下記コードを投稿画面にコピペし、コンテンツを入力します。

  1. <div class="p-sticky-table">
  2. <table class="js-scrollable">
  3. <thead>
  4. <tr>
  5. <th>上部見出し</th>
  6. <th>上部見出し</th>
  7. <th>上部見出し</th>
  8. <th>上部見出し</th>
  9. <th>上部見出し</th>
  10. <th>上部見出し</th>
  11. <th>上部見出し</th>
  12. </tr>
  13. </thead>
  14. <tbody>
  15. <tr>
  16. <th>1行目:見出し</th>
  17. <td>1行目:ここにテキストor画像</td>
  18. <td>1行目:ここにテキストor画像</td>
  19. <td>1行目:ここにテキストor画像</td>
  20. <td>1行目:ここにテキストor画像</td>
  21. <td>1行目:ここにテキストor画像</td>
  22. <td>1行目:ここにテキストor画像</td>
  23. </tr>
  24. <tr>
  25. <th>2行目:見出し</th>
  26. <td>2行目:ここにテキストor画像</td>
  27. <td>2行目:ここにテキストor画像</td>
  28. <td>2行目:ここにテキストor画像</td>
  29. <td>2行目:ここにテキストor画像</td>
  30. <td>2行目:ここにテキストor画像</td>
  31. <td>2行目:ここにテキストor画像</td>
  32. </tr>
  33. <tr>
  34. <th>3行目:見出し</th>
  35. <td>3行目:ここにテキストor画像</td>
  36. <td>3行目:ここにテキストor画像</td>
  37. <td>3行目:ここにテキストor画像</td>
  38. <td>3行目:ここにテキストor画像</td>
  39. <td>3行目:ここにテキストor画像</td>
  40. <td>3行目:ここにテキストor画像</td>
  41. </tr>
  42. </tbody>
  43. </table>
  44. </div>
<div class="p-sticky-table">
<table class="js-scrollable">
<thead>
<tr>
<th>上部見出し</th>
<th>上部見出し</th>
<th>上部見出し</th>
<th>上部見出し</th>
<th>上部見出し</th>
<th>上部見出し</th>
<th>上部見出し</th>
</tr>
</thead>
<tbody>
<tr>
<th>1行目:見出し</th>
<td>1行目:ここにテキストor画像</td>
<td>1行目:ここにテキストor画像</td>
<td>1行目:ここにテキストor画像</td>
<td>1行目:ここにテキストor画像</td>
<td>1行目:ここにテキストor画像</td>
<td>1行目:ここにテキストor画像</td>
</tr>
<tr>
<th>2行目:見出し</th>
<td>2行目:ここにテキストor画像</td>
<td>2行目:ここにテキストor画像</td>
<td>2行目:ここにテキストor画像</td>
<td>2行目:ここにテキストor画像</td>
<td>2行目:ここにテキストor画像</td>
<td>2行目:ここにテキストor画像</td>
</tr>
<tr>
<th>3行目:見出し</th>
<td>3行目:ここにテキストor画像</td>
<td>3行目:ここにテキストor画像</td>
<td>3行目:ここにテキストor画像</td>
<td>3行目:ここにテキストor画像</td>
<td>3行目:ここにテキストor画像</td>
<td>3行目:ここにテキストor画像</td>
</tr>
</tbody>
</table>
</div>

行を増やす：<tr> ~ </tr>をコピー
行を減らす：<tr> ~ </tr>を削除
列を増やす：それぞれ1行ずつ追加
列を減らす：それぞれ1行ずつ削除

上部見出しが必要ない場合：

スクロールできます
1行目:見出し1行目:ここにテキストor画像1行目:ここにテキストor画像1行目:ここにテキストor画像1行目:ここにテキストor画像1行目:ここにテキストor画像1行目:ここにテキストor画像
2行目:見出し2行目:ここにテキストor画像2行目:ここにテキストor画像2行目:ここにテキストor画像2行目:ここにテキストor画像2行目:ここにテキストor画像2行目:ここにテキストor画像
3行目:見出し3行目:ここにテキストor画像3行目:ここにテキストor画像3行目:ここにテキストor画像3行目:ここにテキストor画像3行目:ここにテキストor画像3行目:ここにテキストor画像
  1. <div class="p-sticky-table">
  2. <table class="js-scrollable">
  3. <tbody>
  4. <tr>
  5. <th>1行目:見出し</th>
  6. <td>1行目:ここにテキストor画像</td>
  7. <td>1行目:ここにテキストor画像</td>
  8. <td>1行目:ここにテキストor画像</td>
  9. <td>1行目:ここにテキストor画像</td>
  10. <td>1行目:ここにテキストor画像</td>
  11. <td>1行目:ここにテキストor画像</td>
  12. </tr>
  13. <tr>
  14. <th>2行目:見出し</th>
  15. <td>2行目:ここにテキストor画像</td>
  16. <td>2行目:ここにテキストor画像</td>
  17. <td>2行目:ここにテキストor画像</td>
  18. <td>2行目:ここにテキストor画像</td>
  19. <td>2行目:ここにテキストor画像</td>
  20. <td>2行目:ここにテキストor画像</td>
  21. </tr>
  22. <tr>
  23. <th>3行目:見出し</th>
  24. <td>3行目:ここにテキストor画像</td>
  25. <td>3行目:ここにテキストor画像</td>
  26. <td>3行目:ここにテキストor画像</td>
  27. <td>3行目:ここにテキストor画像</td>
  28. <td>3行目:ここにテキストor画像</td>
  29. <td>3行目:ここにテキストor画像</td>
  30. </tr>
  31. </tbody>
  32. </table>
  33. </div>
<div class="p-sticky-table">
<table class="js-scrollable">
<tbody>
<tr>
<th>1行目:見出し</th>
<td>1行目:ここにテキストor画像</td>
<td>1行目:ここにテキストor画像</td>
<td>1行目:ここにテキストor画像</td>
<td>1行目:ここにテキストor画像</td>
<td>1行目:ここにテキストor画像</td>
<td>1行目:ここにテキストor画像</td>
</tr>
<tr>
<th>2行目:見出し</th>
<td>2行目:ここにテキストor画像</td>
<td>2行目:ここにテキストor画像</td>
<td>2行目:ここにテキストor画像</td>
<td>2行目:ここにテキストor画像</td>
<td>2行目:ここにテキストor画像</td>
<td>2行目:ここにテキストor画像</td>
</tr>
<tr>
<th>3行目:見出し</th>
<td>3行目:ここにテキストor画像</td>
<td>3行目:ここにテキストor画像</td>
<td>3行目:ここにテキストor画像</td>
<td>3行目:ここにテキストor画像</td>
<td>3行目:ここにテキストor画像</td>
<td>3行目:ここにテキストor画像</td>
</tr>
</tbody>
</table>
</div>
HTML入力のポイント

コンテンツの文章が長くなる場合は改行を入れて調整してください。改行を入れないと横長になります。

導入済みのブログ、サイトを紹介させてください

「この記事を見て導入したよ！」という方でSNSやブログでこの記事を紹介していただいた場合(ココ大事！)、こちらでブログやサイトを紹介させていただきます！

その際テーブルを使っている記事を教えてください。長いタイトルは少し省略させていただきます！

増えすぎたら締め切ります。ご連絡お待ちしております！

他にもコピペカスタマイズやってます

他にもコピペでできるカスタマイズをやっているので良かったらご覧ください。

あわせて読むコピペでできるブログカスタマイズまとめ

コピペでできるブログカスタマイズまとめ【HTML&CSS】
ブロガー、アフィリエイターに役立つブログやサイトのカスタマイズをまとめていきます。HTML、CSSがわからなくてもコピペ可！WordPress(Cocoon、JIN、SANGO、Affingerなど)、はてなブログなど一部機能を除けば誰でも利用可能です。
ponhiro.com

コメント

ページトップへ