アイキャッチ画像
HOME > Wordpress > 【WordPress】テーブルの見出しを追尾固定表示させてみやすくするjQuery.floatTheadが便利
記事公開日:2016.10.13
この記事は約6分で読めます。
当ページのリンクにはプロモーションが含まれています。

【Wordpress】テーブルの見出しを追尾固定表示させてみやすくするjQuery.floatTheadが便利

この記事は最終更新日から8年以上経過しているため現状にそぐわない可能性もあります。

テーブルセルを使って表形式でデータを見せることはよくありますが、表が下に長いと当然スクロールして見ることになります。

その時、下の方にあるデータがどんな項目だったのか、見出しは何だったのかが思い出せなくてわざわざ先頭までスクロールして戻って見出しを確かめた経験はないですか?

その後、再びお目当てのデータまでまたスクロールしようとしても、今度はそのデータがどこにあったのか思い出せずに行ったり来たり…。

こんな時、見出しだけは常に画面上部にずっと表示されていればそんな面倒なことをしなくても済みますよね。

訪問者に優しいサイトになりますよね。

それを可能にするのが「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.phpfooter.phpに以下を加筆します。

(テーマのクセやあなたの好みでどちらかにどうぞ)

4行目の「tablefix」というクラス名は、この後説明するテーブルに付与するクラス名と同じものになってます。

今回は仮で”tablefix”というクラス名を使ってますが、もちろんあなたの好みで別のクラス名に変えても結構です。

その場合、上のスクリプト上のクラス名とテーブルのクラス名は同じにする必要があります。

スポンサーリンク

スポンサーリンク

テーブル表の書き方

データテーブル表の書き方のポイントは3ヵ所です。

①<table>タグにクラス名をつけること。(今回は”tablefix”にしてあります)→1行目

②見出し(固定表示)となる<th>タグは<thead>~</thead>で囲むこと。→2~9行目

③データ部分は<tbody>~</tbody>で囲むこと。→10~26行目

 

これに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、オプションを設定してやればさらにいろんな表現方法で表を見せることができます。

公式サイトにはオプションのデモや実装方法などが書いてあります。

英語が堪能な方は読み解いてみてください。

(私には無理でした)

ワードプレス有料テーマの探し方画像

スポンサーリンク

記事はお役にたてましたか?

記事に興味をもっていただけたらソーシャルボタンでの共有お願いします^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

コメントはお気軽にどうぞ

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

内容に問題なければ下記の「コメントを送信する」ボタンを押してください。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)