WordPressのCocoonテーマを使っている場合、表の先頭列を固定する設定が便利ですが、全体に適用されるため、特定の記事だけに適用したい場合には別の方法を考える必要があります。この記事では、Cocoon設定を使わず、個別の表にのみ横スクロールと先頭列固定を実現する方法を解説します。
WordPressで表の先頭列を固定する方法
まず、表の先頭列を固定するための基本的なアプローチは、CSSを使用して固定することです。ですが、Cocoonテーマの設定を使うと、全体に適用されてしまうため、特定の記事やページのみで先頭列を固定するには工夫が必要です。
この記事では、表ごとに異なる設定をしたい場合の方法をいくつか紹介します。
1. TablePressを使って個別に設定する方法
TablePressプラグインを使う場合、特定の表のみ先頭列を固定するためには、HTMLとCSSを組み合わせて設定します。TablePressでは、ショートコードを使って表を挿入できますが、そのままでは先頭列の固定はできません。そこで、CSSを追加することで、特定の記事にのみ適用できます。
具体的には、TablePressで作成した表にIDを付けて、そのIDに対応するCSSを追加する方法です。例えば、`#tablepress-1`というIDの表にのみ、先頭列固定のCSSを適用することができます。
2. CSSで先頭列固定を実現する方法
CSSを使って先頭列を固定するには、以下のようなスタイルを追加します。これにより、特定の記事内でのみ先頭列を固定することが可能です。
#tablepress-1 tbody tr td:first-child, #tablepress-1 tbody tr th:first-child { position: sticky; left: 0; background-color: #fff; z-index: 1; }このCSSは、`#tablepress-1`というIDの表にのみ適用され、表の最初の列（`td:first-child`と`th:first-child`）がスクロールしても固定されます。これを各記事に必要な表ごとにIDを変更して適用できます。
3. カスタムCSSとHTMLを利用した方法
さらに、特定の記事にのみCSSを適用したい場合は、記事に直接カスタムCSSを埋め込む方法もあります。WordPressでは、記事やページごとにカスタムCSSを追加することができます。
記事編集画面の「カスタムHTML」ブロックを使って、HTMLとCSSを直接埋め込み、特定の表にのみ先頭列固定を適用することが可能です。この方法では、CSSを記事ごとに切り替えることができるので、他の記事に影響を与えることなく設定を変更できます。
4. プラグインを使って自動化する方法
プラグインで個別の表にのみ先頭列を固定する方法としては、特定のカスタマイズを加えるプラグインを使うのも一つの手です。しかし、WordPressのプラグインで「個別の表にのみ固定を適用する」機能を持ったものは少ないため、CSSやHTMLでのカスタマイズが中心になります。
まとめ
特定の記事にのみ先頭列を固定する方法は、TablePressを使って個別にIDを設定し、そのCSSをカスタマイズすることが一般的な解決方法です。また、カスタムCSSやHTMLを直接埋め込むことで、他の記事に影響を与えることなく設定できます。これらの方法を使って、表の先頭列固定を効率的に管理し、特定の記事だけに適用できるようになります。
コメント