loading
 読み込み中...
ウェブの触手-日々の生活に新たなスパイスを-
アイキャッチ画像
Home > [Wordpress] > 【Wordpress】テーブルの見出しを追尾固定表示させてみやすくするjQuery.floatTheadが便利
この記事は約6分で読めます。

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

投稿日:2016.10.13

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

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

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

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

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

それを可能にするのが「jQuery.floatThead」というスクリプトです。

SIRIUSレビューイメージ画像

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.floatTheadを作動させるにはjQueryが必要です。

ここではjQueryがすでにインストールされてる前提で話を進めていきます。

今回はワードプレスを例に実装方法をご紹介してますが、SIRIUSのような静的サイトでも基本的なやり方は同じです。

公式サイトから「jQuery.floatThead」をダウンロードします。

(ページ下の方にダウンロードボタンがあります)

キャプチャ画像

ダウンロードしたファイルを解凍するといろんなファイルが見当たりますが、
使うのはたった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、オプションを設定してやれば
さらにいろんな表現方法で表を見せることができます。

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

英語が堪能な方は読み解いてみてください。
(私には無理でした^^;)

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

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

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

スポンサーリンク

おススメTCDテーマ

WordPressテーマ「LUXE (tcd022)」

コメント(0件)

コメントをどうぞ

入力いただいたメールアドレスは公開されません。
個人情報などを記入された場合、投稿いただいたコメントの該当箇所を編集して公開するか、もしくは非公開にします。

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

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

先頭へ