WordPressのテーブル先頭見出し行を固定スクロールさせる方法

WordPressでテーブル先頭の行列を固定させる方法

テーブルの見出しを固定する無料のJavaScript「FixedMidashi」の紹介です。

画面をスクロールした際、本来見切れてしまう先頭の見出し行が固定追従されるので、縦長の表を作成した時に使うと便利です。スマホにも対応しています。

使い方は、bodyのスクロールに対して固定見出しを制御する方法と、対象tableの親divのスクロールに対して固定見出しを制御する方法がありますが、今回は使い勝手の良いbodyモードを紹介します。

詳細は公式サイトFixedMidashiで確認して下さい。

サンプル

固定スクロール 固定スクロール 固定スクロール
サンプル 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
サンプル 29 30
サンプル 31 32
サンプル 33 34
サンプル 35 36
サンプル 37 38
サンプル 39 40

Fixed Midashiを使うための準備

Vectorから「Fixed Midashi」をダウンロードします。

Fixed Midashiをダウンロード

Fixed Midashiをダウンロード

必要なファイルは「fixed_midashi.js」だけです。

必要なファイルは「fixed_midashi.js」

必要なファイルは「fixed_midashi.js」

FFFTP及びサーバーのファイルマネージャから任意の場所に「fixed_midashi.js」をアップロードします。エックスサーバーのファイルマネージャの使い方は下記記事を参考にして下さい。

functions.phpを編集したら画面が真っ白!WordPress管理画面にログインできない時の戻し方

2014.01.17

この際、親テーマディレクトリの下にはアップロードしないで下さい。テーマをアップデートした際にファイルが消えてしまいます。今回は子テーマディレクトリの下にアップロードしました。

パス:/affilabo.com/public_html/wp-content/themes/hummingbird_custom/fixed_midashi.js

fixed_midashi.jsをサーバーにアップロード

fixed_midashi.jsをサーバーにアップロード

これで準備は完了です。

bodyモードの使い方

javascriptを読み込み、FixedMidashi.create() を呼び出します。

src=””には、サーバーにアップロードした「fixed_midashi.js」のパスを正確に入力して下さい。僕の場合は、「https://affilabo.com/wp-content/themes/hummingbird_custom/fixed_midashi.js」です。

念のため、アドレスバーにパスを入力して、javascriptファイルにアクセスできることを必ず確認して下さい。パスが間違っていると動作しません。

また、javascriptファイルはheaderに記述することもできますが、全てのページで読み込む必要はありません。僕は使いたいページのbodyに記述して読み込んでいます。

WordPressなら記事中に直接書き込んで使えます。

最後に、通常のtableタグに「_fixedhead」属性を定義します。

まとめると、通常のtableタグの前に2行追加して、tableタグに「_fixedhead」属性を定義するだけです。これで先頭の1行が固定されます。

カスタマイズ

name:value の形式で指定し、複数指定する場合はセミコロンで区切ります。詳細は_fixedhead 属性で確認して下さい。今回はよく使う2つを紹介します。

固定する行列の指定

固定する「rows(行)」と「cols(列)」を指定できます。

デフォルトで固定されているのは1行です。列は固定されていません。

属性を指定することで、3行1列固定にすることもできます(指定できるのは0~10)。

行だけなら「thead要素」を指定して要素全体を固定することもできます。

固定見出しの境界のボーダースタイルを指定

境界線の「border-color(線の色)」「border-style(線の種類)」「border-width(線の太さ)」を指定できます。デフォルトは何も定義されていません。

線の色と太さは定義しておくと見やすくなると思います。

境界線の色と太さを指定

境界線の色と太さを指定

最後に

列を固定する機会はあまりなさそうですが(横幅は大抵max-widhtが指定されている)、行を固定する機会はあると思いますので、その際は見出しを簡単に固定できるFixedMidashiを使うと便利です。

今のところしっくりくるプラグインは探しても見つかりませんでしたので、bodyモードの様な行の固定方法を使いたい場合は、FixedMidashiが簡単かつ綺麗に実装できると思います。

スポンサーリンク
スポンサーリンク

4 件のコメント

  • こんにちは。scofieldさんのおかげで何時間も悩んでできなかった行の固定ができました。
    ありがとうございます。

    そこで、1つ質問なんですが、
    私はWPでブログを書いています。
    で記事を書くモードの「ビジュアル」と「テキスト」を切り替えると
    body onLoad=”FixedMidashi.create();” ⇒ 削除される
     ⇒ そのまま
    table _fixedhead ⇒ table に書き換えられる

    上のように自動的に一部が書き換えられたり削除されてしまうようです。
    これはやはりwpの仕様なのでしょうか?

  • 上のコメントの 
    ⇒ そのまま の部分は
    script type=”text/javascript” src=”hoge/fixed_midashi.js
    です。どうやらコメント欄に書き込めない?ようです。
    失礼しました。

    • 自動整形と呼ばれるWprdPressの仕様です。

      テキストエディタ⇔ビジュアルエディタを切り替えると、brタグ、pタグ、HTMLのタグミスが自動除去されます。他にも、preタグ内のコードやスペースが消されることもあります。

      結構厄介です・・・。

      brタグやpタグを消去させないプラグインはありますが、全てを完璧に停止させる方法は僕も分かりませんでしたので、それ以降ビジュアルエディタは使っていない状態です。

      自動整形機能を止めない限り、ビジュアルエディタに切り替えた場合は、最後にテキストエディタに戻して消えた部分を書き直すしかないと思います。

  • コメントを残す

    メールアドレスが公開されることはありません。