【Wordpress】テーブルの見出しを追尾固定表示させてみやすくするjQuery.floatTheadが便利
も・く・じ
テーブルセルを使って表形式でデータを見せることはよくありますが、表が下に長いと当然スクロールして見ることになります。
その時、下の方にあるデータがどんな項目だったのか、見出しは何だったのかが思い出せなくてわざわざ先頭までスクロールして戻って見出しを確かめた経験はないですか？
その後、再びお目当てのデータまでまたスクロールしようとしても、今度はそのデータがどこにあったのか思い出せずに行ったり来たり…。
こんな時、見出しだけは常に画面上部にずっと表示されていればそんな面倒なことをしなくても済みますよね。
訪問者に優しいサイトになりますよね。
それを可能にするのが「jQuery.floatThead」というスクリプトです。
jQuery.floatTheadの実例
まずはコチラ↓の一般的な表をご覧ください。
| 【炭水化物】 | 分量 | 糖質 | カロリー |
|---|---|---|---|
| ごはん | お茶碗1杯（150g） | 55.2g | 252kcal |
| 切り餅 | 1個（50g） | 24.8g | 118kcal |
| 食パン | 1枚（50g） | 22.2g | 132kcal |
| マフィン | 1個（75g） | 29.7g | 171kcal |
| クリームパン | 1個（70g） | 28.2g | 214kcal |
| ピザ | 1切れ | 34g | 214kcal |
| シリアル | 1食分（50g） | 43.5g | 191kcal |
| パスタ（乾麺） | 1人前（90g） | 62.6g | 340kcal |
| うどん（ゆで） | 1食分（220g） | 52.0g | 263kcal |
| そうめん（乾麺） | 1食分（100g） | 67.1g | 342kcal |
| そば（ゆで） | 1食分（180g） | 43.2g | 238kcal |
| 即席めん | 麺1食分（90g） | 53.1g | 412kcal |
| 小麦粉（薄力粉） | 100g | 73.5g | 368kcal |
| 片栗粉 | 100g | 81.6g | 330kcal |
スクロールすると当然のことながら（背景が赤の）先頭の見出しも一緒に移動しちゃって、下の方のデータがいったい何を表すデータだったのかわかりにくいです。
（あくまでサンプルなのでそれほど長い表にはしてません）
続いて「jQuery.floatThead」を使って先頭の見出しを常時表示させた表をご覧ください。
（Excelの”先頭セルを固定する”機能と同じようなものです）
テーマ側で”ナビゲーションメニューをスクロール途中でフロート固定する”といった似たような機能が搭載されていると、うまく作動しない場合があります。
| 【炭水化物】 | 分量 | 糖質 | カロリー |
|---|---|---|---|
| ごはん | お茶碗1杯（150g） | 55.2g | 252kcal |
| 切り餅 | 1個（50g） | 24.8g | 118kcal |
| 食パン | 1枚（50g） | 22.2g | 132kcal |
| マフィン | 1個（75g） | 29.7g | 171kcal |
| クリームパン | 1個（70g） | 28.2g | 214kcal |
| ピザ | 1切れ | 34g | 214kcal |
| シリアル | 1食分（50g） | 43.5g | 191kcal |
| パスタ（乾麺） | 1人前（90g） | 62.6g | 340kcal |
| うどん（ゆで） | 1食分（220g） | 52.0g | 263kcal |
| そうめん（乾麺） | 1食分（100g） | 67.1g | 342kcal |
| そば（ゆで） | 1食分（180g） | 43.2g | 238kcal |
| 即席めん | 麺1食分（90g） | 53.1g | 412kcal |
| 小麦粉（薄力粉） | 100g | 73.5g | 368kcal |
| 片栗粉 | 100g | 81.6g | 330kcal |
いかがでした？
今度は見出しが常に表示されてるのでスクロールしてもそれが何を表すデータなのかが一目瞭然だったと思います。
しかもテーブル表示が終われば自動的に見出しも消えてくれましたでしょう。
表が下に長くなればなるほどこの機能のよさが発揮されます。
jQuery.floatTheadの実装
このスクリプトを作動させるにはjQueryが必要です。
ここではjQueryがすでにインストールされてる前提で話を進めていきます。
今回はワードプレスを例に実装方法をご紹介してますが、SIRIUSのような静的サイトでも基本的なやり方は同じです。
公式サイトから「jQuery.floatThead」をダウンロードします。
（ページ下の方にDownloadがあります）
ダウンロードしたファイルを解凍するといろんなファイルが見当たりますが、使うのはたった1個。
「dist」フォルダ内の「jquery.floatThead.min.js」のみです。
これをテーマフォルダ内に設置します。
わかりやすいのは「js」というフォルダを作ってそこに格納することでしょうか。
サーバーのテーマフォルダ内に「js」というフォルダを作成し、FTPソフトなどで「jQuery.floatThead」を「js」フォルダ内にアップロードしたら、header.phpかfooter.phpに以下を加筆します。
（テーマのクセやあなたの好みでどちらかにどうぞ）
|
0 1 2 3 4 5 6 7 |
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.floatThead.min.js"></script> <script type="text/javascript"> jQuery(function(){ $('table.tablefix').floatThead(); }); </script> |
4行目の「tablefix」というクラス名は、この後説明するテーブルに付与するクラス名と同じものになってます。
今回は仮で”tablefix”というクラス名を使ってますが、もちろんあなたの好みで別のクラス名に変えても結構です。
その場合、上のスクリプト上のクラス名とテーブルのクラス名は同じにする必要があります。
テーブル表の書き方
データテーブル表の書き方のポイントは3ヵ所です。
①<table>タグにクラス名をつけること。（今回は”tablefix”にしてあります）→1行目
②見出し（固定表示）となる<th>タグは<thead>～</thead>で囲むこと。→2～9行目
③データ部分は<tbody>～</tbody>で囲むこと。→10～26行目
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<table class="tablefix"> <thead> <tr> <th class="colh1">【炭水化物】</th> <th class="colh2">分量</th> <th class="colh3">糖質</th> <th class="colh5">カロリー</th> </tr> </thead> <tbody> <tr> <th class="foodname">ごはん</th> <td class="amountg">お茶碗1杯（150g）</td> <td class="toshitsug">55.2g</td> <td class="calorie">252kcal</td> </tr> ・ ・ ・ <tr> <th class="foodname">片栗粉</th> <td class="amountg">100g</td> <td class="toshitsug">81.6g</td> <td class="calorie">330kcal</td> </tr> </tbody> </table> |
これにCSSで若干のデザインを施したテーブル表がこちら↓です。
今度は2つの表を続けて並べてみました。
それぞれの見出しが独立した形で表示→非表示になるのがわかると思います。
| 【炭水化物】 | 分量 | 糖質 | カロリー |
|---|---|---|---|
| ごはん | お茶碗1杯（150g） | 55.2g | 252kcal |
| 切り餅 | 1個（50g） | 24.8g | 118kcal |
| 食パン | 1枚（50g） | 22.2g | 132kcal |
| マフィン | 1個（75g） | 29.7g | 171kcal |
| クリームパン | 1個（70g） | 28.2g | 214kcal |
| ピザ | 1切れ | 34g | 214kcal |
| シリアル | 1食分（50g） | 43.5g | 191kcal |
| パスタ（乾麺） | 1人前（90g） | 62.6g | 340kcal |
| うどん（ゆで） | 1食分（220g） | 52.0g | 263kcal |
| そうめん（乾麺） | 1食分（100g） | 67.1g | 342kcal |
| そば（ゆで） | 1食分（180g） | 43.2g | 238kcal |
| 即席めん | 麺1食分（90g） | 53.1g | 412kcal |
| 小麦粉（薄力粉） | 100g | 73.5g | 368kcal |
| 片栗粉 | 100g | 81.6g | 330kcal |
| 【きのこ】 | 分量 | 糖質 | カロリー |
|---|---|---|---|
| エノキ | 1パック（75g） | 2.8g | 17kcal |
| ブナシメジ | 1パック（240g） | 3.1g | 43kcal |
| マイタケ | 1パック（100g） | 0g | 16kcal |
| マッシュルーム | 1個（8g） | 0g | 4kcal |
| シイタケ | 1個（20g） | 0.3g | 4kcal |
| エリンギ | 1本（40g） | 1.3g | 10kcal |
| ひらたけ | 40g | 1.5g | 8kcal |
実はこのjQuery.floatThead、オプションを設定してやればさらにいろんな表現方法で表を見せることができます。
公式サイトにはオプションのデモや実装方法などが書いてあります。
英語が堪能な方は読み解いてみてください。
（私には無理でした）
スポンサーリンク
記事はお役にたてましたか?
記事に興味をもっていただけたらソーシャルボタンでの共有お願いします^^
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓